💻【Hexo-Next】主题基础配置篇(二) 🏠专栏:Hexo-Next 主题
👀个人主页:繁星学编程🍁
🧑个人简介:一个不断提高自我的平凡人🚀
🔊分享方向:目前主攻前端,其他知识也会阶段性分享🍀
👊格言:☀️没有走不通的路,只有不敢走的人!☀️
👉让我们一起进步,一起成为更好的自己!!!🎁
文章目录
【Hexo-Next】主题的常见配置
一. 设置(侧边栏和文章栏)圆角
- 首先,在 根目录下找到
source/_data/variables.styl
文件(没有就创建)并增加下列代码:
// 圆角设置
$border-radius-inner = 20px 20px 20px 20px;
$border-radius = 20px;
- 然后,在 NexT 的配置文件
_config.yml
中取消variables.styl
的注释
variable: source/_data/variables.styl
二. 添加字数统计和阅读时长
- 首先,安装相关插件 运行如下命令:
npm install hexo-symbols-count-time
- 其次,修改站点配置文件
_config.yml
打开 Hexo 根目录的_config.yml
,添加如下字段,并根据需要进行修改。
symbols_count_time:
symbols: true # 文章字数统计
time: true # 文章阅读时长
total_symbols: true # 站点总字数统计
total_time: true # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计
awl: 4 # 平均词长度
wpm: 275 # 每分钟阅读词数
suffix: "mins." # 如果阅读时间少于 60 分钟,则添加后缀作为字符串参数
-
最后,修改主题 _config.yml 打开
theme/next/
文件夹下的_config.yml
,找到symbols_count_time
字段,根据需要进行设置,其下各字段含义如下:# Post wordcount display settings # Dependencies: https://github.com/next-theme/hexo-word-counter symbols_count_time: separated_meta: true #文章中的显示是否显示文字(本文字数|阅读时长) item_text_total: true #网页底部的显示是否显示文字(站点总字数|站点阅读时长)
效果图:
三. 添加赞赏功能
-
首先,准备自己的支付宝和微信二维码
-
然后,在_config.yml中配置图片
把以wechat.jpg、alipay.jpg命名的收款二维码图片放入themes/next/source/images
中
- 最后,在主题配置文件中,配置以下内容:
# Donate (Sponsor) settings
# Front-matter variable (nonsupport animation).
reward_settings:
# If true, a donate button will be displayed in every article by default.
enable: true #打赏开启
animation: false
comment: 赞赏一杯咖啡 #评论
#comment: Buy me a coffee
reward: #打赏
wechatpay: /images/wechatpay.png #微信收款码图片路径
alipay: /images/alipay.png #支付宝收款码图片路径
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png
四. 添加社交
打开/blog/themes/next/_config.yml文件,查找Social Links字段并修改(把要用的社交链接前的#去掉,并在链接位置改为自己的社交相关链接)如下:
social:
GitHub: https://github.com/fanxing28 || fab fa-github
E-Mail: mailto:wei861097416@outlook.com || fa fa-envelope
CSDN: https://blog.csdn.net/qq_45867247?spm=1000.2115.3001.5343 || fa fa-crosshairs
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype
效果图:
五. 顶部进度条
-
进入博客文件夹的
/themes/next
文件夹下cd ../themes/next
-
下载安装
Progress module
,如下git clone https://github.com/theme-next/theme-next-pace source/lib/pace
-
在
/themes/next/_config.yml
中设置,如下# Progress bar in the top during page loading. # For more information: https://github.com/CodeByZach/pace pace: enable: true # All available colors: # black | blue | green | orange | pink | purple | red | silver | white | yellow color: blue #设置进度条颜色,可以选择以上所有颜色 # All available themes: # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal theme: bounce #设置进度条样式,可以选择以上所有样式
效果图:
六. 文章加密
在许多写博文的时候你可能需要写一些私密的博客, 通过密码验证的方式让人不能随意浏览.。这里简单记录下实现方法。
(1) 安装
npm install --save hexo-blog-encrypt
- 或
yarn add hexo-blog-encrypt
(需要) Yarn)
(2) 快速使用
- 将 “password” 字段添加到您文章信息头就像这样.
---
title: myblog
date: 2022-06-14 11:10:05
password: HelloWorld
---
(3) 设置优先级
文章信息头 > 按标签加密
(4) 高级设置
1. 文章信息头
---
title: Hello World
tags:
- 作为日记加密
date: 2022-06-14 14:12:49
password: nickname
abstract: 本篇博文已被加密了, 请输入密码查看.
message: 您好, 这里需要输入密码.
wrong_pass_message: 抱歉, 您输入的密码不对哦, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---
2. _config.yml
示例
# Security
encrypt: # hexo-blog-encrypt
abstract: 本篇博文已被加密了, 请输入密码查看.
message: 您好, 这里需要输入密码.
tags:
- {name: tagName, password: 密码A}
- {name: tagName, password: 密码B}
wrong_pass_message: 抱歉, 您输入的密码不对哦, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
3. 对博文禁用 Tag 加密
只需要将博文头部的 password
设置为 ""
即可取消 Tag 加密。
Example:
---
title: Callback Test
date: 2022-06-14 11:15:59
tags:
- A Tag should be encrypted
password: ""
---
Use a "" to diable tag encryption.
(5) 配置优先级
文章信息头 > _config.yml
(站点根目录下的) > 默认配置
(6) 关于 Callback 函数
在部分博客中,解密后部分元素可能无法正常显示或者表现,这属于已知问题。目前的解决办法是通过自行查阅自己的博客中的代码,了解到在 onload 事件发生时调用了哪些函数,并将这些函数挑选后写入到博客内容中。如:
---
title: Callback Test
date: 2022-06-14 11:55:45
tags:
- Encrypted
---
This is a blog to test Callback functions. You just need to add code at the last of your post like following:
It will be called after the blog decrypted.
<script>
// 添加一个 script tag 与代码在文章末尾.
alert("Hello World");
</script>
例子在: Callback 例子。
(7) 对 TOC 进行加密
如果你有一篇文章使用了 TOC,你需要修改模板的部分代码。这里用 landscape 作为例子:
- 你可以在 hexo/themes/landscape/layout/_partial/article.ejs 找到 article.ejs。
- 然后找到 <% post.content %> 这段代码,通常在30行左右。
- 使用如下的代码来替代它:
<% if(post.toc == true){ %>
<div id="toc-div" class="toc-article" <% if (post.encrypt == true) { %>style="display:none" <% } %>>
<strong class="toc-title">Index</strong>
<% if (post.encrypt == true) { %>
<%- toc(post.origin, {list_number: true}) %>
<% } else { %>
<%- toc(post.content, {list_number: true}) %>
<% } %>
</div>
<% } %>
<%- post.content %>
(8) 禁用 Log
If you want to disable the logging, you can add a silent property in _config.yml
and set it to true. 如果你想要禁止使用 Log,你可以在 _config.yml
中增加一个 silent 属性, 并将其设置为 true。
# Security
encrypt: # hexo-blog-encrypt
silent: true
这样就会禁止如 INFO hexo-blog-encrypt: encrypting "{Blog Name}" based on Tag: "EncryptedTag".
的日志。
(9) 加密主题
之前, 我们尝试使用 template
关键字来让用户能修改自己的主题。后来发现真不是一个好主意. 所以我们现在引入了主题:theme
关键字。
你可以简单的使用 theme
在 _config.yml
里或者文章头, 如下:
(10) 文章信息头
---
title: Hello World
tags:
- 作为日记加密
date: 2022-06-14 11:45:25
password: neic
abstract: 本篇博文已被加密了, 请输入密码查看.
message: 您好, 这里需要输入密码.
theme: xray
wrong_pass_message: 抱歉, 您输入的密码不对哦, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---
(11) 其它
可添加的 Front-matter 字段:
- password: 是该博客加密使用的密码
- abstract: 是该博客的摘要,会显示在博客的列表页
- message: 这个是博客查看时,密码输入框上面的描述性文字
**想了解更具体的:**我们可以借助 Hexo插件中心 中的 hexo-blog-encrypt 实现。
七. 阅读全文
很多时候写一篇博文时都非常的长,这个时候将一篇博文在主界面缩短就很重要。下面为大家带来了三种设置阅读全文链接的方法。
-
在文章中使用
< !--more-->
手动进行截断这种方法可以根据文章的内容,自己在合适的位置添加
< !--more-->
标签,使用灵活,也是Hexo推荐的方法。1.设置圆角 <!--more--> 2.添加字数统计
-
在文章中的
front-matter
中添加description,并提供文章摘录
这种方式只会在首页列表中显示文章的摘要内容,进入文章详情后不会再显示。--- title:新建文章 date:2022-06-14 11:45:25 tags:hexo博客 description:这是对整片文章的描述,会显示在主页上,点击进入详情后不会再显示
-
自动形成摘要,在主题配置文件中添加
默认截取的长度为 150 字符,也可以根据需要自行设定。auto_excerpt: enable: true length: 150
效果图: