最后一次更新时间：Thursday, April 16th 2020, AM

非教程，仅用于记录自己搭建该网站遇到的一些问题和经验，以供大家参考，如有帮助不胜荣幸
本网站搭建于2020年4月份，Hexo版本号为 hexo-cli: 3.1.0; NexT主题版本为 5.1.4;
本文所记录的问题也是基于这个时间段、这个版本。不具有普遍适用性

可以通过左侧导航栏，更方便的进行阅读

项目配置文件&主题配置文件

如上图所示，整个项目里有两个配置文件( _config.yml )。它们分别位于项目根目录下、项目主题根目录下。项目根目录下的称其为项目配置文件、主题根目录下的称其为主题配置文件。在参考别人教程的时候切记不要改错了文件

边写博客边预览

我写博客使用的工具是VSCode，安装了三个插件如下：

MarkDown All in One | Markdown Preview Github Styling | markdownlint

其中第二个插件是在VSCode里开一个侧栏，以提供MarkDown实时预览的，效果如下：

如果你仔细查看的话，可以看到，这个插件的显示效果与实际Hexo解析出的静态页面效果不一样。其中的图片与文字并未显示出换行效果，但是Hexo进行解析的时候会加上换行。Hexo有一个好处就是，可以进行实时预览，并不需要借助插件，具体的操作是: 首先hexo s启动本地Hexo服务，在浏览器输入localhost:4000打开页面。修改完当前MarkDown后，按下Ctrl S保存。之后在浏览器刷新当前页面即可。

如何在电脑上进行移动端预览

我使用的是基于chromium内核的Chrome和Edge这两款浏览器，对于它们而言，开启移动端预览的方法是相同的。打开浏览器，按F12，点击切换设备工具栏（如下图红色箭头指向）/ 也可以通过快捷键 Ctrl + Shift + M切换到移动端模式。通过左侧移动端预览上边的工具栏还可以自定义宽高的像素，选择预设机型，修改显示比例，修改网络环境和CPU（模拟老旧设备，弱网络环境）等选项

Hexo 常用命令的含义

hexo g      //generate，保存后执行该命令，以重新生成文件
hexo s      //server，  启动本地服务器，进行预览
hexo d      //deploy，  部署本地项目到远程服务器
hexo clean  //清除本地静态文件（db.json，根目录public文件夹）

菜单显示、配置问题

下图所示即为菜单部分

我这个版本的NexT主题配置好了之后，默认只有Home、Category两个页面。这里有一个小坑就是配置页面时，修改的是主题配置文件，而不是项目配置文件。

执行命令hexo new page "PAGENAME"即可在目录/source/下新建一个菜单页的相关文件夹，里边便是该页的配置文件，如下图：

一开始我新建页面之后，点击菜单，跳转失败（找不到当前页面）。我看了一下浏览器的地址栏，发现跳转的时候URL会莫名其妙的多出来一个%20%，即多出来了一个空格。这其中的原因是在主题配置页面，把菜单配置中分隔符||左右的空格都给去掉就行了

# 关于菜单示例配置
menu:
  home: /||home
  about: /about/||user
  tags: /tags/||tags  
  archives: /archives/||archive

PS: 如果遇到Archives的ICON显示不出来的问题，不妨看看是不是archive多加了一个s，哈哈哈哈

粒子漂浮背景

效果图预览：

配置方法：执行该命令

1	`git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest`

然后在主题配置文件中，找到该项并如下设置

1	`canvas_nest: true`

但是如果你在移动端（真机）上预览，会发现这个背景会显得博客十分杂乱无章。这个的解决办法是要配置成NexT v6.5.0及其以上的版本，如果你进行了配置，可以通过以下的代码对粒子漂浮背景进行更多的设置。如果你像我这个憨憨一样用的是v5以下的版本，就只能暗自骂街了

canvas_nest:
  enable: true
  onmobile: true # 是否在移动端显示
  color: '0,0,255' # 动态背景中线条的 RGB 颜色
  opacity: 0.5 # 动态背景中线条透明度
  zIndex: -1 # 动态背景的 z-index 属性值
  count: 99 # 动态背景中线条数量

如何默认展开多级标题

在该路径文件下添加以下代码
路径： /themes/next/source/css/_custom/custom.styl
代码：

//默认展开标题
.post-toc .nav .nav-child { 
    display: block; 
}

侧边栏头像

效果图：

这个头像一定要是gif格式的，可以把png格式的图片直接修改拓展名变成gif，gif动图能否做头像我没尝试过。
把gif文件放在

1	`/themes/next/source/uploads/`

目录下，然后修改主题配置文件，代码如下：

1 2	`# Sidebar Avatar avatar: /uploads/avatar.gif`

网站运行时间统计

效果图：

在

1	`/themes/next/layout/_partials/footer.swig`

目录文件下，添加如下代码：

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("04/06/2020 21:00:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "我已在此等候你 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>