(5)Hexo踩坑_主题优化

Author: haoransun
Wechat: SHR—97

0 字体乱码问题

Windows 上新建的文件一般都是 gb2312或iso-8859-1，这样windows下的文件传递到Linux可能会出乱码问题

用 Git进去文件使用命令查看文件是否是utf-8 格式

file -i word.ejs
word.ejs: text/html; charset=iso-8859-1(或是其他)

第一种
最简单的办法就是 vim word.ejs

设置 set fileencoding=utf-8，强制保存，此时中文会乱码，再次输入即可

第二种

找一个 是 utf-8文件的 直接粘贴到需要位置，改名删除内容，写上自己的内容即可。

1 图片无法加载

在 Hexo中 插入图片时，请按照以下的步骤进行设置

1 将 站点配置文件 中的 post_asset_folder 选项的值设置为 true

2.在站点文件夹中打开 git bash，输入命令 npm install hexo-asset-image --save 安装插件

ps:如果上述 安装包不能正确加载图片，建议下述低版本安装包：
使用 npm install https://github.com/CodeFalling/hexo-asset-image –save 安装0.0.5版本的hexo-asset-image插件。

---

使用 npm install hexo-asset-image –save 安装的是1.0.0版本的hexo-asset-image插件。

---

3 这样，当使用 hexo new title 创建文章时，将同时在 source/_post 文件夹中生成一个与 title 同名的文件夹，我们只需将图片放进此文件夹中，然后在文章中通过 Markdown 语法进行引用即可

例如，在资源文件夹（就是那个与 title 同名的文件夹）中添加图片 example.PNG，则可以在对应的文章中使用语句 ![图片文字说明，可用于图片加载不出来时](title/example.PNG) 即可成功添加图片

效果如下图：

2 点击所有文章 缺失模块

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content –save

3、在根目录_config.yml里添加配置：直接粘贴复制即可。（自己手打可能出错）

  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

3 个人头像及网站图标

3.1 存放位置

头像/图标图片的存放位置是/themes/yilia/source/下任意位置，可以自己新建一个文件夹存放，我存放在assets文件夹下。

3.2 配置设置

配置文件为/themes/yilia/_config.yml。设置头像为配置文件中avatar一项，设置图标为配置文件中favicon一项，设置路径的根目录为/themes/yilia/source/。例如，我的头像存放的地址是/themes/yilia/source/assets/avatar.png，设置则为avatar: /assets/avatar.png。（图标同理）

4 文章摘要

目前主要是两种方式在首页显示文章摘要而不是全文

4.1 方法1

ps: 之前最好不要有空格

4.2 方法2 description in Front-matter

title: Hello World
date: 2015-12-03 00:00:00
description: "Welcome to Hexo! This is your very first post."
---
<Contents>

通过 description 添加的摘要只能为纯文本

description 中的内容加引号，可以避免一些程序错误，例如当内容里包含英文冒号时。

5 主菜单

按下面格式添加侧边栏，菜单前的#表示隐藏该条目themes/yilia/_config.yml参数：

按需求更改

menu:
  主页: /
  所有文章: /archives/
  #随笔: /tags/随笔
  标签云: /tags/
  关于我: /about/

6 标签云

使用 Hexo 命令新建一个tags的页面即可

hexo new page tags

该页面标题可以在 /hexo/source/tags/index.md 中修改

同一片文章设置多个分类后的问题 issue#4

7 关于我

使用 Hexo 命令新建一个名为 about 的页面即可

hexo new page about

该页面内容在文件 \hexo\source\about\index.md 中修改

8 本地搜索

使用搜索需先安装对应插件，用于生成索引数据

插件主页: hexo-generator-search

npm install hexo-generator-search --save

配置插件启用为true 到根目录下的_config.yml中

search:
 on: true
 onload: false

onload: true： 索引数据search.xml随页面一起加载（效率优先）
onload：false： 当激活搜索框时在下载索引数据（按需加载）

9 社交图标

去掉前面的 # 再填写链接即可

themes/yilia/_config.yml

subnav:
 Email: "haoransunlin@163.com"
 #新浪微博: "sina weibo"
 GitHub: ...
 #RSS: "/aotm.xml"

设置 Email 时保留 mailto: 可考虑加密邮件地址 http://ctrlq.org/encode/

使用 RSS 需先安装对应插件 https://github.com/hexojs/hexo-generator-feed

10 网站运行时间(暂时没有配置)

10.1 修改 \themes\yilia_config.yml 添加如下内容

网站运行时间，格式形如：“本站已安全运行 50 天 12 小时 13 分 41 秒”
Runing Time
running_time:
enable: true
create_time: ‘07/25/2019 12:00:00’ #此处修改你的建站时间或者网站上线时间

10.2 修改\themes\yilia\layout\_partial\footer.ejs，在</footer>上面添加如下内容：

<% if (theme.running_time && theme.running_time.enable && theme.running_time.create_time){ %>
载入天数…载入时分秒…

<% } %>

11 背景图片

*推荐大小：700 x 1200 *

11.1 找到 themes\lilia\目录下的 _config.yml,修改配置如下：

11.2 将选好的背景图片放入 themes\yilia\source\assets 目录下

11.3 打开 yilia\source 目录下的 main.xxx.css，进行修改（xxx 因人而异）

ctrl + f 搜索：.left-col{ 、.left-col .overlay{ 、#mobile-nav .overlay

里面添加 background-image:url(“图片地址”)即可

字体颜色需要自己根据背景图片来调配

搜索

.left-col #header a{

.left-col #header a:hover{

.left-col #header .header-subtitle{

11.4 打开 yilia\layout_partial\left-col,ejs

重新部署即可看到效果

12 文章目录

12.1 添加 CSS 样式

打开 themes\yilia\source 下的 main.234bc0.css 文件，直接在后面添加如下代码：

/新添加的/

#container .show-toc-btn,#container .toc-article{display:block}
.toc-article{z-index:100;background:#fff;border:1px solid #ccc;max-width:250px;min-width:150px;max-height:500px;overflow-y:auto;-webkit-box-shadow:5px 5px 2px #ccc;box-shadow:5px 5px 2px #ccc;font-size:12px;padding:10px;position:fixed;right:35px;top:129px}.toc-article .toc-close{font-weight:700;font-size:20px;cursor:pointer;float:right;color:#ccc}.toc-article .toc-close:hover{color:#000}.toc-article .toc{font-size:12px;padding:0;line-height:20px}.toc-article .toc .toc-number{color:#333}.toc-article .toc .toc-text:hover{text-decoration:underline;color:#2a6496}.toc-article li{list-style-type:none}.toc-article .toc-level-1{margin:4px 0}.toc-article .toc-child{}@-moz-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-o-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.show-toc-btn{display:none;z-index:10;width:30px;min-height:14px;overflow:hidden;padding:4px 6px 8px 5px;border:1px solid #ddd;border-right:none;position:fixed;right:40px;text-align:center;background-color:#f9f9f9}.show-toc-btn .btn-bg{margin-top:2px;display:block;width:16px;height:14px;background:url(http://7xtawy.com1.z0.glb.clouddn.com/show.png) no-repeat;-webkit-background-size:100%;-moz-background-size:100%;background-size:100%}.show-toc-btn .btn-text{color:#999;font-size:12px}.show-toc-btn:hover{cursor:pointer}.show-toc-btn:hover .btn-bg{background-position:0 -16px}.show-toc-btn:hover .btn-text{font-size:12px;color:#ea8010}
.toc-article li ol, .toc-article li ul {
    margin-left: 30px;
}
.toc-article ol, .toc-article ul {
    margin: 10px 0;
}

12.2 修改 article.ejs 文件

打开 themes\yilia\layout\_partial 文件夹下的 article.ejs 文件, 在 </header> <% } %> 下面加入如下内容（注意位置）

<!-- 目录内容 -->
<% if (!index && post.toc){ %>
    <p class="show-toc-btn" id="show-toc-btn" onclick="showToc();" style="display:none">
          <span class="btn-bg"></span>
          <span class="btn-text">文章导航</span>
          </p>
    <div id="toc-article" class="toc-article">
        <span id="toc-close" class="toc-close" title="隐藏导航" onclick="showBtn();">×</span>
        <strong class="toc-title">文章目录</strong>
           <%- toc(post.content) %>
         </div>
   <script type="text/javascript">
    function showToc(){
        var toc_article = document.getElementById("toc-article");
        var show_toc_btn = document.getElementById("show-toc-btn");
        toc_article.setAttribute("style","display:block");
        show_toc_btn.setAttribute("style","display:none");
        };
    function showBtn(){
        var toc_article = document.getElementById("toc-article");
        var show_toc_btn = document.getElementById("show-toc-btn");
        toc_article.setAttribute("style","display:none");
        show_toc_btn.setAttribute("style","display:block");
        };
   </script>
      <% } %>
<!-- 目录内容结束 -->

想要温江显示目录，在每篇文章开头加入：toc: true 即可。

13 版权

待定

14 友情链接

## 编辑友链
friends:
  Hexo: https://hexo.io
  GitHub: https://pages.github.com/
  MOxFIVE: http://moxfive.xyz/

## 关闭友链
friends: false

15 关于我

# 是否开启“关于我”。
aboutme: 专注于前端

# 关闭“关于我”
aboutme: false

16 评论

GitHub OAuth授权：Settings/Developer settings/OAuth Apps

https://github.com/settings/applications/1265561

16.1 在layout/_partial/post目录下新增gitalk.ejs文件

<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script type="text/javascript">

if(<%=theme.gitalk.enable%>){
 var gitalk = new Gitalk({
 clientID: '<%=theme.gitalk.ClientID%>',
 clientSecret: '<%=theme.gitalk.ClientSecret%>',
 repo: '<%=theme.gitalk.repo%>',
 owner: '<%=theme.gitalk.githubID%>',
 admin: ['<%=theme.gitalk.adminUser%>'],
 id: '<%= page.date %>',
 distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
})
gitalk.render('gitalk-container')
}
</script>

16.2 修改source-src/css/目录下comment.scss文件

注意第一行最后添加了 #gitalk-container

#disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container {
 padding: 0 30px !important;
 min-height: 20px;
}

#SOHUCS {
 #SOHU_MAIN .module-cmt-list .block-cont-gw {
 border-bottom: 1px dashed #c8c8c8 !important;
 }
}

16.3 在layout/_partial目录下的article.ejs文件内新增gitalk相关的配置代码：

在最后一行 <% } %> 前加入，如下图所示

<% if(theme.gitalk.enable){ %>
 <%- partial('post/gitalk', {
 key: post.slug,
 title: post.title,
 url: config.url+url_for(post.path)
 }) %>
 <% } %>

16.4 最后在yilia主题配置文件中新增gitalk相关的配置：

属性名要与 配置文件中保持一致 ,如：
theme.gitalk.client_id 要与配置文件中 client_id 这几个字母一致

githubID：是自己的GitHub账户名称，如我的是JavaSsun
repo：是新建的评论仓库名称
adminuser:是自己的账户名称JavaSsun

更新一下即可。

基本完成，现在解决常见问题.

17 文章字数及统计阅读时长(注意乱码)

17.1 安装 hexo-wordcount

npm i --save hexo-wordcount

17.2 文件配置

在theme\yilia\layout_partial\post下创建word.ejs文件：

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字数统计: </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  阅读时长: </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

然后在 themes/yilia/layout/_partial/article.ejs中添加(在 /header 之前)

<div class="article-inner">
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
        <!-- 需要添加的位置 -->
        <!-- 开始添加字数统计-->
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
        <!-- 添加完成 -->

        <% } %>
      </header>

17.3 开启功能

效果如图所示：

18 添加背景音乐

18.1 打开网易云音乐首页，然后搜索要添加的背景音乐

http://music.163.com/

18.2 搜索到歌曲点击生成外链播放器，进去下一个界面

18.3 复制外链播放器的代码

打开 /yilia/layout/_partia/left-col.ejs 文件 nav标签中添加代码
注：放在<nav>和</nav>之内

[========]

19 鼠标点击桃心效果

在 themes/yilia/source文件夹下，建立resources文件夹，再新建click.js文件，代码如下

! function(e, t, a) {
    function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
    }

    function r() {
        for (var e = 0; e < d.length; e++)
            d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }

    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(), i(e)
        }
    }

    function i(e) {
        var a = t.createElement("div");
        a.className = "heart", d.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: s()
        }), t.body.appendChild(a)
    }

    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }

    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = function() {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
            setTimeout(e, 1e3 / 60)
        }
    }(), n()
}(window, document);

然后在themes/yilia/layout/_partial文件夹下的after-footer.ejs中加入

</script>
<script type="text/javascript" src="<%=config.root%>./resources/click.js">
</script>

重新部署即可

20 添加网站运行时间

21 Hexo博客添加 helper-live2d动态模型插件

前导

• yilia主题
• 插件地址 hexo-helper-live2d
• live2d模型仓库

21.1 安装模块

在hexo根目录执行命令

# npm install --save hexo-helper-live2d

21.2 下载模型

作者各种模型包展示 ➡️ hexo live2d插件 2.0 !

live2d模型仓库

• live2d-widget-model-chitose
• live2d-widget-model-epsilon2_1
• live2d-widget-model-gf
• live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
• live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
• live2d-widget-model-haruto
• live2d-widget-model-hibiki 黑猫
• live2d-widget-model-hijiki
• live2d-widget-model-izumi
• live2d-widget-model-koharu
• live2d-widget-model-miku
• live2d-widget-model-ni-j
• live2d-widget-model-nico
• live2d-widget-model-nietzsche
• live2d-widget-model-nipsilon
• live2d-widget-model-nito
• live2d-widget-model-shizuku
• live2d-widget-model-tororo 白猫
• live2d-widget-model-tsumiki
• live2d-widget-model-unitychan
• live2d-widget-model-wanko
• live2d-widget-model-z16

使用npm install {packagename}安装模型

# npm install live2d-widget-model-hibiki

21.3 详细配置

在Hexo的 _config.yml 文件中添加配置

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  enable: true
  #enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-hibiki
    # use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: right
    width: 145
    height: 315
  mobile:
    show: true # 是否在移动设备上显示
    scale: 0.5 # 移动设备上的缩放
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.8

hexo g | hexo s即可

22 Hexo添加访问量统计

• 主题 yilia
• 访问统计量使用 不蒜子

22.1 配置是否开启不蒜子访问量统计功能

在 themes/yilia/_config.yml 添加属性

# 是否开启访问量统计功能（不蒜子）
busuanzi:
  enable: true

22.2 引入不蒜子并添加站点访问量

在themes/yilia/layout/_partial/footer.ejs末尾添加如下代码

<% if (theme.busuanzi && theme.busuanzi.enable){ %>
        <!-- 不蒜子统计 -->
        <span id="busuanzi_container_site_pv">
                本站总访问量<span id="busuanzi_value_site_pv"></span>次
        </span>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_uv" style='display:none'>
                本站访客数<span id="busuanzi_value_site_uv"></span>人
        </span>
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <% } %>

22.3 添加文章访问量

在themes/yilia/layout/_partial/post/date.ejs开头添加如下代码

<% if (theme.busuanzi && theme.busuanzi.enable && !index){ %>
        <!-- 不蒜子统计 -->
        <span id="busuanzi_container_page_pv" style='display:none' class="<%= class_name %>">
              <i class="icon-smile icon"></i> 阅读数：<span id="busuanzi_value_page_pv"></span>次
        </span>
<% } %>

如图所示：

22.4 注意事项

• 两种方法选择一种使用即可，都使用可能会出现无法显示的问题

• 使用hexo s部署在本地预览效果的时候，uv数和pv数会过大，这是由于不蒜子用户使用一个存储空间，所以使用localhost:4000进行本地预览的时候会导致数字异常，这是正常现象，只需要将博客部署至云端即可恢复正常。

23 RSS

npm install hexo-generator-feed --save

24 Hexo设置 标签 分类 归档

举例：

24.1 添加 分类页面

使用：hexo new page categories 新建一个 分类 页面。

添加 type: “categories”

tags类似：

主题的 _config.yml 文件中的 menu 中进行匹配

25 Hexo博客优化之文章置顶+置顶标签

25.1 博文置顶

一种方法是手动对相关文件进行修改，具体可参考这篇文章。

另一种方法就是，目前已经有修改后支持置顶的仓库，可以直接用以下命令安装。

$ npm uninstall hexo-generator-index  --save 
$ npm install hexo-generator-index-pin-top  --save

然后在需要置顶的文章的Front-matter中加上top: true即可。比如下面这篇文章：
注意有 空格

25.2 配置置顶标准

打开：/themes/*/layout（/_macro）/post.ejs
直接在最前面加入以下代码即可

<% if (page.top) { %>
 <i class="fa fa-thumb-tack"></i>
 <font color=7D26CD>置顶</font>
 <span class="post-meta-divider">|</span>
<% } %>

25.3 配置文章

然后在需要置顶的文章的Front-matter中加上top选项即可
top后面的数字越大，优先级越高

---
 title: (5)Hexo踩坑_主题优化
 date: 2018-08-21 17:15:09
 tags: Hexo-yilia
 categories: Hexo
 top: 5
 ---

25.4 优先级配置

修改根目录配置文件/_config.yml,top值-1标示根据top值倒序（正序设置为1即可），同样date也是根据创建日期倒序。

index_generator:
 path: ''
 per_page: 10
 order_by:
 top: -1
 date: -1

25.5 设置置顶标志

暂时用默认的

26 去掉配置文件中的 more

27 在左侧显示总文章数

将themes\yilia\layout_partial\left-col.ejs文件的

<nav class="header-menu">
 <ul>
 <% for (var i in theme.menu){ %>
 <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
 <%}%>
 </ul>
</nav>

后面加上

nav style="color: #7FFFD4;">总文章数 <%=site.posts.length%></nav>

28 Hexo博客绑定个人域名

28.1 购买域名

阿里云或者腾讯云购买，步骤省略。

28.2 域名解析

28.2.1 方法1（不推荐）

首先获取自己 github 的二级域名的 IP地址，windows 下直接在 cmd 里 Ping 一下自己的博客就会得到 IP 地址：

---

本人Ip是： xxx.xxx.xxx.xxx
通过域名解析将购买的域名指向 github的二级域名：

之后如图所示记为成功：

28.2.2 方法2（推荐）

直接解析域名的CNAME记录到你的Git二级域名，不要使用方法一中的A记录，因为ip地址可能会一段时间之后会改变，所以建议记录类型选择CNAME进行解析，记录值填的就是username.github.io，比如：

---

28.3 设置CNAME

在 hexo 项目下，source 文件夹下面创建 CNAME 文件（没有后缀名的），在里面写上购买的域名。比如：
blog.enjoytoshare.club

在 github 上面，打开 username.github.io 项目的（Settings）设置，然后在 GitHub Pages的 Custom domain设置里填上购买的域名。比如：

好了，新域名配置完成，可以访问了。

29 Hexo d 部署后重新修改域名？

1. 在source目录下（不是hexo根目录下），创建一个CNAME文件，可以用sublime创建，然后保存成（All files格式）
   CNAME文件里写自己新的域名
   

如：

haoran.tech

2. hexo g 重新生成一下

3. hexo d 部署到github上

此时可以通过域名访问了。