Next主题配置

Posted on Views:

主页设置

头像设置

修改字段avatar

  • 直接放上头像的url
  • 图片存放在D:\Personal\Blog\Hexo\Cx330\themes\next\source\images目录下，配置为avatar: /images/avatar.png

菜单设置

  1. 配置文件中找到menu，取消相应的注释，点击会报错Cannot GET /tags/，需要新建页面
  2. hexo new page "tags"会在source目录下新建`tags文件夹
  3. 编辑index.md，增加type: tags

圆角设置

  1. 在hexo目录下的source文件夹里新建_data文件夹，进入，再新建variables.styl文件，增加代码：

    1
    2
    3
    // 圆角设置
    $border-radius-inner     = 20px;
    $border-radius           = 20px;

    此代码使用stylus语言编写，stylus是一种CSS预处理器

  2. 进入next主题的配置文件，找到variable: source/_data/variables.styl，取消注释

背景设置

根据canvas_nest的官方教程进行配置：

  1. 配置文件找到footer: source/_data/footer.njk，取消注释

    • 那么新建footer.njk文件，增加代码：
    1
    <script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>
    • 还有一种方法是把canvas_nest.js文件下载到themes/next/source/js/目录下，src调整为src="/js/canvas_nest.js"

    由于官方教程提供的文件名是footer.swig，特地去查了一下njk和swig两个后缀：

    .njk和.swig都是模板引擎文件，用于创建动态生成内容的模板，通常用于Web开发，生成最终的HTML页面

阅读进度条

  • 修改back2top
  • 颜色进度条reading_progress

添加运行时间

在themes/next/layout/_partials/footer.swig末尾加入代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("08/07/2023 15:54:40");//此处修改你的建站时间或者网站上线时间
        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>

游客统计设置

修改busuanzi_count

代码块设置

修改highlight theme

修改标签符号

进入themes/next/layout/_macro/post.swig，找到post-footer，修改#为<i class="fa fa-tag"></i>

评论系统

暂时不想加入评论系统

嵌入统计工具

见官方文档

图标设置

Font Awesome（简称FA）是一个广受欢迎的图标字体库（像文字一样使用它），用于增强视觉效果。可用通过简单的html代码或css类名在网页上添加各种图标，而不必依赖于图像文件。国内镜像

可以使用前缀fa和图标的名称来添加FA图标

教程

等学了前端之后再补充吧

RSS

RSS(Really Simple Syndication)是一种用于订阅web内容的标准格式

文章配置

Front matter

添加updated值作为更新时间

文章置顶

插件

Hexo本身并没有内置文章置顶的功能，需自行安装。但Hexo本身有一个对文章进行排序的组件hexo-generator-index，卸载之后安装可置顶排序组件hexo-generator-index-pin-top

1
2
npm uninstall --save hexo-generator-index
npm install --save hexo-generator-index-pin-top

此时根目录下的package.json文件也发生相应改变

在想要置顶文章的front-matter添加top: true即可

图标

但这样仅仅具有置顶效果，不具有区分性，因此加入图标

进入themes\next\layout\_macro找到post.njk文件，找到<div class="post-meta-container">，添加：

1
2
3
4
5
{% if post.top %}
	<i class="fa fa-thumb-tack" style="color: #124C78"></i>
    <font color=#124C78>置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

草稿功能

hexo new draft "title"在_draft文件夹下新建草稿文章，hexo g不会将其编译到public文件夹下，想要预览，运行hexo s --draft，hexo publish "title"将草稿发布为正式文章

鉴于以后写文章都要打草稿，所以修改default_layout为draft

问题

无法显示

打开文章后白屏，解决：在next主题配置文件中搜索motion，将enable值改为false

然后文章得以正常显示，但是显示了一半，从一个表格开始，下面的内容都消失了。是因为表格的内容有问题：

想要记录html标签，写成<html>，会导致页面出问题，后面的内容直接被截断。。所以直接记成html就行，或者加个代码块