用hexo+github搭建博客(二)NexT主题默认使用Muse模式,根据自己的喜好选择。我比较喜欢Pisces

[mac]优化博客 [完善于2018-05-29 15:39:01]

搜索了很多Next主题的效果，总结了自己比较喜欢或者已运用到Blog的效果~

链接自取

个人比较喜欢先甩参考链接,可以选择直接去看参考链接。

一、修改Next主题模式

修改themes/next/_config.yml文件Schemes属性

注意不要跟根目录下的_config.yml混淆
```
 # Schemes
 # scheme: Muse   
 # scheme: Mist
   scheme: Pisces
 # scheme: Gemini
```
NexT主题默认使用Muse模式,根据自己的喜好选择。

~~我比较喜欢Pisces ,对源码做了些样式修改。~~

后来我喜欢上了Gemini。Gemini跟Pisce相似,而且Gemini的源码样式是在Pisce的基础上重写的。

更新Hexo部署

每次修改后都可以更新部署,也可最后再一次性部署。后面不再赘述。

 $ cd  HotYan_Blog //进入博客文件夹目录

 $ hexo clean    // 清理缓存
 $ hexo generate // 生成文件
 $ hexo deploy   // 线上部署
         
 /*简写如下*/
 $ hexo clean
 $ hexo g
 $ hexo d

二、设置首页预览摘要

了解一下官网【Next使用文档】【如何设置阅读全文】介绍的三种方法

我使用的是用进行手动截断

三、侧边栏显示效果

修改themes/next/_config.yml文件sidebar属性

  sidebar:
      # Sidebar Position, available value: left | right (only for Pisces | Gemini).
        position: left
      # position: right //修改侧边栏位置

      # Sidebar Display, available value (only for Muse | Mist):
      #  - post    expand on posts automatically. Default.
      #  - always  expand for all pages automatically
      #  - hide    expand only when click on the sidebar toggle icon.
      #  - remove  Totally remove sidebar including sidebar toggle.
      # display: post      //默认
        display: always     //一直显示
      # display: hide      //初始隐藏
      # display: remove    //移除侧边栏

根据提示,设置自己喜欢的样式,我是Pisces主题,设置侧边栏在左边,且一直显示。

四、侧边栏社交链接

修改themes/next/_config.yml文件social属性

  /*文字链接*/
  social:
      GitHub: https://github.com/hotYan || github
      E-Mail: mailto:hotyann@163.com || envelope
  
  /*链接前图标*/
  social_icons:
      enable: true
      GitHub: github

我只添加了GitHub、E-Mail。

五、设置RSS

安装 hexo-generator-feed 插件

RSS需要有一个Feed链接，而这个链接需要靠hexo-generator-feed插件来生成
```
 $ cd HotYan_Blog
 $ npm install hexo-generator-feed --save
```

修改/_config.yml文件

 #type: RSS的类型(atom/rss2)
 #path: 文件路径,默认是atom.xml/rss2.xml
 #limit:展示文章的数量,使用0或则false代表展示全部
 
 #RSS订阅插件
 feed: 
     type: atom
     path: atom.xml
     limit: 0
 #RSS订阅支持
 plugins: hexo-generate-feed

修改themes/next/_config.yml文件rss属性
```
 rss: /atom.xml 
```

六、添加菜单选项

默认情况下，菜单导航栏有首页、归档、关于三个选项，我们可以自行添加

修改themes/next/_config.yml文件menu属性

 menu:
     home: / || home                //默认有
     about: /about/ || user         // 默认有
     tags: /tags/ || tags            //自行添加
     categories: /categories/ || th  //自行添加
     archives: /archives/ || archive   //默认有

比如我添加了tags、categories

创建文件夹

 $ cd  HotYan_Blog //进入博客文件夹目录

 $ hexo new page "tags"
 $ hexo new page "categories"

修改`index.md`

在/source/目录下创建了categories、tags文件夹,在这些文件夹中分别会创建一个index.md文件,对内容type进行修改，使之分别为:

    ---
    title: categories
    date: 2018-05-29 00:02:39
    type: "categories"
    ---

    ---
    title: tags
    date: 2018-05-29 00:02:54
    type: "tags"
    ---

七、修改文章底部标签样式

修改/themes/next/layout/_macro/post.swig文件

    <div class="post-tags">  
        {% for tag in post.tags %}
            <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
        {% endfor %}
    </div>

搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

八、文章末尾添加结束标记

在/themes/next/layout/_macro新建passage-end-tag.swig

添加以下内容:

 <div>
 {% if not is_index %}
     <div style="text-align:center;color: #555;font-size:14px;"> - END - </div>
 {% endif %}
 </div>

修改/themes/next/layout/_macro/post.swig文件

在下面相应的位置添加添加相应的代码:

    {#####################}
    {### END POST BODY ###}
    {#####################}
    ...

    /*插入代码如下*/
    <div>
        {% if not is_index %}
            {% include'passage-end-tag.swig' %}
        {% endif %}
    </div>
    /*插入到此处结束*/

    <footer class="post-footer">
        {% if post.tags and post.tags.length and not is_index %}
    ...

~~看参考文档的时候觉得代码插入的地方描述的不是很清楚!!在这个地方自己尽量描述的不能再清楚了~~

修改themes/next/_config.yml文件

在任意地方添加下面代码:

 # 文章末尾添加结束标记
 passage_end_tag:
     enabled: true

九、访问量统计

busuanzi统计

修改themes/next/_config.yml文件busuanzi_count属性

 busuanzi_count:
     # count values only if the other configs are false
     enable: true 

     # 站点UV配置 总访问人次(一个人访问多篇文章记录一次)
     site_uv: false
     site_uv_header: 总访问量
     site_uv_footer:

     # 站点PV配置 总访问量(一个人访问多篇文章记录多次)
     site_pv: false
     site_pv_header: <i class="fa fa-eye"></i>
     site_pv_footer: 次

     # 文章PV配置 访问量
     page_pv: true
     page_pv_header: <i class="fa fa-eye"></i>
     page_pv_footer:

~~我只设置了文章访问量~~

更多>>

LeanCloud统计文章阅读量
【为NexT主题添加文章阅读量统计功能】

十、修改头像

在themes/next/source/images下放置头像

修改themes/next/_config.yml文件avatar属性

 #avatar: 路径为头像目录
 avatar: ../images/avata.gif

十一、添加背景图

修改themes/next/source/css _custom/custom.styl

添加如下代码:

  body{
      background:url(../images/xx.jpg);
      background-size:cover;
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center;
  }

十二、修改各版块透明度

内容板块
- 修改在对应主题的对应.yml文件中,ID为【.content-wrap】标签下的background属性
```
  background: rgba(255,255,255,0.7); 
```
- 以主题Pisces为例,对应内容板块文件路径为:
```
  themes/next/source/css/_schemes/Pisces/_layout.styl
```

菜单栏
- 修改在对应主题的对应.yml文件中,ID为【.header-inner】标签下的background属性。
- 以主题Pisces为例,对应菜单栏文件路径为:
```
  themes/next/source/css/_schemes/Pisces/_layout.styl
```

站点概况
- 修改在对应主题的对应.yml文件中,ID为【.sidebar-inner】标签下的background属性
- 以主题Pisces为例,对应站点概况文件路径为:
```
  themes/next/source/css/_schemes/Pisces/_sidebar.styl
```
- 修改在对应主题的对应.yml文件中,ID为【.sidebar】标签下的background属性
- 以主题Pisces为例,对应站点概况文件路径为:
```
  themes/next/source/css/_schemes/Pisces/_layout.styl
```

按钮背景

主题共享的文件,文件位置:

 themes/next/source/css _custom/components/post/post-button.styl

十三、点击出现桃心

copy网页代码
在/themes/next/source/js/src目录下新建love.js文件,把copy的代码粘贴到此文件。
在/themes/next/layout/_layout.swig 文件引入love.js
```
 ...
 <script type="text/javascript" src="/js/src/love.js"></script>
 </body>   //在</body>标签前引入love.js
```
~~我发现在文章详情界面,没有效果,理论上应该是有效果的吧？？可能源码被我改砸了？~~

~~检查发现因为我love.js位置放错了！！~~一定要放在紧挨</body>标签前！！

十四、文章目录

目录不能跨级,否则会导致编号会错误。More>>

取消文章目录自动编号

修改themes/next/_config.yml文件toc属性

 # Table Of Contents in the Sidebar
   toc:
   enable: true

 # Automatically add list number to toc.
   number: false      /*修改这里*/

 # If true, all words will placed on next lines if header width longer then sidebar width.
   wrap: false

自定义文章目录全显示

修改/themes/next/source/css/_custom/custom.styl,添加以下代码
```
 .post-toc .nav .nav-child {
         display: block;
 } 
```
并不确定是否成功More >>

自定义文章目录级数

         h1      # 
         h2      ## 
         h3      ### 
         h4      ####

我的标题从h2开始。

         ## 十四、文章目录
         ### 1.取消文章目录自动编号
         #### 修改themes/next/_config.yml文件toc属性

不喜欢阅读的时候左边目录一直动,也不喜欢目录全部显示。想要只显示大标题的效果

         一、修改Next主题模式
         二、设置首页预览摘要
         三、侧边栏显示效果
         ...

没有Google到解决方法,以下方法是自己乱改的！！！hexo更新后需重新更改！

修改根目录下/node_modules/hexo/lib/plugins/helper/toc.js

         /*修改前*/
         const headingsMaxDepth = options.hasOwnProperty('max_depth') ? options.max_depth : 6;

         /*修改后*/
         const headingsMaxDepth = options.hasOwnProperty('max_depth') ? options.max_depth : 2;

十五、博文置顶

修改 node_modules/hexo-generator-index/lib/generator.js 文件

代码全部替换为:

 'use strict';
 var pagination = require('hexo-pagination');
 module.exports = function(locals){
     var config = this.config;
     var posts = locals.posts;
     posts.data = posts.data.sort(function(a, b) {
         if(a.top && b.top) { // 两篇文章top都有定义
             if(a.top == b.top) 
                 return b.date - a.date; // 若top值一样则按照文章日期降序排
             else 
                 return b.top - a.top; // 否则按照top值降序排
         }else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
             return -1;
         }else if(!a.top && b.top) {
             return 1;
         }else 
             return b.date - a.date; // 都没定义按照文章日期降序排
     });
     var paginationDir = config.pagination_dir || 'page';
     return pagination('', posts, {
         perPage: config.index_generator.per_page,
         layout: ['index', 'archive'],
         format: paginationDir + '/%d/',
         data: {
             __index: true
         }
     });
 };

在文章添加top字段

    ---
    title: 我是置顶博文
    date: 2018-07-18 21:30:35
    tags: 留言板
    categories: hotYan_博客之路
    top: 100                   //值越大,越靠前
    commentIssueId: 1
    ---

十六、博客压缩

【hexo-all-minifier】

十七、精简部署命令

修改根目录下/package.json文件

添加下面代码:

    "scripts": {
        "update": "hexo clean && hexo g && hexo d"
    }

更新Hexo部署
```
 $ npm run update
```

十八、categories字段

子分类

 //写法一
 categories: [博客,Hexo]
 //写法二
 categories: 
     - 博客
     - Hexo

多分类

 categories: 
     - [博客,Hexo]
     - [博客]
     - [Hexo]

十九、文章多个Tags字段值

写法同十八,表达意思不一样,tags表示多个标签,categories表示多级分类

二十、SEO优化

我只进行了GoogleSEO优化,好的参考链接有很多,便不重复总结一遍。这个参考链接总结的非常全面仔细,连我踩得坑都一模一样(HTML上传一直验证失败,最后选择的HTML标记验证)。其中【网站结构自身优化】部分,很全面。👍👍

BUT

建议把

    permalink: :title.html

修改为

    permalink: :title/

避免出现想跳转到页面某个特定位置时找不到(即出现404界面)

修改后:

文章将全部移到public根目录下,后面文章越来越多...github【code】部分列表将越来越长！逼死强迫症患者！
文章的阅读量将从0重新统计！！！💔
现链接格式必须改为yoursite.com/title/,之前贴的链接将失效。

用hexo+github搭建博客(二)

[mac]优化博客 [完善于2018-05-29 15:39:01]

链接自取

一、修改Next主题模式

修改themes/next/_config.yml文件Schemes属性

更新Hexo部署

二、设置首页预览摘要

三、侧边栏显示效果

修改themes/next/_config.yml文件sidebar属性

四、侧边栏社交链接

修改themes/next/_config.yml文件social属性

五、设置RSS

安装 hexo-generator-feed 插件

修改/_config.yml文件

修改themes/next/_config.yml文件rss属性

六、添加菜单选项

修改themes/next/_config.yml文件menu属性

创建文件夹

修改index.md

七、修改文章底部标签样式

修改/themes/next/layout/_macro/post.swig文件

八、文章末尾添加结束标记

在/themes/next/layout/_macro新建passage-end-tag.swig

修改/themes/next/layout/_macro/post.swig文件

修改themes/next/_config.yml文件

九、访问量统计

busuanzi统计

LeanCloud统计文章阅读量

十、修改头像

在themes/next/source/images下放置头像

修改themes/next/_config.yml文件avatar属性

十一、添加背景图

修改themes/next/source/css _custom/custom.styl

十二、修改各版块透明度

内容板块

菜单栏

站点概况

按钮背景

十三、点击出现桃心

十四、文章目录

取消文章目录自动编号

自定义文章目录全显示

自定义文章目录级数

十五、博文置顶

修改 node_modules/hexo-generator-index/lib/generator.js 文件

在文章添加top字段

十六、博客压缩

十七、精简部署命令

修改根目录下/package.json文件

更新Hexo部署

十八、categories字段

子分类

多分类

十九、文章多个Tags字段值

二十、SEO优化

BUT

修改`index.md`

菜单栏