主题配置

发表于 更新于 分类于

NexT主题启用

我选择的主题是：NexT
在博客文件夹路径下执行

1
git clone https://github.com/next-theme/hexo-theme-next themes/next

下载完成后可以在博客文件夹里看到有一个themes文件夹，里面就有next配置文件，我们只需要在博客根目录下的_config.yml配置文件里找到theme，将其修改为next即可。

然后执行hexo -s即可查看效果
但是我这里除了问题，我这里打开是下面这个样子

查了一下原因是：原因是hexo在5.0之后把swig给删除了需要自己手动安装 

1
npm i hexo-renderer-swig

果然，安装之后就可以了

更改主题语言为中文

这里把language设置为zh-Hans即可。

看效果

增加标签页和分类页

在next主题配置文件里(next里的_config.yml文件)
把tags和categories前面的#注释去掉就可以了

看效果

添加之后点进去是看不到效果的，需要再配置点东西
创建了两个文件，一个是tags，一个是categories

1
2
hexo n page tags
hexo n page categories

这两个文件生成完之后，需要对其进行稍作修改


修改完之后，我点标签看效果，却发现是

我去查了下，才知道结果出在next里的_config.yml配置文件里了

将配置文件里 || 之前所有的空格删掉，这是一个小bug，修改之后如下图。


然后看效果

主题样式更改

next主题配置文件里，找到

Muse是默认主题，这里共有4个主题，我们可以通过把#注释取消来改变主题样式
这里自己修改然后选择一个喜欢的主题样式即可。

更改头像

在NexT的主题配置文件里，找到avatar，把前面的#取消掉

看效果

我们可以自己修改头像，找一个图片放到images文件夹里，指定路径即可
看效果

OK了，修改成功。

修改标题和作者

打开博客根目录下的主题配置文件
找到title和author，对其进行修改即可

启用侧边栏社交链接

在next主题配置文件里搜索social，把要添加的社交方式前面的#去掉即可

设置头像为圆形可旋转

\MyBlog\themes\next\source\css\_common\components\sidebar\sidebar-author.styl
根据这个目录下的对应文件

添加之后即可看到效果
ps:在本地可以直接看到效果，但是在网页端刚开始头像还是没有改变，过了两三天，他自己变了。

首页文章设置阅读全文

在next主题配置文件中找到如下

将enable改为true即可，length是能显示的文字的长度

添加动态背景

在next主题配置文件中找到如下

有四种显示效果，将false改为true即可显示

修改文章底部带#的标签

文章底部的标签前会有一个#,我们可以将其修改
\MyBlog\themes\next\layout\_macro\post.swig
根据路劲找到对应文件

这个位置有个#，我们把它改了,可以修改为图标，我们可以从图标库中找图标
图标库 找到图标之后点击会有其html代码，粘过来即可

首页下方翻页图标

当博客有一定数量之后，一页容不下，会自动分页，但是默认的分页效果，如下图

它这里的分页是<i class="fa fa-angle-right"></i>
我们去找翻页的配置文件，它在next主题文件夹的layout/_partial/pagination.swig，里面的内容

1
2
3
4
5
6
7
8
9
10
11
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<i class="fa fa-angle-left"></i>',
        next_text: '<i class="fa fa-angle-right"></i>',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

只需要修改prev_text和next_text中的HTML代码。
直接改为文本’上一页’和’下一页’。

1
2
3
4
5
6
7
8
9
10
11
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '上一页',
        next_text: '下一页',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

去除底部“由Hexo强力驱动”

打开主题配置文件，找到Powered by Hexo & NexT字段，将powered: true改为powered: false

添加网站运行时间

来到\themes\next\layout\_partials找到footer.swig文件，添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("7/18/2023 10: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>

主题侧边目录点击无法正常跳转

文件路径\themes\next\source\js\src\post-details.js
找到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// TOC item animation navigate & prevent #item selector in adress bar.
$('.post-toc a').on('click', function (e) {
  e.preventDefault();
  <!-- targetSelector 解析UTF8的问题 ->
  var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));
  var offset = $(targetSelector).offset().top;

  hasVelocity ?
    html.velocity('stop').velocity('scroll', {
      offset: offset  + 'px',
      mobileHA: false
    }) :
    $('html, body').stop().animate({
      scrollTop: offset
    }, 500);
});

解决方案：

1
2
3
4
5
6
// 将 targetSelector 再解析一次就好了

var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));
    <!-- 添加下面这行代码, 重新解析 URL ->
    targetSelector = decodeURI(this.getAttribute('href')) 	// 需要添加的代码加在75行左右	
    var offset = $(targetSelector).offset().top;

开启文章目录和调整样式

Hexo博客NexT主题中是有目录的，只是在默认情况下没有开启，需要我们来手动开启。
文章目录样式文件custom.styl文件位于themes/next/source/css/_custom
打开后添加内容

1
2
3
4
5
6
7
//文章目录默认展开
.post-toc .nav .nav-child { display: block; }
//文章目录字体大小调整
.post-toc ol {  
  font-size : 13px;     
}

修改主题配置文件themes/next/_config.yml

1
2
3
toc:
  enable: true  
  wrap: true