Hexo主题zhao使用安装方法

date
Aug 25, 2024
slug
example-022
status
Published
tags
hexo
主题
summary
Hexo主题zhao使用安装方法
type
Post
网址
category
博客搭建
URL

一、使用方法

  1. 安装 zhao 主题，项目地址：https://github.com/zhaoo/hexo-theme-zhaoo
  1. 检查\blog-demo\themes里是否已有zhao文件夹
  1. 然后在 blog-demo文件下的_config.yml 中将主题改为：

二、博客配置

编辑 Hexo 根目录下的 _config.yml 文件，配置博客网站相关功能，对整个网站生效。
建议将文章数量改为9篇：
启用代码高亮效果：
编辑 zhaoo 主题目录下的 _config.yml 文件，配置主题相关功能，只对主题生效。
建议参考 _config.yml 和本文进行配置，具体配置内容见下文。

主题更新

进入到 zhaoo 主题目录：
从 GitHub 获取更新：

全局配置

头部导航 (NavBar)

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

导航菜单 (Menu)

配置项 menu 用于设置 导航菜单。
用 || 将内容分割为两部分，前面部分为页面 URL，后面部分为菜单中显示的名称。
对于系统默认页面，如 归档（/archives）、首页（/） 等，直接添加菜单即可；对于独立页面，如 标签（tags）、分类（categories），则需先创建页面后再添加菜单。

主题颜色

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

站点图标

配置项 favicon 可设置站点图标，建议使用 ico 或 png 格式。
有多种尺寸的图片需要配置，可以参考默认图标的尺寸用 PS 裁剪，或使用：图标工厂

全局字体

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

背景图片

配置项 background_image 可设置背景图片，直接填写图片地址即可。
tips: 建议不设置背景图片，默认的 纯白背景 最搭配，背景颜色也可在 主题颜色 中设置。

加载动画 (Loading)

配置项 loading 可设置载入动画，会在 页面跳转、懒加载 时加载，目前仅支持图片形式。
建议使用 gif 动图，可在 LottieFiles 下载。
tips: 未来将支持自定义 css、svg 等多种方式的载入动画，敬请期待。

欢迎页面

配置项 preview 中的一些列配置可自定义欢迎页面。
  • 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 修改为
目前仅支持静态搜索能力（渲染时生成搜索索引文件），需要安装 hexo-generator-searchdb 插件提供支持。
安装 hexo-generator-searchdb 插件：
开启插件，在 blog-demo文件夹内打开_config.yml 下新增：

版权信息

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

社交链接

配置项 social 用来配置社交链接，在页面底部以 Icon 图标的形式展示，点击即可链接第三方平台。
配置内容分为三部分，以 || 划分。第一部分是 社交链接 ，第二部分是 图标样式（IconFont） ，第三部分是 选中颜色（hover）。

右下角按钮 (Fab)

配置项 fab 用于配置右下角的按钮。
  • enable: 设置 开启 / 关闭 按钮。
  • always_show: 设置 一直显示 / 过渡隐藏 按钮。

二维码

配置项 qrcode 用来设置 二维码，开启后点击 导航栏 左侧的图标即可显示。
  • enable: 设置 开启 / 关闭 二维码功能。
  • type: 设置二维码模式，有两种模式可选。url 显示当前文章链接生成的二维码；image 显示固定的二维码图片（如小程序码等）。
  • image: 选择 image 模式时需要指定图片链接。

深色模式

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

哀悼模式

在举国默哀的日子，我们可以将博客灰化，通过配置项 gray 设置。
  • enable: 开启 / 关闭 哀悼模式。
notion image

文章配置

文章封面

单独封面

可以为每篇文章设置单独的文章封面图片，在文章 Front-matter 中添加 image 字段设置图片。
若使用图床，直接添加图片文件的 完整URL 即可：
若将图片储存在本地，现将图片文件复制到主题 ~/zhaoo/source/images 下，再添加 相对URL 即可：

默认封面

配置项 post_image 设置配置文章默认封面，就不用为每篇文章单独设置封面了：
  • random: 设置随机封面，有 galleries（相册图库） 和 local（本地图库） 两种模式。开启 相册 功能后会自动调取相册中的图片；本地图库需要新建 /_data/local_images.json 文件，填写图片 URL 列表即可。
  • default: 未设置随机封面时启用 默认封面，填写图片 URL 即可。

关键词

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

文章尺寸

配置项 post_page_size 用于设置文章内容主体部分的相关尺寸。
  • width: 设置内容宽度。
tips: 受外部元素的限制，实际尺寸 由计算后得出，不能保证与 设定尺寸 完全相等，只能保证接近该尺寸。

图片标注

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

文章目录

配置项 toc 用于设置 文章目录，开启后会在文章内容右侧生成目录，点击目录可平滑到对应的标题处。
  • enable: 开启 / 关闭 文章目录。
  • min_depth:
  • max_depth:
全局开启 文章目录 后，可以在文章 Front-matter 中添加 toc 字段单独控制该文章是否展示文章目录。

打赏二维码

配置项 donate 用于设置 打赏二维码，开启后可在文章下方展示二维码，扫一扫请博主喝杯咖啡吧~
  • enable: 开启 / 关闭 打赏二维码。
  • alipay: 支付宝收款二维码，填写图片 URL。
  • wechat: 微信收款二维码，填写图片 URL。

文章版权

配置项 post_copyright 用于设置 文章版权，开启后可在文章下方展示版权信息。
  • enable: 开启 / 关闭 文章版权信息。
全局开启 文章版权 后，可以在文章 Front-matter 中添加 copyright 字段单独控制该文章是否展示文章版权。

文章搬运

配置项 carrier 用于开启 文章搬运 功能，方便博主们全文“借鉴”文章，效果如下：
全局开启 文章版权
  • enable: 开启 / 关闭 文章搬运。
  • type: 搬运模式，可选择一键复制 markdown、html、text 格式的文章。

文章置顶

找到 /node_modules/hexo-generator-index/lib/generator.js 文件，替换成如下代码：
在文章的 Front-matter 中添加 top 字段，指定数值。数值越大，显示越靠前。

数学公式

MathJax

hexo-filter-mathjax-ssr
以 svg 的形式渲染数学公式，兼容性较好，推荐使用。
安装 MathJax 插件依赖：
开启插件，在 博客配置 下新增：

KaTex

hexo-katex
以 HTML 标签的形式渲染数学公式，渲染速度较快，语法较简单，但是兼容性不是很好。
安装渲染引擎 hexo-renderer-pandoc：
安装 KaTex 插件依赖：
开启插件，在 博客配置 下新增：

页面配置

相册页面

【瀑布流风格相册】由 AmiKara 友情贡献~
执行以下命令创建相册页面，会在 source 目录生成 galleries/index.md 文件：
打开 source/galleries/index.md 文件，设置 Front-matter ，开启相册页面：
参考 导航菜单 设置相册页面的导航：
配置项 galleries 用于开启相册功能：
  • enable: 开启 / 关闭 相册功能。
  • title: 相册分类页面标题。
  • subtitle 相册分类页面副标题。
  • type: 相册显示风格，有 瀑布流 和 正方形 两种形式。
  • columns: 相册列数。
在 blog-demo\themes\zhaoo\_example\source\_data 目录下新建 galleries.json 文件，创建相册分类目录及图片内容：
在 /source/galleries/ 目录下 新建文件夹 ，命名需要和 json 中的 name 字段对应，例如：colorful、记事。 在文件夹下新建 index.md 文件，内容如下：
步骤可能有点难以理解，最后放几张截图，比较直观：
notion image
notion image
notion image
notion image
也可以参考 /_example/source 中的相关栗子。

归档页面

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

标签页面

执行以下命令创建标签页面，会在 source 目录生成 tags/index.md 文件：
打开 source/tags/index.md 文件，设置 Front-matter ，开启标签页面：
参考 导航菜单 设置标签页面的导航：
创建文章时，在文章的 Front-matter 中使用 tags 字段添加标签即可：

分类页面

同标签页面，更改一些关键词即可。
执行以下命令创建分类页面，会在 source 目录生成 categories/index.md 文件：
打开 source/categories/index.md 文件，设置 Front-matter ，开启分类页面：
参考 导航菜单 设置分类页面的导航：
创建文章时，在文章的 Front-matter 中使用 categories 字段添加标签即可：

关于页面

执行以下命令创建关于页面，会在 source 目录生成 about/index.md 文件：
打开 source/about/index.md 文件，设置 Front-matter ，开启关于页面：
参考 导航菜单 设置关于页面的导航：
在 source/about/index.md 中编写关于内容，如同写文章一样。
tips: 建议在 关于页面 关闭 文章目录 和 文章版权 功能，在 Front-matter 中添加 toc 和 copyright 字段都设置为 false 即可。

插件配置

评论系统

配置项 comments 用于配置评论系统，目前支持 Gitalk、Valine、畅言 三种评论系统。
  • enable: 开启 / 关闭 评论功能。
  • type: 开启哪种评论系统，需要配置对应的评论系统。（参考下文）
  • button: 显示 / 隐藏 评论按钮，隐藏按钮后将直接展示评论。

Valine

Valine 是基于 LeanCloud 实现的评论系统，小清新风格。
首先在 LeanCloud 注册一个账号，并创建一个应用（开发版）。
进入应用管理界面，点击【存储】->【创建Class】，名称为 Comment，访问权限为 所有用户，写入权限为 限制写入。
在【设置】->【应用Keys】中复制 appId 和 appKey。
配置项 valine 用于设置 Valine 评论系统。
  • enable: 开启 / 关闭 Valine。
  • appId: 填入刚才得到的 appId。
  • appKey: 填入刚才得到的 appKey。
  • placeholder: 未输入评论时的占位文字。
  • pageSize: 每页评论数量。
  • lang: 系统语言。

图片灯箱 (FancyBox)

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

无刷新加载 (PJAX)

配置项 pjax 用于设置无刷新加载，开启后让你的博客嗖嗖嗖~
tips: 该功能暂时不稳定，会引起一些特效、功能的异常，暂时不建议开启。

代码高亮 (HighLight)

在 博客配置 中开启代码高亮效果：
配置项 highlight 用于设置代码高亮效果。
  • enable: 开启 / 关闭 代码高亮。
  • style -> light: 浅色模式 时的高亮样式。
  • style -> dark: 深色模式 时的高亮样式。
可以到 官网 预览高亮效果，填写样式名称即可。

SEO

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

网页统计

配置项 analytics 用于设置网站统计。
在对应的数据统计官网注册网站应用，复制对应的 id 填写即可。

脚本配置

CDN

对于外部静态文件（CSS 或 JS），可以使用第三方 CDN 库进行优化加速。
配置项 vendors 用于设置静态库引入位置，直接输入 URL 即可。您可以保持默认配置（BootCDN）,留空则从本地引入。

脚本埋点

有时候我们需要埋入一些第三方脚本，例如 百度统计、百度SEO 等，主题在 头部 和 尾部 分别开放了埋点入口，通过配置项 custom 进行配置。
  • head: 引入头部的代码。
  • foot: 引入尾部的代码。
  • css: 外部引入的 CSS 链接。
  • js: 外部引入的 JS 链接。
 

© Kadriye 2021 - 2024