hexo-theme-next主题配置

发表于 更新于 分类于 本文字数： 1.3k 阅读时长 ≈ 5 分钟
hexo-theme-next 主题美化

安装

next主题官网网站

下载主题

1
git clone https://github.com/next-theme/hexo-theme-next themes/next

启用主题

修改博客配置文件[1],启用next主题

1
theme: next

next主题配置

更换主题风格

next提供4种主题风格，可根据个人喜好选择，修改主题配置文件[2]

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

开启代码块复制按钮

修改主题配置文件有default，flat，mac三种代码块复制风格供选择

1
2
3
4
5
# Add copy button on codeblock
copy_button:
  enable: true
  # Available values: default | flat | mac
  style: mac

开启浏览进度

修改主题配置文件

  1. 返回顶部按钮显示百分比
1
2
# Scroll percent label in b2t button.
scrollpercent: true
  1. 顶部显示进度条
1
2
reading_progress:
  enable: true

开启书签

会保留浏览进度修改主题配置文件

1
2
bookmark:
  enable: true

开启右上角github banner

修改主题配置文件可添加标语title

1
2
3
4
github_banner:
  enable: true
  permalink: https://github.com/yourname
  title: Follow me on GitHub

去掉底部Powered by Hexo & NexT

修改主题配置文件

1
2
# Powered by Hexo & NexT
powered: false

启用菜单

修改主题配置文件

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

添加社交按钮

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
social:
  GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  Weibo: https://weibo.com/yourname || fab fa-weibo
  #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

可以添加其他社交链接,末尾图标可以从https://fontawesome.com/icons搜索添加例如QQ和微信

1
2
QQ: tencent://message/?uin=qq号 || fab fa-qq
WeChat: 微信号 || fab fa-weixin

链接也可使用图片，例如微信使用二维码图片

  1. 先将图片weixin.jpg上传至themes/next/source/images目录下
  2. 修改使用图片路径
1
WeChat: /images/weixin.jpg || fab fa-weixin

开启版权功能

修改主题配置文件

1
2
3
4
5
6
7
creative_commons:
  # Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
  license: by-nc-sa
  # Available values: big | small
  size: small
  sidebar: true
  post: true

开启文本转流程图功能

修改主题配置文件

1
2
3
4
5
6
7
# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme:
    light: default
    dark: dark

修改博客配置文件

1
2
3
highlight:
  exclude_languages:
    - mermaid

vscode可以安装 Markdown Preview Mermaid Support 插件预览效果

next主题美化

设置头像

  1. 上传头像到themes/next/source/images目录下
  2. 修改主题配置文件文件,替换url后内容为头像路径
1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/head_portrait.jpg
  # If true, the avatar will be displayed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

启用本地搜索

  1. 安装hexo-generator-searchdb插件
1
npm install hexo-generator-searchdb
  1. 博客配置文件，添加以下内容
1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  format: html
  1. 修改主题配置文件
1
2
local_search:
  enable: true

启用文章字数统计及阅读时常功能

安装hexo-word-counter插件

1
npm install hexo-word-counter

主题界面设置

添加背景图

  1. 创建配置目录,博客根目录下执行
1
mkdir -p source/_data

  1. 上传背景图片，如background.jpg到themes/next/source/images目录下

  2. _data目录下创建文件styles.styl，添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//全局布局美化代码

body {
    background-image:url(/images/background.jpg);   /* 设置页面背景图片, url后为图片路径，若路径包含中文需加上双引号 */
    background-repeat: no-repeat;                   /* 不重复背景图片 */
    background-attachment: fixed;                   /* 固定背景图片，不随页面滚动 */
    background-position: center;                    /* 背景图片居中显示 */
}

.post-block{
        background-color: rgba(255, 255, 255, 1);    /* 文章块背景色为白色 */
        // margin-top: 24px;                         /* 顶部留出空白 */
        margin-bottom: 24px;                         /* 底部留出空白 */
        // padding: 20px;                            /* 文章块内部留白 */
        border-radius: 30px 30px 30px 30px;          /* 圆角半径为 30px */
        box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12),  /* 添加阴影效果，第一个参数为水平偏移，第二个参数为垂直偏移，第三个参数为模糊半径，第四个参数为阴影扩散程度 */
                    7px 4px 1px -2px rgba(0,0,0,0.06),
                    0 1px 5px 0 rgba(0,0,0,0.12);
}

.main-inner {
    background-color: rgba(255, 255, 255, 0);        /* 主体区域透明背景 */
}
  1. 修改主题配置文件，去掉注释
1
style: source/_data/styles.styl

设置组件圆角

  1. _data目录下创建文件variables.styl，添加以下内容
1
2
3
// 圆角设置
$border-radius-inner     = 30px 30px 30px 30px;
$border-radius           = 30px;
  1. 修改主题配置文件，去掉注释
1
variable: source/_data/variables.styl

添加看板娘

使用[ive2d-widget]https://github.com/stevenjoezhang/live2d-widget

最简单的

  1. _data目录下创建文件head.njk，添加以下内容
1
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
  1. 修改主题配置文件,去掉注释
1
head: source/_data/head.njk
1
cd themes/next/source/
1
git clone https://github.com/stevenjoezhang/live2d-widget.git

添加valine评论系统

准备

注册leancloud,创建应用

  1. 新版hexo移除了Valine，需要自行安装
1
npm install next-theme/hexo-next-valine
  1. 修改 node_modules/hexo-next-valine/default.yaml 中的配置

  1. 博客根目录下:_config.yml ↩︎

  2. next主题目录下:themes/next/_config.yml ↩︎