Theme.zhaoo 配置文档

八月 11, 2021 17758

原文链接：www.izhaoo.com

关于文档

如有疑惑欢迎加鹅群咨询：550262893
约定：无特殊说明时，文中“博客配置”指 /_config.yml，“主题配置”指 /theme/hexo-theme-zhaoo/_config.yml，缺省为“主题配置”。

文档更新于：2021年4月4日

快速开始

主题安装

Hexo 后进入根目录：

1
$ cd hexo

安装 zhaoo 主题：

1
$ git clone https://github.com/izhaoo/hexo-theme-zhaoo.git themes/zhaoo

开启主题

修改 Hexo 根目录下的 _config.yml 文件
启用 zhaoo 主题：

1
theme: zhaoo

启动 Hexo 服务器预览：
1
$ hexo clean && hexo s

博客配置

编辑 Hexo 根目录下的 _config.yml 文件，配置博客网站相关功能，对整个网站生效。建议将文章数量改为9篇：

1
2
3
4
5
index_generator:
    path: ''  
    per_page: 9  #文章数量改为9篇（3的倍数更和谐）  
order_by:
   -date

启用代码高亮效果：

1
2
3
4
5
highlight:  enable: true  #启用代码高亮效果  
line_number: true  
auto_detect: true  
hljs: true  
tab_replace:

编辑 zhaoo 主题目录下的 _config.yml 文件，配置主题相关功能，只对主题生效。建议参考 _config.yml 和本文进行配置，具体配置内容见下文。

主题更新

进入到 zhaoo 主题目录：

1
$ cd themes/zhaoo

从 GitHub 获取更新：

1
$ git pull

全局配置

头部导航 (NavBar)

配置项 navbar 用于设置 头部导航条。

1
navbar:  enable: true  back_home: true

enable 用于控制头部导航条全局显示/隐藏。
back_home 用于开启返回首页按钮；其余的功能按钮随各自配置开启，例如“二维码”、“黑夜模式”、“搜索”等。

导航菜单 (Menu)

配置项 menu 用于设置 导航菜单。

1
2
3
4
5
6
7
8
# Menu
menu:
    home: / || 首页  
    galleries: /galleries || 摄影  
    archives: /archives || 归档  
    tags: /tags || 标签  
    categories: /categories || 分类  
    about: /about || 关于

用 || 将内容分割为两部分，前面部分为页面 URL，后面部分为菜单中显示的名称。对于系统默认页面，如 归档（/archives）、首页（/） 等，直接添加菜单即可；对于独立页面，如 标签（tags）、分类（categories），则需先创建页面后再添加菜单。### 主题颜色可以根据个人喜好，定制主题颜色。

在配置项 color 中设置颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Color
color:
    text: '#33333D'  
    text-secondary: '#4e4e4e'  
    text-third: '#999999'  
    background: '#ffffff'  
    background-secondary: '#f6f8fa'  
    border: '#eeeeee'  
    text-dark: '#dddddd'  
    text-secondary-dark: '#9899ab'  
    text-third-dark: '#7d8594'  
    background-dark: '#1e2128'  
    background-secondary-dark: '#1a1d22'  
    border-dark: '#2b3038'  
    link: '#FF3B00'

可以使用 十六进制、rgba、颜色名称 方式，注意需要用引号包裹。
目前有两套颜色模式，分别是 浅色模式（白天） 和 深色模式（黑夜），请注意颜色搭配。link 为强调色，表现为 hover、active 等。
分享几个配色网站：中国传统颜色、日本传统颜色

站点图标

配置项 favicon 可设置站点图标，建议使用 ico 或 png 格式。

1
2
3
4
5
6
# Faviconfavicon:
  small: /images/icons/favicon-16x16.png  
  medium: /images/icons/favicon-32x32.png  
  apple_touch_icon: /images/icons/apple-touch-icon.png  
  safari_pinned_tab: /images/icons/stun-logo.svg  
  msapplication: /images/icons/favicon-144x144.png

有多种尺寸的图片需要配置，可以参考默认图标的尺寸用 PS 裁剪，或使用：图标工厂

全局字体

配置项 font 中可设置全局字体的 大小 和 风格系列。

1
2
3
4
# Font
font:
  size: 14px
  family: 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif
  • size: 字体大小。
  • family: 字体风格系列。

背景图片

配置项 background_image 可设置背景图片，直接填写图片地址即可。

1
2
# Background Image
background_image:

tips: 建议不设置背景图片，默认的 纯白背景 最搭配，背景颜色也可在 主题颜色 中设置。

加载动画 (Loading)

配置项 loading 可设置载入动画，会在 页面跳转_、_懒加载 时加载，目前仅支持图片形式。

1
2
# Loading
loading: /images/theme/loading.gif

建议使用 gif 动图，可在 LottieFiles 下载。

tips: 未来将支持自定义 css、svg 等多种方式的载入动画，敬请期待。

欢迎页面

配置项 preview 中的一些列配置可自定义欢迎页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Preview
preview:
  enable: true
  model: wave # wave cloud
  background:
    type: image # image video
    default_image:
      light: /images/theme/welcome-image.jpg
      dark: /images/theme/welcome-image.jpg
    video:
    api: # https://source.unsplash.com/random/1920x1080
    size: cover # css: background-size
    position: center # css: background-position
  motto:
    default: 我在开了灯的床头下，想问问自己的心啊。
    api: https://v1.hitokoto.cn/?encode=text&c=j
    color: '#ffffff'
  • enable: 用来 开启 / 关闭 欢迎页面。

效果模式

  • model: 设置效果模式，有 *** 波浪（wave）** 和 云层（cloud） 两种模式可选择。

欢迎图片

配置项 background 用来设置欢迎图片，其中：

  • type: 图片或视频。
  • default_image: 配置静态图片，填写静态图片 URL 即可。开启 深色模式 后支持配置 深色 / 浅色 两种模式下的背景图片。
  • video: 配置动态视频，填写视频 URL 即可。
  • api: 配置随机图片，可使用第三方 API，优先级 随机图片（api） > _静态图片（default）_。推荐 API：Unsplash、必应图片。
  • size 和 position: 设置图片的 尺寸 和 位置，参考 CSS 中的属性即可。

格言

配置项 motto 用来设置格言，其中：

  • default: 配置静态格言，填写格言文本即可。
  • api: 配置随机格言，可使用第三方 API，优先级 随机格言（api） > _静态格言（default）_。推荐 API：一言、今日诗词。
  • color 配置文字颜色。

全局搜索

前置条件：需要开启头部导航，否则会找不到入口滴。

目前仅支持静态搜索能力（渲染时生成搜索索引文件），需要安装 hexo-generator-searchdb 插件提供支持。

安装 hexo-generator-searchdb 插件：

1
$ npm install hexo-generator-searchdb --save

开启插件，在 博客配置 下新增：

1
2
3
4
5
search:
  path: /search.xml  # 索引生成路径（需要设置绝对路径，否则二级页面读不到）
  field: post  # post page all
  format: html  # 只支持 html 类型
  content: true  # 是否包含正文内容

版权信息

配置项 copyright 用来设置页面底部显示的网站版权信息，填写 文本内容 或 HTML 即可。

1
2
# Copyright
copyright: <p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p>

社交链接

配置项 social 用来配置社交链接，在页面底部以 Icon 图标的形式展示，点击即可链接第三方平台。

1
2
3
4
5
6
7
# Social
social:
  qq: tencent://message/?Menu=yes&uin=894519210 || iconQQ || '#12B7F5'
  wechat: javascript:; || iconwechat-fill || '#09BB07'
  instagram: https://www.instagram.com/izhaoo/ || iconinstagram || '#DA2E76'
  github: https://github.com/izhaoo || icongithub-fill || '#24292E'
  email: mailto:izhaoo@163.com || iconmail

配置内容分为三部分，以 || 划分。第一部分是 社交链接 ，第二部分是 图标样式（IconFont） ，第三部分是 _选中颜色（hover）_。

右下角按钮 (Fab)

配置项 fab 用于配置右下角的按钮。

1
2
3
4
# Fab (Float Action Button)
fab:
  enable: true
  always_show: false
  • enable: 设置 开启 / 关闭 按钮。
  • always_show: 设置 一直显示 / 过渡隐藏 按钮。

二维码

配置项 qrcode 用来设置 二维码，开启后点击 导航栏 左侧的图标即可显示。

1
2
3
4
5
# QR Code
qrcode:
  enable: true
  type: image # url image
  image: https://pic.izhaoo.com/weapp-code.jpg
  • enable: 设置 开启 / 关闭 二维码功能。
  • type: 设置二维码模式，有两种模式可选。url 显示当前文章链接生成的二维码；image 显示固定的二维码图片（如小程序码等）。
  • image: 选择 image 模式时需要指定图片链接。

深色模式

配置项 color_mode 用来配置 深色模式。开启后主题会根据设备系统自动切换颜色模式，用户也可以点击 导航栏 左侧的图标手动切换颜色模式，系统会暂存用户选择状态。

1
2
3
# Color Mode
color_mode:
  enable: true
  • enable: 开启 / 关闭 深色模式。

深色模式 / 浅色模式 的颜色可以参考 主题颜色 设置。

哀悼模式

在举国默哀的日子，我们可以将博客灰化，通过配置项 gray 设置。

1
2
3
# Gray (Mourning Mode)
gray:
  enable: true  #开启哀悼模式
  • enable: 开启 / 关闭 哀悼模式。

哀悼

文章配置

文章封面

单独封面

可以为每篇文章设置单独的文章封面图片，在文章 Front-matter 中添加 image 字段设置图片。

若使用图床，直接添加图片文件的 完整 URL 即可：

1
2
3
4
---
title: zhaoo - 主题文档
image: https://pic.izhaoo.com/20200421200902.jpg  #设置图床图片
---

若将图片储存在本地，现将图片文件复制到主题 ~/zhaoo/source/images 下，再添加 相对 URL 即可：

1
2
3
4
---
title: zhaoo - 主题使用文档
image: /images/20200421200902.jpg  #设置本地图片
---

默认封面

配置项 post_image 设置配置文章默认封面，就不用为每篇文章单独设置封面了：

1
2
3
4
# Post Image
post_image:
  random: galleries # local galleries
  default: /images/theme/post-image.jpg
  • random: 设置随机封面，有 galleries（相册图库） 和 local（本地图库） 两种模式。开启 相册 功能后会自动调取相册中的图片；本地图库需要新建 /_data/local_images.json 文件，填写图片 URL 列表即可。
  • default: 未设置随机封面时启用 默认封面，填写图片 URL 即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// local_images.json
[
  "https://pic.izhaoo.com/2014031601.jpg",
  "https://pic.izhaoo.com/2017071602.jpg",
  "https://pic.izhaoo.com/2017071603.jpg",
  "https://pic.izhaoo.com/2017072104.jpg",
  "https://pic.izhaoo.com/2017072705.jpg",
  "https://pic.izhaoo.com/20200421201200.jpg",
  "https://pic.izhaoo.com/20200305030152.jpg",
  "https://pic.izhaoo.com/20191211065241.jpg",
  "https://pic.izhaoo.com/20200228081718.jpg",
  "https://pic.izhaoo.com/20191211065844.jpg",
  "https://pic.izhaoo.com/20200718151924.jpg",
  "https://pic.izhaoo.com/20200718152003.jpg",
  "https://pic.izhaoo.com/20200718152045.jpg",
  "https://pic.izhaoo.com/20200718152122.jpg",
  "https://pic.izhaoo.com/20200718151427.jpg"
]

关键词

在文章 Front-matter 中添加 keywords 字段设置关键词：

1
2
title: zhaoo - 主题使用文档
keywords: hexo-theme-zhaoo, hexo, 主题, 使用文档, document

配置项 keywords 为网站设置全局关键词，每个页面都会渲染，文章中无需重复添加：

1
keywords: hexo-theme-zhaoo, hexo

文章尺寸

配置项 post_page_size 用于设置文章内容主体部分的相关尺寸。

1
2
3
# Page Size
post_page_size:
  width: 800px
  • width: 设置内容宽度。

tips: 受外部元素的限制，实际尺寸 由计算后得出，不能保证与 设定尺寸 完全相等，只能保证接近该尺寸。

图片标注

配置项 caption 用于设置 图片标注，开启后会在文章图片下方生成标注。

1
2
3
# Caption
caption:
  enable: true
  • enable: 开启 / 关闭 图片标注。

文章目录

配置项 toc 用于设置 文章目录，开启后会在文章内容右侧生成目录，点击目录可平滑到对应的标题处。

1
2
3
4
5
# TOC
toc:
  enable: true
  min_depth: 1
  max_depth: 3
  • enable: 开启 / 关闭 文章目录。
  • min_depth:
  • max_depth:

全局开启 文章目录 后，可以在文章 Front-matter 中添加 toc 字段单独控制该文章是否展示文章目录。

1
2
3
4
---
title: zhaoo - 主题文档
toc: false # 关闭文章目录
---

打赏二维码

配置项 donate 用于设置 打赏二维码，开启后可在文章下方展示二维码，扫一扫请博主喝杯咖啡吧~

1
2
3
4
5
# Donate
donate:
  enable: true
  alipay: https://pic.izhaoo.com/alipay.jpg
  wechat: https://pic.izhaoo.com/wechat.jpg
  • enable: 开启 / 关闭 打赏二维码。
  • alipay: 支付宝收款二维码，填写图片 URL。
  • wechat: 微信收款二维码，填写图片 URL。

文章版权

配置项 post_copyright 用于设置 文章版权，开启后可在文章下方展示版权信息。

1
2
3
# Copyright
post_copyright:
  enable: true
  • enable: 开启 / 关闭 文章版权信息。

全局开启 文章版权 后，可以在文章 Front-matter 中添加 copyright 字段单独控制该文章是否展示文章版权。

1
2
3
4
---
title: zhaoo - 主题文档
copyright: false # 关闭文章版权
---

文章搬运

配置项 carrier 用于开启 文章搬运 功能，方便博主们全文 “借鉴” 文章，效果如下：

文章搬运

弹窗提示

前置条件：全局开启 文章版权

1
2
3
4
# Carrier
carrier:
  enable: true
  type: markdown # markdown html text
  • enable: 开启 / 关闭 文章搬运。
  • type: 搬运模式，可选择一键复制 markdown、html、text 格式的文章。

Hexo - 开发文章搬运功能

文章置顶

找到 /node_modules/hexo-generator-index/lib/generator.js 文件，替换成如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
'use strict';
var pagination = require('hexo-pagination');
module.exports = function (locals) {
  var config = this.config;
  var posts = locals.posts;
  posts.data = posts.data.sort(function (a, b) {
    if (a.top && b.top) {
      if (a.top == b.top) return b.date - a.date;
      else return b.top - a.top;
    } else if (a.top && !b.top) {
      return -1;
    } else if (!a.top && b.top) {
      return 1;
    } else return b.date - a.date;
  });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

在文章的 Front-matter 中添加 top 字段，指定数值。数值越大，显示越靠前。

1
2
3
4
---
title: zhaoo - 主题使用文档
top: 10  #添加该字段
---

数学公式

MathJax

hexo-filter-mathjax-ssr

以 svg 的形式渲染数学公式，兼容性较好，推荐使用。

安装 MathJax 插件依赖：

1
$ npm install hexo-filter-mathjax-ssr --save

开启插件，在 博客配置 下新增：

1
2
3
mathjax:
  inlineQuote: ['']
  blockQuote: ['MATHJAX-SSR-2']

KaTex

hexo-katex

以 HTML 标签的形式渲染数学公式，渲染速度较快，语法较简单，但是兼容性不是很好。

安装渲染引擎 hexo-renderer-pandoc：

1
$ npm install hexo-renderer-pandoc --save

安装 KaTex 插件依赖：

1
$ npm install hexo-katex --save

开启插件，在 博客配置 下新增：

1
2
pandoc:
  mathEngine: katex

页面配置

相册页面

【瀑布流风格相册】由 AmiKara 友情贡献~

执行以下命令创建相册页面，会在 source 目录生成 galleries/index.md 文件：

1
$ hexo new page galleries  #创建相册页面

打开 source/galleries/index.md 文件，设置 Front-matter ，开启相册页面：

1
2
3
4
---
title: 相册
layout: "galleries"
---

参考 导航菜单 设置相册页面的导航：

1
2
menu:
  galleries: /galleries || 相册

配置项 galleries 用于开启相册功能：

1
2
3
4
5
6
galleries:
  enable: true
  title: 相册
  subtitle: Galleries
  type: waterfull # waterful | grid
  columns: 3
  • enable: 开启 / 关闭 相册功能。
  • title: 相册分类页面标题。
  • subtitle 相册分类页面副标题。
  • type: 相册显示风格，有 瀑布流 和 正方形 两种形式。
  • columns: 相册列数。

在 /_data 目录下新建 galleries.json 文件，创建相册分类目录及图片内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[{
  "name": "colorful",  //相册名称
  "cover": "/images/theme/post-image.jpg",  //相册封面
  "description": "君未看花时，花与君同寂；君来看花日，花色一时明。",  //相册介绍
  "photos": [  //图片内容
    "/images/theme/post-image.jpg",
    "/images/theme/post-image.jpg",
    "/images/theme/post-image.jpg",
    "/images/theme/post-image.jpg"
  ]
}, {
  "name": "记事",
  "cover": "/images/theme/post-image.jpg",
  "description": "翻开随身携带的记事本，写着许多事都是关于你。",
  "photos": [
    "/images/theme/post-image.jpg",
    "/images/theme/post-image.jpg",
    "/images/theme/post-image.jpg",
    "/images/theme/post-image.jpg"
  ]
}]

在 /source/galleries/ 目录下 新建文件夹 ，命名需要和 json 中的 name 字段对应，例如：_colorful_、_记事_。 在文件夹下新建 index.md 文件，内容如下：

1
2
3
4
---
title: 记事  #名称也需要对应
layout: "gallery"
---

步骤可能有点难以理解，最后放几张截图，比较直观：

gallery-1

gallery-2

gallery-3

gallery-4

也可以参考 /_example/source 中的相关栗子。

归档页面

参考 导航菜单 设置归档页面的导航，系统会按文章创建时间自动归档。

1
2
menu:
  archives: /archives || 归档

标签页面

执行以下命令创建标签页面，会在 source 目录生成 tags/index.md 文件：

1
$ hexo new page tags  #创建标签页面

打开 source/tags/index.md 文件，设置 Front-matter ，开启标签页面：

1
2
3
4
5
---
title: 标签
type: "tags"
layout: "tags"
---

参考 导航菜单 设置标签页面的导航：

1
2
menu:
  tags: /tags || 标签

创建文章时，在文章的 Front-matter 中使用 tags 字段添加标签即可：

1
2
3
4
---
title: zhaoo - 主题使用文档
tags: [Hexo, 主题]  #设置标签
---

分类页面

同标签页面，更改一些关键词即可。

执行以下命令创建分类页面，会在 source 目录生成 categories/index.md 文件：

1
$ hexo new page categories  #创建分类页面

打开 source/categories/index.md 文件，设置 Front-matter ，开启分类页面：

1
2
3
4
5
---
title: 标签
type: "categories"
layout: "categories"
---

参考 导航菜单 设置分类页面的导航：

1
2
menu:
  categories: /categories || 分类

创建文章时，在文章的 Front-matter 中使用 categories 字段添加标签即可：

1
2
3
4
5
6
---
title: zhaoo - 主题使用文档
categories:  #设置分类
- 项目
- 博客
---

关于页面

执行以下命令创建关于页面，会在 source 目录生成 about/index.md 文件：

1
$ hexo new page about  #创建关于页面

打开 source/about/index.md 文件，设置 Front-matter ，开启关于页面：

1
2
3
4
5
---
title: 标签
type: "about"
layout: "about"
---

参考 导航菜单 设置关于页面的导航：

1
2
menu:
  about: /about || 关于

在 source/about/index.md 中编写关于内容，如同写文章一样。

tips: 建议在 关于页面 关闭 文章目录 和 文章版权 功能，在 Front-matter 中添加 toc 和 copyright 字段都设置为 false 即可。

插件配置

评论系统

配置项 comments 用于配置评论系统，目前支持 Gitalk、Valine、畅言 三种评论系统。

1
2
3
4
5
# Comment
comments:
  enable: true
  type: valine
  button: true
  • enable: 开启 / 关闭 评论功能。
  • type: 开启哪种评论系统，需要配置对应的评论系统。（参考下文）
  • button: 显示 / 隐藏 评论按钮，隐藏按钮后将直接展示评论。

Gitalk

Gitalk 基于 GitHub 存储评论内容，优点是支持 GitHub 直接登录；缺点是需要 科学上网 才能访问，水土不服。

Gitalk 演示

首先需要在 GitHub 创建一个仓库，如有 GitHub Pages 也可以共用一个仓库。

创建仓库

接着创建一个 Github Application，填写相应的参数。创建完成后会生成 clientID 和 clientSecret，记录一下。

创建应用

配置项 gitalk 用于配置 Gitalk。

1
2
3
4
5
6
7
# Gitalk
gitalk:
  owner:
  repo:
  admin:
  clientID:
  clientSecret:
  • owner: GitHub 的用户名。
  • repo: 创建的仓库名称。
  • admin: GitHub 的用户名。
  • clientID: 应用创建后生成。
  • clientSecret: 应用创建后生成。

Valine

Valine 是基于 LeanCloud 实现的评论系统，小清新风格。

Valine 演示

首先在 LeanCloud 注册一个账号，并创建一个应用（开发版）。

进入应用管理界面，点击【存储】->【创建 Class】，名称为 Comment，访问权限为 所有用户，写入权限为 限制写入。

在【设置】->【应用 Keys】中复制 appId 和 appKey。

配置项 valine 用于设置 Valine 评论系统。

1
2
3
4
5
6
7
8
# Valine
valine:
  appId:
  appKey:
  placeholder: 雁过留痕
  avatar: mp
  pageSize: 10
  lang: zh-CN
  • enable: 开启 / 关闭 Valine。
  • appId: 填入刚才得到的 appId。
  • appKey: 填入刚才得到的 appKey。
  • placeholder: 未输入评论时的占位文字。
  • mp: 默认头像，参考 Valine 头像设置。
  • pageSize: 每页评论数量。
  • lang: 系统语言。

Valine

畅言

畅言 是搜狐家的评论系统，优点是支持 QQ、手机、邮箱 等多种登录方式，接地气；个人感觉 UI 不是我的菜。

畅言演示

在 畅言 注册账号，进入后台创建一个站点，在【后台总览】记录一下 APP ID 和 APP KEY。

配置项 changyan 用于设置 畅言评论。

1
2
3
4
# ChangYan
changyan:
  appId:
  conf:
  • appId: 生成的 APP ID。
  • conf: 生成的 APP KEY。

畅言的相关配置在【管理后台】设置，可参考官方文档进行配置。

客户沟通 (DaoVoice)

DaoVoice 是一款客户沟通插件，支持即时通讯、留言等形式反馈消息。

DaoVoice 演示

因为官方的 Fab 按钮 和 主题 Fab 按钮会重叠，所以作者同学把他集成到主题 Fab 中了。

官网 Fab

主题 Fab

首先在 DaoVoice 官网上注册一个账号。

在【安装应用】页面，复制 app_id。

appid

配置项 daovoice 配置应用。

1
2
3
4
# Daovoice
daovoice:
  enable: true
  appId: abcdefg  #你的 app_id
  • enable: 开启 / 关闭 DaoVoice。
  • appId: 填写之前复制的 app_id。

点击 Fab 中的 消息图标 即可打开。

意见反馈平台 (腾讯兔小巢)

腾讯兔小巢 是一款用户意见反馈平台。

首先在 腾讯兔小巢 官网上注册一个产品，在 产品设置 中复制 ID。

配置项 tencentChao 用于配置兔小巢。

1
2
3
4
# Tencent Chao
tencentChao:
  enable: false
  appId: # app_id
  • enable: 开启 / 关闭 兔小巢。
  • appId: 填写之前复制的 ID。

页面统计 (LeanCloud)

LeanCloud 是一款 ServerLess 服务，主题中被用来统计每个页面的访问量，并在页面中展示。

首先在 LeanCloud 注册一个账号，并创建一个应用（开发版）。

进入应用管理界面，点击【存储】->【创建 Class】，名称为 Counter，访问权限为 所有用户，写入权限为 限制写入，如下：

创建 LeanCloud

在【设置】->【应用 Keys】中复制 appId 和 appKey。

配置项 leancloud 用于设置 LeanCloud。

1
2
3
4
5
6
# LeanCloud
leancloud:
  enable: true
  appId:
  appKey:
  serverURLs: https://leancloud.cn/
  • enable: 开启 / 关闭 LeanCloud。
  • appId: 填入刚才得到的 appId。
  • appKey: 填入刚才得到的 appKey。
  • serverURLs: 服务路径不用改，保持 https://leancloud.cn/ 就可以了。

图片懒加载 (LazyLoad)

配置项 lazyload 用于配置图片懒加载。

1
2
3
4
5
# Lazyload
lazyload:
  enable: true
  only_post: false
  loading: /images/theme/loading.gif
  • enable: 开启 / 关闭 图片懒加载。
  • onlyPost: 只对对文章中的图片开启懒加载功能。
  • loading: 加载动画，默认是开启 placeholder（占位图） 的，可以在网上下载喜欢的动图，填写 图片URL 即可。

图片灯箱 (FancyBox)

配置项 FancyBox 用于设置图片灯箱效果，开启后点击文章中的图片会以幻灯片的形式播放。

1
fancybox: true

无刷新加载 (PJAX)

配置项 pjax 用于设置无刷新加载，开启后让你的博客嗖嗖嗖~

1
pjax: true

tips: 该功能暂时不稳定，会引起一些特效、功能的异常，暂时不建议开启。

代码高亮 (HighLight)

在 博客配置 中开启代码高亮效果：

1
2
3
4
5
6
highlight:
  enable: true  #启用代码高亮效果
  line_number: true
  auto_detect: true
  hljs: true
  tab_replace:

配置项 highlight 用于设置代码高亮效果。

1
2
3
4
5
6
# HighLight
highlight:
  enable: true
  style: # https://highlightjs.org/static/demo/
    light: Xcode
    dark: Solarized Dark
  • enable: 开启 / 关闭 代码高亮。
  • style -> light: 浅色模式 时的高亮样式。
  • style -> dark: 深色模式 时的高亮样式。

可以到 官网 预览高亮效果，填写样式名称即可。

SEO

配置项 seo 用于设置 SEO（网站关键词优化）功能。

1
2
3
# SEO
seo:
  baidu_auto_push: true

网页统计

配置项 analytics 用于设置网站统计。

1
2
3
4
5
6
# Analytics
analytics:
  baidu: # id
  google: # id
  tencent: # id
  cnzz: # id

在对应的数据统计官网注册网站应用，复制对应的 id 填写即可。

脚本配置

CDN

对于外部静态文件（CSS 或 JS），可以使用第三方 CDN 库进行优化加速。

配置项 vendors 用于设置静态库引入位置，直接输入 URL 即可。您可以保持默认配置（BootCDN）, 留空则从本地引入。

1
2
3
4
5
6
7
8
vendors:
  jquery_js: https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
  fancybox_js: https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js
  pjax_js: https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js
  lazyload_js: https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js
  fancybox_css: https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css
  highlight_css: https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css
  iconfont_css: //at.alicdn.com/t/font_1445822_58xq2j9v1id.css

脚本埋点

有时候我们需要埋入一些第三方脚本，例如 百度统计、百度SEO 等，主题在 头部 和 尾部 分别开放了埋点入口，通过配置项 custom 进行配置。

1
2
3
4
5
6
# Custom
custom:
  head:
  foot:
  css:
  js:
  • head: 引入头部的代码。
  • foot: 引入尾部的代码。
  • css: 外部引入的 CSS 链接。
  • js: 外部引入的 JS 链接。
查看评论