hexo和next主题的一些配置


演示

hexo主题hexo-theme-next,scheme: Gemini,https://andi.wang/

安装hexo

任意一个空文件夹右键open in terminal

1
2
3
4
npm install hexo-cli -g
hexo init
hexo new page tags
hexo new page categories

编辑source\tags\index.md

1
2
3
4
5
---
title: 标签
date: 2024-02-29 20:33:12
type: tags
---

编辑source\categories\index.md

1
2
3
4
5
---
title: 分类
date: 2024-02-29 20:33:12
type: categories
---

安装主题

1
npm install hexo-theme-next

主题会下载到node_modules\hexo-theme-next,打开配置文件node_modules\hexo-theme-next\_config.yml
升级主题,升级前记得先备份_config.yml,之前修改的layout之类的也会重置

1
npm install hexo-theme-next@latest

预览和部署

1
2
3
hexo cl
hexo g
hexo s

如果频繁调试,也可以输入

1
hexo cl && hexo g && hexo s

浏览器访问http://localhost:4000/,就可以预览你的博客,不本地预览的话不需要hexo s
public文件夹里的文件复制到你的服务器就可以运行了

配置next主题

选择风格

主题有4个风格,可以搜一下效果,选择哪个就把前面的井号去掉

1
2
3
4
5
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

本地搜索

安装

1
npm install hexo-generator-searchdb --save

编辑_config.yml

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

下面这里改成true

1
2
local_search:
enable: true

设置网站图标

编辑主题的_config.yml

1
2
3
favicon:
small: /images/favicon.ico
medium: /images/favicon.ico

字数统计

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

编辑主题的_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
symbols_count_time:
separated_meta: true
item_text_total: true
item_text_post: true
symbols: true
time: true
total_symbols: true
total_time: true
exclude_codeblock: false
awl: 2
wpm: 300
suffix: "分钟"

直接显示字数1000,而不显示1k,修改node_modules\hexo-symbols-count-time\lib\helper.js,删除以下内容,大致在26-30行,站点总字数module.exports.symbolsCountTotal大致一样的改法

1
2
3
4
5
if (symbolsResult > 9999) {
symbolsResult = Math.round(symbolsResult / 1000) + 'k'; // > 9999 => 11k
} else if (symbolsResult > 999) {
symbolsResult = Math.round(symbolsResult / 100) / 10 + 'k'; // > 999 => 1.1k
} // < 999 => 111

修改后要hexo cl再hexo g才生效

使用github当评论系统的gitalk

要修改的是以下位置,client_开头的两个,要在https://github.com/settings/applications/new,申请后generate a new client secret后得到
编辑主题的_config.yml

1
2
3
4
5
6
7
gitalk:
enable: true
github_id: 你的github账户名 # GitHub repo owner
repo: 你的Repository名 # Repository name to store issues
client_id: 你的id # GitHub Application Client ID
client_secret: 你的secret # GitHub Application Client Secret
admin_user: 你的github账户名 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues

每篇文章要打开一下初始化,才能使用评论,有点麻烦

修改一些名词

修改node_modules\hexo-theme-next\languages\zh-CN.yml
可以把每页下面的“赞赏”和“请我一杯咖啡吧”换成别的话

版权信息

编辑主题的_config.yml

1
2
3
4
5
6
7
creative_commons:
license: by-nc-sa
size: small
sidebar: false
post: true
language:
- deed.zh-hans

网站建立时间

编辑主题的_config.yml

1
2
footer:
since: 2017

文章目录设置

编辑主题的_config.yml

1
2
3
4
5
6
toc:
enable: true
number: true
wrap: true
expand_all: true
max_depth: 6

生成rss

安装

1
npm install hexo-generator-feed

编辑hexo根目录下的_config.yml,不是主题的_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
feed:
enable: true
type: atom
path: atom.xml
limit: 40
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true
template:

编辑主题的_config.yml

1
2
follow_me:
RSS: /atom.xml || fa fa-rss

删除每篇文章的buy me a coffee,只保留按钮

删掉node_modules\hexo-theme-next\layout\_partials\post\post-reward.njk的第二行

1
<div>{{ __('reward.comment') }}</div>

添加友情链接

编辑主题的_config.yml

1
2
3
4
5
6
7
8
9
links_settings:
icon: fa fa-globe
# Available values: block | inline
layout: block

links:
#Title: https://example.com
我的项目: https://example.com
吉他和弦生成: /guitar

主页不显示每篇文章最后的阅读全文按钮

编辑主题的_config.yml

1
read_more_btn: false

生成sitemap

安装

1
npm install hexo-generator-sitemap --save

编辑hexo根目录下的_config.yml,不是主题的_config.yml

1
2
sitemap:
path: sitemap.xml

主页的文章标题加粗

删除node_modules\hexo-theme-next\source\css\_common\components\post\post-header.styl的第9行

1
font-weight: normal;

mist风格时主页显示每篇文章的分隔线

node_modules\hexo-theme-next\source\css_schemes\Mist\_posts-expand.styl删除26-28行

1
2
3
.post-eof {
display: none;
}

修改分隔线风格像是其他线一样断续的风格
node_modules\hexo-theme-next\source\css\_common\components\post\post-footer.styl的第10行.post-eof {下修改成以下内容

1
2
3
4
background-image: repeating-linear-gradient(-45deg, #ddd, #ddd 4px, transparent 4px, transparent 8px);
border: 0;
height: 3px;
margin: 40px 0;

设置图片大小

直接写html代码,比如原来的写法是

1
![支付宝](/images/alipay.png)

可以写成

1
<img src="/images/alipay.png" alt="支付宝" width="200" height="200"/>

创建404界面

在source文件夹下新建404.md

1
2
3
4
5
6
7
8
9
10
11
---
title: 404 Not Found
date: 2024-03-04 13:50:11
tags:
---

---

页面不存在或者已删除
[点击返回首页](https://andi.wang)
[我的github](https://github.com/wangandi520)

设置description

编辑hexo根目录下的_config.yml,不是主题的_config.yml,类似签名一样的话

1
description: 如果我会发光,就不必害怕黑暗。

点击头像能返回首页

修改node_modules\hexo-theme-next\layout\_partials\sidebar\site-overview.njk
第3,4行

1
2
<a href="/"><img class="site-author-image" itemprop="image" alt="{{ author }}"
src="{{ url_for(theme.avatar.url) }}"></a>

侧栏文章目录不显示友情链接

修改node_modules\hexo-theme-next\layout\_macro\sidebar.njk
把42-59行剪切到第30行的下面,修改后的30-32行是这样

1
2
3
{{- next_inject('sidebar') }}
{# Blogroll #}
{%- if theme.links %}

侧栏文章目录也显示头像

修改node_modules\hexo-theme-next\layout\_macro\sidebar.njk
在第21行后

1
{%- if display_toc %}

添加内容

1
2
3
4
5
6
<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
{%- if theme.avatar.url %}
<a href="/"><img class="site-author-image" itemprop="image" alt="{{ author }}"
src="{{ url_for(theme.avatar.url) }}"></a>
{%- endif %}
</div>

如果还要显示名字和签名,就在endif后添加两行

1
2
<p class="site-author-name" itemprop="name">{{ author }}</p>
<div class="site-description" itemprop="description">{{ description }}</div>

代码块右边增加复制按钮

编辑主题的_config.yml

1
2
copy_button:
enable: true

next主题的bug和不足

代码高亮改不了风格
侧栏显示的信息要自己改
动画没法完全取消