ShenYuanLuo的博客

记录学习的点点滴滴

0%

Hexo的Next主题个性化设置（二）——进阶设置

发表于 更新于 分类于 阅读次数：

================== 更新【2018-09-10】–- Start ==================

添加阅读排行榜

基于 leancloud 的数据实现在本站文章的阅读排行榜。

Top 页面添加

cd 进入博客根目录，输入 hexo n page top，将会在 source 生成 top 目录，编辑其中自动生成的 index.md 文件，将其中的代码替换如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("leancloud_appid", "leancloud_appkey");</script>
<script type="text/javascript">
  var time=0
  var title=""
  var url=""
  var query = new AV.Query('Counter');
  query.notEqualTo('id',0);
  query.descending('time');
  query.limit(1000);
  query.find().then(function (todo) {
    for (var i=0;i<1000;i++){
      var result=todo[i].attributes;
      time=result.time;
      title=result.title;
      url=result.url;
      // var content="<a href='"+"https://shenyuanluo.github.io"+url+"'>"+title+"</a>"+"<br>"+"<font color='#fff'>"+"阅读次数："+time+"</font>"+"<br><br>";
      var content="<p>"+"<font color='#1C1C1C'>"+"【阅读量: "+time+" 】"+"</font>"+"<a href='"+"https://shenyuanluo.github.io"+url+"'>"+title+"</a>"+"</p>";
      document.getElementById("top").innerHTML+=content
    }
  }, function (error) {
    console.log("error");
  });
</script>

并将其中的 leancloud_appid**、leancloud_appkey** 和 https://shenyuanluo.github.io 替换为自己对应的即可。

菜单显示设置

  1. 菜单显示

    编辑主题配置文件 _config.yml，搜索 menu: 字段，添加 top 字段。

  2. 图标设置：

    编辑主题配置文件 _config.yml，搜索 menu_icons: 字段，添加 top: signal。其中 signal 是对应的图标，可以自行到 Font Awesome 搜索自己喜欢的图标，并替换相应的名称即可。

  3. 语言适配

    编辑hexo/theme/你的主题/languages/zh-Hans.yml 文件，添加 top 对应的中文：
    top：阅读排行

================== 更新【2018-09-10】–- End ==================

================== 更新【2017-11-19】– Start ==================

添加评论支持 —— LiveRe

继多说停用之后网易云跟帖也不可用了，只好另寻他径。

来必力（LiveRe）是一款比较好用的评论系统（关键是不用ICP备案），而且 NEXT主题新版中，就已经默认支持了，只需要添加相应的 UID 即可。

注册 LiveRe

  1. 进入LiveRe官网，注册账号。
  2. 安装 City版本（免费版，还有收费版：Premium），获取 UID
  3. 进入：管理页面 -> 代码管理 -> 一般网站 代码中，data-uid 即为所需 UID。
  4. 编辑Next主题配置文件 _config.yml，搜索 livere_uid 字段，设置其值为刚刚注册安装 LiveRe 获得的 UID：

注意：如果开有其他的评论系统，需要在配置文件中关闭后，LiveRe才可生效。

================== 更新【2017-11-19】– End ==================

上一篇博文已经介绍一些常用的对 Hexo+Next 博客的基础设置。本文继续介绍 Hexo+Next 博客的一些进阶设置。

设置首页不显示全文(只显示预览)

  1. 编辑主题配置文件 _config.yml，搜索 auto_excerpt 字段，设置 enable 的其值为 true

    本文结束标志

    本文结束标志

文章末尾添加“本文结束”标记

  1. 在 ~/userName.github.io\themes\next\layout\_macro\post.swig 文件中，搜索字段 wechat-subscriber.swig，在其所属的 div 之前添加如下代码：

    1
    2
    3
    4
    5
    <div>
         {% if not is_index %}
           <div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束 ------</div>
         {% endif %}
       </div>

  2. 如图：

    本文结束标志

添加“图片集”

  1. 编辑站点配置文件 _config.yml，搜索 post_asset_folder 字段，设置其值为 true

    图片集安装

  2. 安装hexo-asset-image

    1
    $ npm install hexo-asset-image --save

  3. 安装成功后，使用 hexo new "fileName"创建新的 md文件，会在 ~/userName.github.io/source/_posts 目录下创建同名的文件夹，在文件夹用于存放该文件用到的图片资源

    图片集设置

    图片集安装

  4. 只需在 md 文件里使用 ![title](图片集文件夹/logo.jpg) 就可以插入图片。其中[] 里面不写文字则没有图片标题。

RSS 设置

  1. 什么是 RSS

    RSS（Really Simple Syndication，简易信息聚合）是一种消息来源格式规范，用以聚合经常发布更新数据的网站，例如博客文章、新闻、音频或视频的网摘。简单地说就是“让自己关注的网站信息有更新时自动推送通知，而不用漫无目的地浏览网页去寻找关注的信息”。这样只要订阅了RSS，就不会错过自己喜欢的网站的更新了。

  2. 编辑主题配置文件 _config.yml，设定 rss 字段的值：
    a. false：禁用 RSS，不在页面上显示 RSS 连接。
    b. 留空：使用 Hexo 生成的 Feed 链接。 需要先安装 hexo-generator-feed 插件。
    c. 具体的链接地址：适用于已经烧制过 Feed 的情形。

  3. 安装 hexo-generator-feed

    1
    $ npm install hexo-generator-feed --save

  4. 安装完之后，会在 ~/userName.github.io/node_modules 目录下生成 hexo-generator-feed目录，如图：

    Feed

添加文章浏览次数、站点访问量

  1. 编辑主题配置文件 _config.yml，搜索 busuanzi_count 字段，修改相关内容如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # Show PV/UV of the website/page with busuanzi.
    # Get more information on http://ibruce.info/2015/04/04/busuanzi/
    busuanzi_count:
    	# count values only if the other configs are false
     	enable: true
     	# custom uv span for the whole site
     	site_uv: true
     	site_uv_header: <i class="fa fa-user"></i> 访问人数
     	site_uv_footer:
     	# custom pv span for the whole site
     	site_pv: true
     	site_pv_header: <i class="fa fa-eye"></i> 总访问量
     	site_pv_footer: 次
     	# custom pv span for one page only
     	page_pv: true
     	page_pv_header: <i class="fa fa-file-o"></i> 浏览
     	page_pv_footer: 次

注意：所设置的功能，是启用不蒜子统计，仅限于文章页面显示阅读书，在首页不显示。

站点访问统计

添加 sitemap

Sitemap 可方便管理员通知搜索引擎他们网站上有哪些可供抓取的网页，有助于让别人更好地通过搜索到自己的博客。

第一、安装：

1
$ npm install hexo-generator-sitemap --save

第二、配置：

  1. 编辑站点配置文件 _config.yml，搜索 Extensions 字段，修改相关内容如下：

    1
    2
    3
    # Extensions
    plugins:
    - hexo-generator-sitemap

    sitemap添加

  2. 执行更新站点命令，就会在站点的 ~/userName.github.io/public 目录下生成一个 sitemap.xml 文件，这个文件就是站点地图，里面包含站点的网页地址。

    1
    $ hexo clean && hexo g

  3. 如图：

    sitemap添加

绑定域名

购买绑定

  1. 先申请购买域名（国内的可以去 阿里的万网 或者 腾讯的DNSPod；国外的可以去godaddy）。

  2. 在站点的 source 目录 ~/userName.github.io/source 下新建一个 CNAME 文件（无后缀名，注意大写）。

    1
    2
    $ cd ~/userName.github.io/source
    $ sudo vi CNAME

  3. 然后编辑该文件，在首行添加网站域名 xxxx.com ，注意前面没有 http://，也没有 www。

  4. 执行更新站点命令：上传部署。

    1
    $ hexo clean && hexo d

域名解析：(以dnspod为例)

  1. 先添加一个 CNAME，主机记录写 @，后面记录值写上 userName.github.io。
  2. 再添加一个 CNAME，主机记录写 www，后面记录值也是 userName.github.io 。
  3. 等十分钟左右，刷新浏览器，用你自己域名访问下试试

用是 CNAME 别名记录，也有人使用 A 记录，后面的记录值是写github page里面的 IP 地址，但有时候IP地址会更改，导致最后解析不正确，所以还是推荐用CNAME别名记录要好些，不建议用IP。

添加评论

  1. 注册网易云跟帖。

  2. 获取网易云跟帖的 Product Key。

  3. 编辑主题配置文件 _config.yml，搜索 gentie_productKey 字段，修改相关内容如下：

    1
    gentie_productKey: #your-gentie-product-key

  4. 执行更新站点命令：

    1
    $ hexo clean && hexo g && hexo d

  5. 如图：

    sitemap添加

注意：在云跟帖管理后台设置的域名必须跟站点的域名一致（目前发现不支持 userName.github.io 类域名。）

添加搜索引擎

添加Google搜索

  1. 登陆 Google账号，添加了站点验证。

  2. 前往 Search Console 添加属性 https://www.example.com 进行站定认证。

    sitemap添加

  3. 下载 HTML认证文件。

  4. 将该文件放在站点根目录的 source 目录下。

  5. 执行更新站点命令：

    1
    $  hexo g && hexo d

  6. 通过在浏览器中访问 https://www.example.com/yourHTMLFileName.html 确认上传成功。

  7. 点击 认证按钮 进行认证。

  8. 验证通过后，选择 站点 ，之后在 抓取 —— 站点地图 中就能看到 添加/测试站点地图。

  9. 添加/测试站点地图。

    注意：为避免 HTML验证文件 在用命令 hexo g && hexo d之后，网站根目录生成 HTML验证文件 被hexo和next主题加了自己的东西，导致验证不通过，在站点配置文件 _config.yml 下有一个 skip_render，将验证文件填入即可保持原样跳过渲染，如： skip_render: google9dc1e4482ff3b5e1.html 。

添加百度搜索：（自动提交）

  1. 登陆百度站长平台进行站点认证。

    baidusitemap添加

  2. 进入网页抓取 ——> 链接提交 ——> 主动推送(实时) 复制 token

    baidusitemap添加

  3. 安装自动提交插件:

    1
    $ npm install hexo-baidu-url-submit –save

  4. 编辑站点配置文件 _config.yml，添加如下内容：

    1
    2
    3
    4
    5
    baidu_url_submit:
      count: 1 ## 提交最新的一个链接
      host: www.example.com ## 在百度站长平台中注册的域名
      token: your_token ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
      path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

    注意：记得查看 _config.ym 文件中 url 的值， 必须包含是百度站长平台注册的域名！

  5. 编辑站点配置文件 _config.yml，加入新的 deployer:

    1
    2
    3
    4
    5
    deploy: 
    - type: git
    	  repository: yoururl
      branch: master
    - type: baidu_url_submitter

  6. 最后成功效果如下：

    baidusitemap添加

    baidusitemap添加

    添加百度 Sitemap

  7. 安装百度 sitemap

    1
    $ npm install hexo-generator-baidu-sitemap --save

  8. 登陆百度站长平台进行站点认证。

    baidusitemap添加

  9. 网页抓取：将 baidusitemap.xml 提交给百度

    baidusitemap添加

  10. 执行更新站点命令：

    1
    $  hexo d

    此方法本人没有抓取成功，网上查找原因说：Github把百度的爬虫给屏蔽了。

设置’favicon’图标

  1. 首先要有一个常见格式名(如.jpg, .png等)的图片作为备选 favicon，选择一个favicon制作网站完成制作，例如比特虫是一个免费的在线制作ico图标网站。
  2. 将 favicon.ico 文件放在网站根目录下的 source 文件夹内即可。
  3. 编辑主题配置文件 _config.yml，搜索 favicon 字段，修改相关内容如下：
    1
    $ favicon: /favicon.ico  #设置你的博客在浏览器标签页上的图片
  4. 如图：
    baidusitemap添加

不处理’source’目录的个别文件

有时候我们对某些文件不需要进行 hexo 博客主题渲染，需要过滤。

  1. 编辑站点配置文件 _config.yml，搜索 skip_render 字段，修改相关内容来设置忽略的目录，具体如下：(文件匹配是基于正则匹配的)

    1. 单个文件夹下全部文件：skip_render: demo/*
    2. 单个文件夹下指定类型文件：skip_render: demo/*.html
    3. 单个文件夹下全部文件以及子目录:skip_render: demo/**
    4. 多个文件夹以及各种复杂情况：
    1
    2
    3
    skip_render:
       - 'demo/*.html'
       - 'demo/**'

添加打赏功能

  1. 编辑主题配置文件 _config_yml， 添加如下代码：
    1
    2
    3
    4
    # Donate 文章末尾显示打赏按钮
    reward_comment: 打赏信息语
    wechatpay: 微信付款二维码图片的相对或者是绝对URL
    alipay: 支付宝付款二维码图片的相对或者是绝对URL

参考资料

  1. 第三方服务集成
  2. Hexo插件之百度主动提交链接