Next 主题设置

本文最后更新于:2020年10月24日 中午

关于 Next 主题的自定义设置。

前言

现在最新版本的的 Next 8.0 +,官方主题文档主要为英文设置,我应用时有点不是特别熟悉,所以主要参考了国内前辈们的设置方案。

主题设置

文章信息设置

在博客站点文件夹下,具体位置为:blog/scaffolds/post.md

在其内书写以下内容,其中标点符号使用英文标点。

---
title: {{ title }}
date:  {{ date }}
tags: [01,02]
categories: [03]

---
![](https://cdn.jsdelivr.net/gh/afderlqs/ccafder-photo/img/20200909185752.jpeg)
这里是博客摘要,以上 markdown 图片链接可以替换成头图设置。
<!-- more -->
这里是博客正文

在每一次使用 hexo n "title" 时,即可在文章页面上显示以上信息。

二级分类设置

类别模块,往往只显示一种类别,但有时候博客之间归属一大类却各有差异,因此设计二级分类目录,使得类别简洁的同时又能将具体博文区别。因为Hexo原生支持父子分类,在博文撰写的md文件首部categories下原先的类别A下再写一个类别B,即可得到父子类的效果,A为父类,B为子类,示例如下

设置文章分类形成父子类效果,具体设置在 blog/scaffolds/post.md 中修改以下选项,A 为父类,B 则为子类,不建议设置三级以上分类,如有需要,请使用标签功能

categories:
- A
- B

页脚相关设置

针对页脚实现自定义效果,文件在:blog\themes\next\layout\_partials\footer.swig,修改 footer.swig 即可实现页脚自定义。

比如添加博客显示时间,可以在其中添加以下代码。

<div id="days"></div>
<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("01/01/2020 00:00:00");//修改为自己的blog建站时间
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="本站已安全运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
    if (i<10)
    {i="0" + i};
    return i;
}
show_date_time();
</script>

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!