hexo 自定义

一、 分类文章数量

文件路径: themes\next\layout\_partials\header\menu-item.njk

<!--分类文章数量-->
{%- set menuBadge = '' %}
{%- if theme.menu_settings.badges %}
{%- set badges = {
archives : site.posts.length,
categories : site.categories.length,
tags : site.tags.length,
Linux : site.categories.findOne({name: 'Linux'}).length,
NetWork : site.categories.findOne({name: 'NetWork'}).length,
Database : site.categories.findOne({name: 'Database'}).length,
'CI/CD' : site.categories.findOne({name: 'CI/CD'}).length,
Monitor : site.categories.findOne({name: 'Monitor'}).length,
K8S : site.categories.findOne({name: 'K8S'}).length,
Docker : site.categories.findOne({name: 'Docker'}).length,
OpenWrt : site.categories.findOne({name: 'OpenWrt'}).length
}
%}
{%- for menu, count in badges %}
{%- if node.name == menu %}
{%- set menuBadge = '<span class="badge">' + count + '</span>' %}
{%- endif %}
{%- endfor %}
{%- endif %}

二、 单行代码颜色

文件路径: \themes\next\source\css\_common\scaffolding\highlight\index.styl

// Placeholder: $code-inline $code-block
$code-inline {
//background: var(--highlight-background);
//color: var(--highlight-foreground);
color: #c7254e;
background: #f9f2f4;
}

$code-block {
//@extend $code-inline;
background: var(--highlight-background);
color: var(--highlight-foreground);
line-height: $line-height-code-block;
margin: 0 auto 20px;
}

三、 关于搜索功能

hexo配置文件: /_config

search:
# path: ./node_modules/hexo-generator-searchdb/templates/search.xml
path: search.json
field: post
content: true
format: html
limit: 1000

四、 背景图片

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

custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl

创建文件: /blog/source/_data/styles.styl

body {
background:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:100% 100%;
}

五、 页面圆角

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

custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl

创建文件: /blog/source/_data/variables.styl

// 圆角设置
$border-radius-inner = 20px 20px 20px 20px;
$border-radius = 20px;

六、 字数统计和阅读时长

npm install hexo-symbols-count-time --save

hexo配置文件: /blog/_config.yml

symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true

主题配置文件: /theme/next/_config.yml

symbols_count_time:
separated_meta: true # 是否换行显示 字数统计 及 阅读时长
item_text_post: true # 文章 字数统计 阅读时长 使用图标 还是 文本表示
item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
awl: 4
wpm: 275

七、 推荐文章

npm install hexo-recommended-posts --save

hexo配置文件: /blog/_config.yml

recommended_posts:
#server: https://api.truelaurel.com #后端推荐服务器地址
timeoutInMillis: 10000 #服务时长,超过此时长,则使用离线推荐模式
internalLinks: 3 #内部文章数量
externalLinks: 1 #外部文章数量
fixedNumber: false
autoDisplay: true #自动在文章底部显示推荐文章
excludePattern: []
titleHtml: <h1>推荐文章<span style="font-size:0.45em; color:gray">(由<a href="https://github.com/huiwang/hexo-recommended-posts">hexo文章推荐插件</a>驱动)</span></h1> #自定义标题

八、 置顶文章

Next版本: 8.15

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

编辑文件: next/layout/_macro/post.njk, 添加如下代码

{% if post.top %}
<i class="fa fa-thumb-tack" style="color: #EB6D39"></i>
<font color=#FFFF00 >置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

推荐文章(由hexo文章推荐插件驱动)