nexT美化

---

title: nexT美化
date: 2024-04-09 16:43:15
categories : hexo
tags:

• hexo
• nexT

---

额额。。。此贴的所有操作都是基于 next8 版本进行的。。。
版本对应不上可能导致相关文件找不到，还请各位善用搜索引擎

可切换模式按钮

参考了这个佬的博客
在路径themes/next/_vendors.yml 下添加 darkmode.js 的cdn
然后我在next目录下没有找到 _config.next.yml 但是我添加在 _config.yml 里

失败了。。。
可能是版本不对，更新给文件删了吧。。。

---

我又找到了另一个佬的博客
废话我不多说了，有用！
然后如果要自定义可以在这个路径下进行修改
\[root]\node_modules\hexo-next-darkmode\lib
root 就是你的博客根目录，其他 npm install 的包也在这里，可以找一找 hh

文章底部添加

额原理就是加一个html的div标签
在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV，在END POST BODY之后的部分）：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

但是我是没有 post.swig 文件的，我操作了 post.njk 文件，同样可以

然后打开主题配置文件(_config.yml),在末尾添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

把底部 # 标签换成图标

修改模板/themes/next/layout/_macro/post.njk 在尾部找到

{%- set tag_indicate = '<i class="fa fa-tag"></i>' if theme.tag_icon else '#' %}

# 删去 if theme.tag_icon else '#' 即可
{%- set tag_indicate = '<i class="fa fa-tag"></i>'%}
重新渲染后可正确使用

首页折叠

起因是我觉得每次进主页都直接看全文很麻烦。。。
然后去搜了下压缩结果是静态资源的压缩，在这篇博客里
但我其实搜错关键字了hh
歪打正着给博客静态资源压缩了
参考这篇博客
没想到主页文章折叠在 next 的 _config.yml 文件里就有
不过貌似优先级比较低？在我的markdown生成目录的文章里，如果填在 <!--TOC--> 标签之前就无法折叠了。。。

next文章评论区

看了下 next 的 _config.yml 文件
额额最终还是采用了 waline 搭建个人博客（gitalk折腾了半天一直会报 e.toLowerCase is not a function的错，他在GitHub的issue下面是有相关问题的，但是我按照其他人给出的解决方案没有搞定，只能转战 waline 了
waline的参考手册还是很详细的，按照步骤很方便快速地部署完成了

vercel 部署

采用了 vercel 自动部署 waline
参考文档如下：

• Waline

管理界面地址为 https://[your app address]/ui
或者进入你的app中，看页面上方的导航标签有管理可以进入。。。
但是有一个问题就是通过vercel部署访问的速度实在太慢了。。。
之后考虑看看有没有其他办法能够部署到国内

waline dark

配置好的 waline 是不支持黑夜模式的，看了官方文档但是我没有找到 client 文件，所以直接修改 css 作罢
随后考虑修改 _config.yml 文件中的字段看是否能够修改（？字段几乎都不起作用，奇怪）
最后考虑到之前做的 dark mode按钮，那个是直接覆盖页面的 css，应该也可以修改评论区的css
一查发现佬的文章里已经做了说明。

由于暗黑模式切换插件依赖了 Darkmode.js，如果插件不生效，这很有可能是 Darkmode.js 的 CDN 资源失效了（在国内访问被墙）。
此时，建议使用暗黑模式切换插件的 libUrl 配置参数来指定可用的 CDN 资源链接，如下所示：

• 使用 Unpkg 免费提供的 CDN 资源

darkmode_js:
 ...
 libUrl: 'https://unpkg.com/darkmode-js@1.5.7/lib/darkmode-js.min.js'

• 使用 Jsdelivr 免费提供的 CDN 资源

darkmode_js:
 ...
 libUrl: 'https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js'

按照佬的方案轻松解决 ^ ^

waline加速

由于vercel在国内被dns污染了所以访问起来不挂梯子是看不到评论区的
参考了网上的一些方法，刚好域名备案下来了，搞一下waline的加速


！注意，这个操作是要基于已有域名的情况下才能继续进行
我们要做的就是用已有的博客域名去免费申请一个子域名来代替vercel.app那个被污染的域名。

1. 进入域名控制台，找到你的博客域名，添加解析记录
   1. 记录类型选择 CNAME
   2. 主机记录填 comment (可以自定，这一步完成你的二级域名就是 comment + 你的一级域名)
   3. 添加记录值为 cname.vercel-dns.com

(比如我的域名是 szf.cool，那么操作完，我的二级域名应该是 comment.szf.cool)


2. 进入vercel控制台，进入你的项目，在setting-Domains下，在输入框中输入你的二级域名 => add添加
3. 同时修改next的config文件，更换一下serverURL字段即可
4. 这样就可以了，随后部署测试一下评论区是否能够正常访问即可

额额但是在博客的评论区里，power by waline的版本是2.x。。。
在管理页面是 3.x 版本，目前还没出问题，不至于以后会不会有问题。。。

文件跳过渲染

修改站点配置文件中的 skip_render 配置项。
只有 source 目录下的文件才会发布，因此 Hexo 只渲染 source 目录下的文件。skip_render 参数设置的路径是相对于 source 目录的路径。

#单个文件
skip_render: hello.html

#单个文件夹下全部文件
skip_render: test/* 

#单个文件夹下指定类型文件
skip_render: test/*.md  

#单个文件夹下全部文件以及子目录
skip_render: test/**  

#跳过多个目录，或者多个文件
skip_render: ['*.html', demo/**, test/*]

文章置顶功能

参考这篇博客
首先修改本地的仓库

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

然后就可以在文章的顶部信息修改 top 字段了。。。
同时要设置一下置顶的标签 hh

我是在\next\layout\_marco\post.nijk 文件下的 post-meta-container标签中添加的相关代码

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

注意缩进 ^ ^
但是这个紫色的颜色不好看，我修改了 font color的值

更新markdown渲染

额额看花书洋洋洒洒写了点文字，结果没想到markdown的渲染好像不是很行，于是按照教程重新折腾了一下markdown的渲染。。。
教程在这里
笔者又找到一个markdown的依赖包教程