Kadriye's Blog
Hexo主题zhaoo使用安装方法
Kadriye Lv3
  2024-08-25 18:07:26   2024-09-21 10:10:02

一、使用方法

  1. 安装 zhao 主题，项目地址：https://github.com/zhaoo/hexo-theme-zhaoo
1
git clone https://github.com/izhaoo/hexo-theme-zhaoo.git themes/zhaoo

Plain text

Copy

  1. 检查\blog-demo\themes里是否已有zhao文件夹

  2. 然后在 blog-demo文件下的_config.yml 中将主题改为：

1
theme: zhaoo

Plain text

Copy

二、博客配置

编辑 Hexo 根目录下的 _config.yml 文件，配置博客网站相关功能，对整个网站生效。

建议将文章数量改为9篇：

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

Plain text

Copy

启用代码高亮效果：

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

Plain text

Copy

编辑 zhaoo 主题目录下的 _config.yml 文件，配置主题相关功能，只对主题生效。

建议参考 _config.yml 和本文进行配置，具体配置内容见下文。

主题更新

进入到 zhaoo 主题目录：

1
$cd themes/zhaoo

Shell

Copy

从 GitHub 获取更新：

1
$ git pull

Shell

Copy

全局配置

头部导航 (NavBar)

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

1
2
3
navbar:
enable:true
back_home:true

Plain text

Copy

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||关于

Plain text

Copy

用 || 将内容分割为两部分，前面部分为页面 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'

Plain text

Copy

可以使用 十六进制、rgba、颜色名称 方式，注意需要用引号包裹。

目前有两套颜色模式，分别是 浅色模式（白天） 和 深色模式（黑夜），请注意颜色搭配。link 为强调色，表现为 hover、active 等。

分享几个配色网站：中国传统颜色、日本传统颜色

站点图标

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

1
2
3
4
5
6
7
# Favicon
favicon:
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

Plain text

Copy

有多种尺寸的图片需要配置，可以参考默认图标的尺寸用 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

Plain text

Copy

  • size: 字体大小。

  • family: 字体风格系列。

背景图片

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

1
2
# Background Image
background_image:

Plain text

Copy

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

加载动画 (Loading)

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

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

Plain text

Copy

建议使用 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'

Plain text

Copy

  • 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 配置文字颜色。

全局搜索

在zhaoo主题文件夹内打开_config.yml找到search 修改为

1
2
3
# Search
search:
  enable: true

Plain text

Copy

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

安装 hexo-generator-searchdb 插件：

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

Shell

Copy

开启插件，在 blog-demo文件夹内打开_config.yml 下新增：

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

Plain text

Copy

版权信息

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

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

Plain text

Copy

社交链接

配置项 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

Plain text

Copy

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

右下角按钮 (Fab)

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

1
2
3
4
# Fab (Float Action Button)
fab:
enable:true
always_show:false

Plain text

Copy

  • 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

Plain text

Copy

  • enable: 设置 开启 / 关闭 二维码功能。

  • type: 设置二维码模式，有两种模式可选。url 显示当前文章链接生成的二维码；image 显示固定的二维码图片（如小程序码等）。

  • image: 选择 image 模式时需要指定图片链接。

深色模式

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

1
2
3
# Color Mode
color_mode:
enable:true

Plain text

Copy

  • enable: 开启 / 关闭 深色模式。

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

哀悼模式

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

1
2
3
# Gray (Mourning Mode)
gray:
enable:true#开启哀悼模式

Plain text

Copy

  • enable: 开启 / 关闭 哀悼模式。

notion image

文章配置

文章封面

单独封面

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

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

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

Markdown

Copy

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

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

Markdown

Copy

默认封面

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

1
2
3
4
# Post Image
post_image:
random:galleries# local galleries
default:/images/theme/post-image.jpg

Plain text

Copy

  • 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"
]

JSON

Copy

关键词

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

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

Markdown

Copy

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

1
keywords:hexo-theme-zhaoo,hexo

Plain text

Copy

文章尺寸

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

1
2
3
# Page Size
post_page_size:
width:800px

Plain text

Copy

  • width: 设置内容宽度。

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

图片标注

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

1
2
3
# Caption
caption:
enable:true

Plain text

Copy

  • enable: 开启 / 关闭 图片标注。

文章目录

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

1
2
3
4
5
# TOC
toc:
enable:true
min_depth:1
max_depth:3

Plain text

Copy

  • enable: 开启 / 关闭 文章目录。

  • min_depth:

  • max_depth:

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

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

Markdown

Copy

打赏二维码

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

1
2
3
4
5
# Donate
donate:
enable:true
alipay:https://pic.izhaoo.com/alipay.jpg
wechat:https://pic.izhaoo.com/wechat.jpg

Plain text

Copy

  • enable: 开启 / 关闭 打赏二维码。

  • alipay: 支付宝收款二维码，填写图片 URL。

  • wechat: 微信收款二维码，填写图片 URL。

文章版权

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

1
2
3
# Copyright
post_copyright:
enable:true

Plain text

Copy

  • enable: 开启 / 关闭 文章版权信息。

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

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

Markdown

Copy

文章搬运

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

全局开启 文章版权

1
2
3
4
# Carrier
carrier:
enable:true
type:markdown# markdown html text

Plain text

Copy

  • enable: 开启 / 关闭 文章搬运。

  • type: 搬运模式，可选择一键复制 markdown、html、text 格式的文章。

文章置顶

找到 /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;
elsereturn b.top - a.top;
    }elseif (a.top && !b.top) {
return -1;
    }elseif (!a.top && b.top) {
return1;
    }elsereturn 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
    }
  });
};

JavaScript

Copy

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

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

Markdown

Copy

数学公式

MathJax

hexo-filter-mathjax-ssr

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

安装 MathJax 插件依赖：

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

Shell

Copy

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

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

Plain text

Copy

KaTex

hexo-katex

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

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

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

Shell

Copy

安装 KaTex 插件依赖：

1
$ npm install hexo-katex --save

Shell

Copy

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

1
2
pandoc:
mathEngine:katex

Plain text

Copy

页面配置

相册页面

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

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

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

Shell

Copy

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

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

Markdown

Copy

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

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

Plain text

Copy

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

1
2
3
4
5
6
galleries:
enable:true
title:相册
subtitle:Galleries
type:waterfull# waterful | grid
columns:3

Plain text

Copy

  • enable: 开启 / 关闭 相册功能。

  • title: 相册分类页面标题。

  • subtitle 相册分类页面副标题。

  • type: 相册显示风格，有 瀑布流 和 正方形 两种形式。

  • columns: 相册列数。

在 blog-demo\themes\zhaoo_example\source_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"
  ]
}]

JSON

Copy

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

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

Markdown

Copy

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

notion image

notion image

notion image

notion image

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

归档页面

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

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

Plain text

Copy

标签页面

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

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

Shell

Copy

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

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

Markdown

Copy

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

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

Plain text

Copy

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

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

Markdown

Copy

分类页面

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

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

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

Shell

Copy

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

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

Markdown

Copy

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

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

Plain text

Copy

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

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

Markdown

Copy

关于页面

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

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

Shell

Copy

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

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

Markdown

Copy

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

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

Plain text

Copy

在 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

Plain text

Copy

  • enable: 开启 / 关闭 评论功能。

  • type: 开启哪种评论系统，需要配置对应的评论系统。（参考下文）

  • button: 显示 / 隐藏 评论按钮，隐藏按钮后将直接展示评论。

Valine

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

首先在 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

Plain text

Copy

  • enable: 开启 / 关闭 Valine。

  • appId: 填入刚才得到的 appId。

  • appKey: 填入刚才得到的 appKey。

  • placeholder: 未输入评论时的占位文字。

  • mp: 默认头像，参考 Valine头像设置。

  • pageSize: 每页评论数量。

  • lang: 系统语言。

图片灯箱 (FancyBox)

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

1
fancybox:true

Plain text

Copy

无刷新加载 (PJAX)

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

1
pjax:true

Plain text

Copy

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

代码高亮 (HighLight)

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

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

Plain text

Copy

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

1
2
3
4
5
6
# HighLight
highlight:
enable:true
style:# https://highlightjs.org/static/demo/
light:Xcode
dark:SolarizedDark

Plain text

Copy

  • enable: 开启 / 关闭 代码高亮。

  • style -> light: 浅色模式 时的高亮样式。

  • style -> dark: 深色模式 时的高亮样式。

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

SEO

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

1
2
3
# SEO
seo:
baidu_auto_push:true

Plain text

Copy

网页统计

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

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

Plain text

Copy

在对应的数据统计官网注册网站应用，复制对应的 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

Plain text

Copy

脚本埋点

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

1
2
3
4
5
6
# Custom
custom:
head:
foot:
css:
js:

Plain text

Copy

  • head: 引入头部的代码。

  • foot: 引入尾部的代码。

  • css: 外部引入的 CSS 链接。

  • js: 外部引入的 JS 链接。

 评论
评论插件加载失败
正在加载评论插件
  1. 一、使用方法
  2. 二、博客配置
    1. 主题更新
    2. 全局配置
      1. 头部导航 (NavBar)
      2. 导航菜单 (Menu)
      3. 主题颜色
      4. 站点图标
      5. 全局字体
      6. 背景图片
      7. 加载动画 (Loading)
      8. 欢迎页面
      9. 效果模式
      10. 欢迎图片
      11. 格言
      12. 全局搜索
      13. 版权信息
      14. 社交链接
      15. 右下角按钮 (Fab)
      16. 二维码
      17. 深色模式
      18. 哀悼模式
    3. 文章配置
      1. 文章封面
      2. 单独封面
      3. 默认封面
      4. 关键词
      5. 文章尺寸
      6. 图片标注
      7. 文章目录
      8. 打赏二维码
      9. 文章版权
      10. 文章搬运
      11. 文章置顶
      12. 数学公式
      13. MathJax
      14. KaTex
    4. 页面配置
      1. 相册页面
      2. 归档页面
      3. 标签页面
      4. 分类页面
      5. 关于页面
    5. 插件配置
      1. 评论系统
      2. Valine
      3. 图片灯箱 (FancyBox)
      4. 无刷新加载 (PJAX)
      5. 代码高亮 (HighLight)
      6. SEO
      7. 网页统计
    6. 脚本配置
      1. CDN
      2. 脚本埋点
  1. 一、使用方法
  2. 二、博客配置
    1. 主题更新
    2. 全局配置
      1. 头部导航 (NavBar)
      2. 导航菜单 (Menu)
      3. 主题颜色
      4. 站点图标
      5. 全局字体
      6. 背景图片
      7. 加载动画 (Loading)
      8. 欢迎页面
      9. 效果模式
      10. 欢迎图片
      11. 格言
      12. 全局搜索
      13. 版权信息
      14. 社交链接
      15. 右下角按钮 (Fab)
      16. 二维码
      17. 深色模式
      18. 哀悼模式
    3. 文章配置
      1. 文章封面
      2. 单独封面
      3. 默认封面
      4. 关键词
      5. 文章尺寸
      6. 图片标注
      7. 文章目录
      8. 打赏二维码
      9. 文章版权
      10. 文章搬运
      11. 文章置顶
      12. 数学公式
      13. MathJax
      14. KaTex
    4. 页面配置
      1. 相册页面
      2. 归档页面
      3. 标签页面
      4. 分类页面
      5. 关于页面
    5. 插件配置
      1. 评论系统
      2. Valine
      3. 图片灯箱 (FancyBox)
      4. 无刷新加载 (PJAX)
      5. 代码高亮 (HighLight)
      6. SEO
      7. 网页统计
    6. 脚本配置
      1. CDN
      2. 脚本埋点