👦

放肆生活

繁体
首页 投喂 关于 邮件

博客”负“装修记录

学习 | 本文共5.5k字 | 需阅读22分钟 / 已阅读:

文章有效性提示
文章发布于225天前，如文首没有相应更新提示，则文章内容可能失效或错误，请谨慎参考使用！

目录
  1. 特征
  2. 搜索功能
  3. 分类和标签
  4. RSS功能、
  5. 评论功能
    1. 基于评论功能拓展
    2. 表情更改
  6. 文章字数统计和阅读时间统计
  7. 顶部更新
  8. 底部更新
    1. 多语言支持
  9. 页面添加
  10. 置顶功能（失败）
  11. 目录功能
  12. 文章时效性提示
  13. 字体更换
  14. 密码访问功能
  15. 永久链接
  16. 文章版权
  17. 公式显示
  18. 吐槽功能
  19. 隐藏文章
  20. 全站图标
  21. 文章系列功能
  22. 图片灯箱
  23. 枫叶飘落特效
  24. 文字隐藏
  25. 文章脚注
  26. 文章上下页
  27. 未完待续

20210304更新修改添加部分文章内容，不合理内容已移除。
20210307更新上下篇翻页，并修改日间配色

做个人博客网站，不仅仅在可以写作上更加自由，在博客外观上也能获得更大程度的自定义。

我的博客主题叫做 Minima 它非常的小巧，小巧到去掉字体文件后只有 100 多 k 的大小，它的 CSS 只有大约 400 行，只有顶端引用了 nanobar.js ，图标直接使用 SVG 调用，这非常符合我极简的想法，但我更感觉是它的外观吸引了我，其实之前我是想用那个仙人球主题的https://probberechts.github.io/hexo-theme-cactus/ ，但后来还是用了这个主题

一开始它的表现是这样的：

特征

通过 Hexo 主题单元测试的核心
全响应式设计
支持文章，页面，标签，档案和分页
SEO ：发布元描述和图像（出现在 Facebook / Twitter 共享链接中）
[可自定义]图标暗/亮模式即时开关 🌑/☀️
[可自定义]主题色
使用 Prism.js 突出显示代码
Disqus 发表评论
显示评论部分按钮可加快帖子的加载速度

但是基本需求满足了，但有些不基本的需求我也想要呀，所以现在它变成了这样：

那么现在来记录一下我对博客都做了哪些修改（非时间先后顺序）。

搜索功能

原主题是没有搜索功能的，虽然我的内容也没有多到需要搜索的地步，但就是想要一个搜索功能，嘿嘿。

‘npm install hexo-generator-searchdb -s’安装搜索插件。

网上有相应教程不过多阐述。

分类和标签

话说，我属实没找到这两个页面在哪。。。首先没有分类模板，唯一的 tag.ejs 引用后没有任何效果，那只好自己弄了，但身为懒狗会弄花里胡哨的吗？

根据 hexo 文档直接上分类界面

<h2>All Categories</h2>
<%- list_categories(site.categories, {
    show_count: true,
    style: false,
    separator: " |-| ",
    depth: 0,
    class: 'ml',
    transform(str) {
        return str.toUpperCase();
      }
  }) %>

接下来是标签页

<h2>All Tags</h2>
#<%- list_tags(site.tags, {class: {ul: 'ululul', li: 'lilili', a: 'aaa', count: 'ccc'}, style: false, separator: '  , # '}) %>

完事直接 hexo new page 页面名称，layout定义为模板名就完成了。

再往文章顶部和底部分别加上当前分类和标签，在 post.ejs 对应位置引入：

#分类
<font size=3px><%if (page.categories && page.categories.length){%> | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"/><path d="M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2zM20 11H4v8h16v-8zm0-2V7h-8.414l-2-2H4v4h16z" fill="rgba(252,195,7,1)"/></svg> <%- list_categories(page.categories, {show_count: false, style: 'none', separator: ','})%><%}%></span></font>
#标签
<%- list_tags(page.tags, {class: 'classtest', show_count: false, style: false}) %>

更新：分类被整合进归档页面，我认为没必要单独分出来一个页面，标签页面也进行了相应的样式优化，可以到源码页查看相应代码。

RSS功能、

这个好像没啥用,但我还是弄了。

安装 hexo-generator-feed 插件，在博客 _config.yml 文件中加入：

plugins: hexo-generator-feed 
feed:
  type: atom ##feed类型 atom或者rss2
  path: atom.xml ##feed路径
  limit: 20  ##feed文章最小数量

直接调用在博客底部，欢迎订阅有生之年系列博客

评论功能

博客自带的是 disqus 评论系统，但我用着好像得科学上网。。。为啥别人不用，上度娘搜索了下挺麻烦的，还是用更简单的 valine 吧。

用着倒是挺舒服的，但渐渐又感觉不舒服了，因为它无后端，所以各种密钥在我一查看网页源码时，全是透明的，还有用户的邮箱以及UA信息都是透明的，这一点隐私没有很恐怖啊。

好吧又是百度一波，发现了升级版双V的 waline，快速使用地址是https://waline.js.org/quick-start.html 它的配置以及样式和 valine 几乎一模一样，但是多了后端部署，让密钥和评论信息加密，隐私有保障了。

基于评论功能拓展

因为 valine 和 waline 两者没什么太大的区别，所以很方便的给文章添加了一个游览计数功能：

先在评论配置里面开启计数功能
visitor: '<%- theme.comment.visitor%>', // 阅读量统计
再向文章页添加以下模板代码
<span id="<%- url_for(page.path) %>" class="leancloud_visitors">
      <em class="post-meta-item-text"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" fill="rgba(252,195,7,1)"/></svg></em>
      <i class="leancloud-visitors-count">loading</i>
    </span>

表情更改

手动找表情好累啊，所以我网上扒了一个，但这个我忘记在哪个网站扒的表情代码了，原主发现了告知我，我给加上标注，我记得好像那个博客提供b站表情的转换？不知道记混没有。。。

同样给添加到 waline 评论配置里面

其他的功能官方教程都有，我基本把能用的都给用上了
官网https://waline.js.org/

文章字数统计和阅读时间统计

由 hexo-wordcount 插件提供支持，直接安装：

npm i --save hexo-wordcount

在 post.ejs 头部合适位置引入

#字数统计
<%= wordcount(page.content) %>

阅读时间统计
<%= min2read(page.content, {cn: 300, en: 160}) %>

全站总字数统计
<%= totalcount(site) %>

顶部更新

顶部主要就是去掉工作页，加上了留言板，介绍页，然后搜索也加在了顶部，体验后发现在小屏幕下，网页自适应已经乱套了，后期再修改一下。（已修改）

主页个人介绍加上了两个链接下面会有所涉及。

更新：加上了一些彩蛋，不注意还真不知道。

底部更新

底部将原本不需要的社交图标换掉，变成几个自己主要的社交联系方式，并且添加博客运行时间代码：

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>

<script>
  var now = new Date(); 
  function createtime() { 
      var grt= new Date("05/20/2020 12: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>

多语言支持

已经不支持了，太麻烦了，不过设置了简繁体中文转换，切换按键就在博客顶部。

引入 tw_cn.js 文件，并在网页加入以下代码：

<script type="text/javascript">
  var defaultEncoding = 2;
  var translateDelay = 0;
  var cookieDomain = "https://funs.life/";
  var msgToTraditionalChinese = "繁体";
  var msgToSimplifiedChinese = "简体";
  var translateButtonId = "translateLink";
  translateInitilization();
</script>

使用以下代码进行按键切换：

<a class="s" id="translateLink" href="javascript:translatePage();"> 繁体</a>

页面添加

目前主要添加了如下界面：

  1. 留言板
  2. 关于
  3. 分类
  4. 标签
  5. 吐槽
  6. 链接
  7. 影单
  8. 书单
  9. 打赏
  10. 状态

置顶功能（失败）

这东西不知道是不是我模板问题，就是无法置顶文章，目前网上有两种方法：

  1. 修改 hexo 插件的默认index文件内容，并且在模板文件中修改显示效果。

  2. 直接安装现成的插件，修改模板文件。

两种方法都试过了，没有置顶效果。。。置顶标记倒是有了，也不知道咋回事，目前只能通过修改发布日期来实现置顶排序（泪目），以后慢慢弄吧。

目录功能

就像这篇文章一样，没有目录功能简直是史诗级灾难！

我感觉自己应该不是短小精悍的代表，所以我需要这个功能。

先在 partial 文件夹建立目录模板文件并写入：

<!-- 目录内容 -->
<% if(page.toc == true){ %>
	<style>
		/* 新添加的 */
		@media (min-width: 1050px) {
		.toc-article {
			z-index: 100;
			max-width: 350px;
			min-width: 150px;
			max-height: 500px;
			overflow-y: auto;
			padding: 10px;
			position: fixed;
			right: 0px;
			top: 80px;
			background-color: transparent
		}
		
		}
		.toc-article .toc {
			padding: 0;
			line-height: 25px
		}
		
		.toc-article .toc-title:before {
			content:'#';
			color: #fcc307;
		}
		
		.toc-article .toc .toc-text:hover {
			text-decoration: underline;
		}
		
		.toc-article li {
			list-style-type: none
		}
		
		.toc-article .toc-level-1 {
			margin: 4px 0
		}
		
		.toc-article li ol, .toc-article li ul {
			margin-left: 30px;
		}
		.toc-article ol, .toc-article ul {
			margin: 10px 0;
		}
		</style>
			<% if (page.encrypt == true) { %>
			<div id="toc-div" class="toc-article" style="display: none;">
				<strong class="toc-title">目录</strong>
					  <%- toc(page.origin) %>
			</div>
			<% } else { %>
			<div id="toc-div" class="toc-article">
				<strong class="toc-title">目录</strong>
					  <%- toc(page.content, {list_number: false}) %>
			</div>
			<% } %>
	<% } %>  
	<!-- 目录内容结束 -->

为了配合文章隐藏插件 encrypt 所以有相应的判断，如果开启了文章隐藏就不显示目录。

然后直接调用到 post.ejs 顶部。

<%- partial('partial/toc')%>

支持自适应避免移送设备游览遮挡屏幕。

文章时效性提示

人是善变的，文章也一样，不同的时间写作的目的与心态也是完全不一样的，所以我给文章设置了一个月有效期，过了这个时间就会提示你，那是我说的话嘛，那是以前的我说的话了。

这之前同样在文章 Front-matter 中设置好是否需要启用此功能

timeout: true / false

<% if (page.updated-page.date > 2678400000 && page.timeout) {%>
  <blockquote>
    <p><strong>文章有效性提示 Article Validity Tips</strong><br>这是一篇最后更新于<%- full_date(page.updated, 'll') %>的文章，其中的信息可能已经有所发展或是发生改变。<br>This is an article last updated in <%- full_date(page.updated, 'MM/DD/YYYY') %>, and the information in it may have evolved or changed.</p>
  </blockquote>
<%}%>

然后直接调用到 post.ejs 任意位置。

字体更换

引入了谷歌的思源字体，感觉这个字体更适合阅读了，比原本那个好很多。

顶部引入字体文件

<!-- Google font预加载&缓存 -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&amp;family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&amp;family=Cinzel+Decorative:wght@700&amp;display=swap" media="all" onload="this.media='all'">
  <noscript><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Cinzel+Decorative:wght@700&display=swap"></noscript>

调用字体到全局，我这里是自适应大小的

@media (min-width: 240px) and (max-width: 750px) {
  body {
    font-size: calc(1.7em + (3.4 - 1.7) * ((100vw - 240px)/ (240 - 750)));
    /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.6;
    font-weight: 500;
    font-family: "glyph-correction","Amstelvar","Noto Serif SC",serif;
    color: rgb(85, 85, 85);
    font-variation-settings: "wdth" var(--text-wdth),"opsz" var(--text-opsz),"YTLC" var(--text-YTLC);
  }
}
@media (min-width: 750px) {
  body {
    font-size: 2.0em;
    /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.8;
    font-weight: 500;
    font-family: "glyph-correction","Amstelvar","Noto Serif SC",serif;
    color: rgb(85, 85, 85);
    font-variation-settings: "wdth" var(--text-wdth),"opsz" var(--text-opsz),"YTLC" var(--text-YTLC);
  }
}

html {
  font-size: 62.5%;
}

密码访问功能

由 hexo-blog-encrypt 插件提供支持，加密文章输入密码解密，使用指定标签设置是否加密，并在博客 _config.yml 加入

# Security
encrypt: # hexo-blog-encrypt
  abstract: 这里是属于个人隐私文章，请勿查看.
  message: 没什么好看的，请勿爆破.
  tags:
  - {name: 标签名, password: 密码}
  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
# 详细介绍https://github.com/D0n9X1n/hexo-blog-encrypt/blob/master/ReadMe.zh.md

永久链接

由 hexo-abbrlink 插件提供支持，生成不重复唯一字符串为文章地址，然后到博客_config.yml设置文章地址，我的设置为 :year/:month:day:abbrlink.html ,还是得按日期分类归档，不然源文件目录都搞混了。

文章版权

版权这个东西是老生常谈了，虽然我的都是些流水账不大可能有人会失智，但还是以防万一吧。

在 post.ejs 模板合适位置加上

<% if (page.copyright) { %>
<div>
  <ul class="post-copyright">
    <li class="post-copyright-author">
    <strong>作者：</strong><%= config.author%></a>
    </li>
    <li class="post-copyright-link">
    <strong>文章链接：</strong>
    <a href="<%- config.root %><%- page.path %>" target="_blank" title="<%= page.title %>"><%- config.url %>/<%- page.path %></a>
    </li>
    <li class="post-copyright-license">
      <strong>版权声明：</strong>
      主页所有文章除特别声明标识外,均采用<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">CC BY-NC-ND 4.0</a>
      许可协议。转载请遵守协议，有特殊需求可联系博主授权!
    </li>
  </ul>
<div>
<% } %>

由 Front-matter 参数 copyright 控制是否开启版权说明，会根据你在配置里面填写的作者信息自动匹配作者和文章链接信息。

公式显示

在文章模板中添加 mathjax 参数确认是否开启，再向主题 _config.yml 中添加：

# Mathjax
mathjax:
  enable: true
  cdn: //cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js

配置好相关js后，新建mathjax.ejs到partial文件夹，写入：

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$', '$'], ['\\(', '\\)'] ],
      processEscapes: true,
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    },
  TeX: {
          extensions: ["mhchem.js"]
    }
  });
  MathJax.Hub.Register.StartupHook('TeX Jax Ready', function() {
    MathJax.InputJax.TeX.prefilterHooks.Add(function(data) {
      if (data.display) {
        var next = data.script.nextSibling;
        while (next && next.nodeName.toLowerCase() === '#text') { next = next.nextSibling }
        if (next && next.nodeName.toLowerCase() === 'br') { next.parentNode.removeChild(next) }
      }
    });
  });
</script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for (i = 0; i < all.length; i += 1) {
      document.getElementById(all[i].inputID + '-Frame').parentNode.className += ' has-jax';
    }
  });
</script>
<script src="<%= theme.mathjax.cdn%>"></script>

在layout.ejs底部调用即可。

<%if (theme.mathjax.enable) {%><%if (page.mathjax) {%><%- partial('partial/mathjax')%><%}%><%}%>

效果
$$\ce{CH2=CH2 + Cl2 -> CH2Cl-CH2Cl}$$

吐槽功能

demo

功能和说说差不多，发布端在”黑石哔哔“微信公众号，挺方便的不用登陆也不用注册什么，整个部署下来也挺轻松，但是不支持直接发布图片，只能外链，丢个原文链接备注，我是照着做的没什么大毛病。

https://www.heson10.com/posts/25624.html

20201225：圣诞节更新福利，可以加号直接上传图片了。

隐藏文章

由 hexo-hide-posts 插件提供支持，在博客 _config.yml 里加入：

# hexo-hide-posts
hide_posts:
  # 可以改成其他你喜欢的名字
  filter: hidden
  # 指定你想要传递隐藏文章的 generator，比如让所有隐藏文章在存档页面可见
  # 常见的 generators 有：index, tag, category, archive, sitemap, feed, etc.
  public_generators: []
  # 为隐藏的文章添加 noindex meta 标签，阻止搜索引擎收录
  noindex: true

然后在文章 Front-matter 里面加上设置的 hidden 关键字，开启即可食用，开启后的文章只能在指定页面出现，若不设置则只能手动输入链接访问。

全站图标

一开始我是使用的 fontawesome 的CSS，但后面发觉整个博客的图标也并不多，于是直接不用了，全部换成SVG图标，博客大多数图标来源于：

https://remixicon.com/

文章系列功能

我貌似需要这个功能，效果就在本文下方，所有关于博客倒腾相关的文章都会显示出来。

首先一样是新建 series.ejs 文件到 partial 文件夹中，写入代码

<% if (page.series) {%> 
    <blockquote>
        <strong><%= page.series %> - 系列文章：</strong>
        <% site.posts.sort('date').map(function(p) {%>
            <% if (page.series == p.series) {%>
                <li><a href="<%- url_for(p.path) %>"><%= p.title%></a></li>
            <%}%>
        <%})%>
    </blockquote>
<%}%>

在文章模板页设置文章series参数，并且在合适位置调用即可，我调用在了本文下方，你可以查看效果👇。

图片灯箱

我使用的是非常小巧的 view-image 灯箱插件，Gzip 压缩后不足 1k，能满足基本的放大图片，加载缩略图等功能，由于是博客而不是图站，所以那些复杂的灯箱，如 fancybox 不予考虑。

<script type="text/javascript" src="view-image.min.js?v1.3.1"></script>
<script type="text/javascript">
  jQuery(document).ready(function () {
      jQuery.viewImage({
          'target': 'tp1 a,tp2 img', //控制需要操作的图片标签
          'exclude': '.gif', //不需要操作的图片标签或类型
          'delay': 200 //图片加载的缓冲时间
      });
  });
</script>

枫叶飘落特效

为了配合留言板的文字意境，所以加上了枫叶飘落特效进行修饰。

留言板代码

<style>
    .maple { position: absolute; top: 0; color: #ff0000; }
</style>
老家的院子周围是几棵岁数很大的枫树，些许杂草在院周围肆意生长着，没有铺上水泥地之前，每到秋季金黄的枫叶就会铺满院子，这是童年嬉戏的内容之一。每当有客人拜访时，常常会驻足于树下观望，亦或者是感叹几句。即使主人未在，也会轻轻将院中石桌上的落叶扫去，桌上的字迹早已模糊，依稀可见：
> 花径不曾缘客扫，蓬门今始为君开。
<div class="maplebg"></div>
<script>
    var d = "<div class='maple'>🍁<div>";
    setInterval(function () {
        var f = $(document).width();
        var e = Math.random() * f - 300; // 枫叶的定位left值
        var o = 0.2 + Math.random(); // 枫叶的透明度
        var fon = 25 + Math.random() * 10; // 枫叶大小
        var l = e - 100 + 200 * Math.random(); // 枫叶的横向位移
        var k = 8000 + 5000 * Math.random();
        var deg = Math.random() * 360; // 枫叶的方向
        $(d).clone().appendTo(".maplebg").css({
            left: e + "px",
            opacity: o,
            transform: "rotate(" + deg + "deg)",
            "font-size": fon,
        }).animate({
            top: "550px",
            left: l + "px",
            opacity: 0.1,
        }, k, "linear", function () {
            $(this).remove()
        })
    }, 500)
</script>

文字隐藏

有时候你有些话想讲，但又不想明目张胆的讲出来怎么办？

可以使用 hexo-spoiler 插件进行文字模糊，别人需要点击才能看到，就像这样，点击后才能看到使用方法

需要隐藏的内容

在博客 _config.yml 中加入

spoiler: #文字隐藏
  style: blur # 或者box
  color: black # 仅当 style 为 box 时起效
  p: false # 没懂啥意思，不管它
{% spoiler 需要隐藏的内容 %}

文章脚注

由 hexo-reference 插件提供支持，如果你无法使用时则可能需要在 _config.yml 配置

plugins:
  - hexo-reference

不过一般情况下都不需要，使用方法：

第一种用法[1]
第二种用法[^2](第二种脚注)

[^1]: 第一种脚注

测试效果[1]

文章上下页

这个我不知道怎么描述啊，就是文章下面那个可以跳转前一个文章和后一个文章的功能。

没错，这个功能主题也没有，自己动手给加上。

添加样式文件：

/*文章上下篇*/
.article-nav {
  width: 100%;
  height: 80px;
}

.article-nav-warp {
  box-sizing: border-box;
  /* Firefox */
  
  -moz-box-sizing: border-box;
  /* Safari */
  
  -webkit-box-sizing: border-box;
  width: 50%;
  float: left;
  text-align: center;
  padding: 5px 0;
}

添加模板代码到指定位置：

<% if (page.prev || page.next){ %>
  <div class="article-nav  unhover">
    <% if (page.prev){ %>
      <a href="<%- url_for(page.prev.path) %>" class="article-nav-warp">
        <strong><%= __('上一篇') %></strong>
      <div>
          <% if (page.prev.title){ %>
            <%= page.prev.title %>
          <% } else { %>
            (no title)
          <% } %>
        </div>
      </a>
      <% } else { %>
        <a href="javascript:void(0)" class="article-nav-warp">
          <strong><%= __('上一篇') %></strong>
          <div>已经是最新一章</div>
        </a>
    <% } %>

    <% if (page.next){ %>
      <a href="<%- url_for(page.next.path) %>" class="article-nav-warp">
        <strong><%= __('下一篇') %></strong>
        <div><%= page.next.title %></div>
      </a>
    <% } else { %>
      <a href="javascript:void(0)" class="article-nav-warp">
        <strong><%= __('下一篇') %></strong>
        <div>已经是最后一章</div>
      </a>
    <% } %>
    </div>
  <% } %>

未完待续

  1. 1.这是一个标准的脚注效果 ↩
博客折腾 - 系列文章：
  • 博客”负“装修记录

    • , — 2020年12月22日

    上一篇
    洗澡
    下一篇
    梦境一则

    Made with ❤ and Hexo.js at China.

    Telegram GitHub RSS sitemap
    载入天数...载入时分秒...
    人生没有下页，请把握每一天。
    (●'◡'●)