hexo和next主题的一些配置

发表于 更新于 分类于 阅读次数： 本文字数： 5586 阅读时长 ≈ 5 分钟

演示

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和不足

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