Awesome
halo-theme-higan-hz
说明
该主题是 guqing 的 halo-theme-higan 进行了定制化修改后的主题
更激进的修改,更高的配置自由度!
主题交流群(QQ):694413711
特色功能概要
- 可自定义更多内容
- 页面样式
- 固定文字
- 修复错误
- 支持更多特色功能
- 防止站点被恶意镜像
- CSP: upgrade-insecure-requests
- 文章页标题自定义
- 完善的多语言支持(多语言文字支持,多语言菜单支持,详情请见文档i18n 支持指南)
- 更多功能等您来探索...
作者的碎碎语
如果你喜欢这个主题,就给项目点个 star 吧
用爱发电,你的 star 和支持就是我更新的动力!
欢迎大家加入主题交流群
如果你想支持我也可以进群交流,让我知道这个主题除了我自己还有人在用 :)
欢迎在此项目基础上 fork,如果你能给我提个 issue 就更好了,不论多么诡谲的需求我都会尝试添加的 ^_^
文档版本: 1.12.0
(如此处文档版本小于您正在使用的主题版本,说明您正在阅读一份过时的文档,请到项目原地址阅读最新版本。)
目录
- halo-theme-higan-hz
i18n 支持指南
站点默认语言标识
修改 “全局-默认页面语言”,详情请见增加于“全局”
修改文章页面语言标识
详情请见 增加于文章元数据
修改分类页面语言标识
详情请见 增加于分类元数据
修改标签页面语言标识
详情请见 增加于标签元数据
修改独立页面语言标识
详情请见 增加于页面元数据
修改页面固定文字(修改语言文件)
请到 halo 主题目录(themes),找到 howiehz-higan 文件夹里的 i18n 文件夹,找到对应语言的 properties 文件,修改保存即可(如中文是 zh.properties)
多语言菜单使用指南
(注:按 f12 打开开发者控制台,上面选择控制台,输入 navigator.language 后回车即可查看你浏览器的 navigator.language 值)
启用“全局-多语言菜单支持”选项后,主菜单应设置形如以下形式(注:“zh_CN”项可选择自定义链接,链接为 /,名称为 zh_CN。其中名称为关键设置,其他不影响)
- zh_CN
- 首页
- 关于
- en_US
- Home
- About
- defalut
- Home
- About
启用“全局-多语言菜单前缀匹配模式”,启用此项将允许菜单名符合 navigator.language 值前缀即显示,而无需完全匹配。(注:开启了这项之后,下面的“zh”可匹配 zh_CN,zh_TW 等 navigator.language 值。) 以上菜单可改为:
- zh
- 首页
- 关于
- en
- Home
- About
- defalut
- Home
- About
“默认多语言菜单名称”默认值为 defalut,你也可以设定为如 zh_CN,但是要注意这里是完全匹配菜单名,即使开启了“多语言菜单前缀匹配模式”。 默认菜单将在没有菜单成功匹配的时候显示。
相较于原始主题 最新开发版 的修改
原主题最新版本为:v2.9.0
而本主题修改基于最新开发版:上游提交日志
样式修复
- 移除导航栏文字前出现的空白 guqing/halo-theme-higan#113
- 使用 PostCSS + Tailwind CSS + daisyUI 重构,修复上游标注在标签的 class 内但没有正常引入的样式,以及没有正常工作的样式。
不可配置的样式修改
如果添加的样式修改是可被配置的(如可修改,可关闭),则不会被列举在此处
- 新增文章顶部分享栏分享方式: QQ 空间
- 修改文章顶部分享栏 Twitter 的链接为 X
- 友链页面允许用户在链接描述使用 HTML 代码块
配置项修改
为方便查找,本主题将选项分类到多栏目下,而不是像原主题集中在一个“样式”栏下。
现分类为“全局”,“总体样式”,“首页样式”,“文章页样式”,“分类集合页样式”,“自定义页面样式”,“瞬间页样式”,“RSS”,“社交资料”。
解释:“现主题设置项位置”(原主题设置项位置)-> 小括号内的为“现主题设置项位置”对应的“原主题设置项位置“。
例:在增加于“总体样式”这一章节中有如下文字:
- “配色方案”(样式-配色方案)
其含义为“总体样式-配色方案”对应原主题“样式-配色方案”选项。
增加于“全局”
- 添加“默认页面语言”,允许指定站点默认的页面语言(HTML lang 属性)(如配置值为空,则设置为 "zh")
- 添加“多语言菜单支持”,允许用户定义多套菜单适用于不同语言。
- 添加“多语言菜单前缀匹配模式”,启用此项将允许菜单名符合 navigator.language 值前缀即显示,而无需完全匹配。
- 添加“默认多语言菜单名称”,可设定默认菜单。默认菜单将在没有菜单成功匹配的时候显示。
- 此项使用教程请看 多语言菜单使用指南
- 添加“CSP:upgrade-insecure-requests”选项,避免 HTTPS 协议网页引用 HTTP 资源时报错。相关文档:CSP: upgrade-insecure-requests - HTTP | MDN
- 增加“仅允许使用指定域名访问”。使用场景:防止站点被恶意镜像后的流量流失
增加于“总体样式”
- “配色方案”(样式-配色方案)添加“跟随系统”选项
- 可在大标题旁添加明暗模式切换按钮(切换顺序 light -> dark -> auto -> light)
- 点击图标后,将存储当前状态到本地(localStorage)
- 对于内容区域宽度给予更大的配置自由度
(说明:原主题在之后的更新里更新了自适应最大宽度设置,内容区域最大宽度将随着屏幕宽度的变化而变化。但是在文字内容较少时(如主页),会显得内容显示位置偏左,因此“可自定义内容区域最大宽度”默认开启。
如果你想使用上游的最大宽度设置模式,请关闭“总体样式-自定义内容区域最大宽度”这一项设置,并且推荐同时开启“内容区域最小宽度”,“自定义内容区域宽度属性”并保持默认值,可有效解决文字较少时内容显示偏左的问题)
- 可自定义内容区域最大宽度 (默认值为 48rem。允许全部 CSS 长度单位, 如: 48rem, 780px, 70vw, 70%。宽度最大值设置较大时可能会出现内容整体偏左的现象。为解决这个问题,可同时开启“内容区域最小宽度”,“自定义内容区域宽度属性”并保持默认值。)
- 可自定义内容区域最小宽度
(默认值为 48rem。允许全部 CSS 长度单位, 如: 48rem, 780px, 70vw, 70%。当此设置宽度小于窗口宽度时,主题会使用窗口宽度。以避免出现横向滚动条。)
- 允许强制应用内容区域最小宽度 (强制使内容显示区域不小于设定的最小宽度,即使出现横向滚动条。)
- 可自定义内容区域宽度属性 (默认值为 fit-content。默认值效果为:使内容区域宽度=最宽的内容的宽度。(此项实际是在设置内容区域的 width 属性对应的样式值))
- 允许关闭页面底部主题信息
- 允许关闭页面底部版权信息
- 允许设定是否强制页脚在页面最底部
- 允许关闭页面底部菜单
- 允许添加内容到页脚最底部
增加于“首页样式”
-
允许设定主页 HTML 标题,而不是取值于“Halo 设置-基本设置-站点标题”
-
允许同时开启一言和个人简介
-
允许用户修改主页上的固定文本 guqing/halo-theme-higan#86
- 默认值相较于原主题的变化
- Writing -> 近期发布
- Read article -> 阅读全文
- Find me on -> 与我联系
- 注:此选项已加入被遗弃的选项
- 现为支持 i18n,如想编辑此文字,请到 halo 主题目录(themes),找到 howiehz-higan 文件夹里的 i18n 文件夹,找到对应语言的 properties 文件,修改保存即可(如中文是 zh.properties)
- 默认值相较于原主题的变化
-
允许自由选择是否开关文章列表置顶图标,以及选择图标位置
增加于“文章页样式”
- 将“文章标题大写”(样式-文章标题大写)配置项移动到这一栏下
- 允许选择是否启用文章与评论区间的分隔线
- 允许选择是否启用文章评论区
添加于“分类集合页样式”
- 允许选择是否显示每个分类下的文章数量
- 允许设置在“文章数量”左侧的字符
- 允许设置在“文章数量”右侧的字符
- 允许选择是否显示多层分类
增加于“自定义页面样式”
- 允许选择是否启用正文内容与评论区间的分隔线
- 允许选择是否启用评论区
增加于“瞬间页样式”
- 允许选择是否启用点赞按钮
- 允许选择是否启用评论区
增加于“社交资料/RSS”
- 允许设置多个重复的社交平台
- 允许设置社交平台的排列顺序
- 在原支持 RSS, Dribbble, Email, Facebook, Github, Instagram, QQ, Telegram, X, 微博的基础上
额外增加对 BiliBili, Reddit, Stack Overflow, YouTube, 豆瓣, 网易云音乐, 知乎的支持
注:没有简书和 CSDN(Copy, Steal and pay-Download Net) 的原因是平台过于小众,甚至 iconify 找不到它们的图标 注:将“首页 RSS 展示”(社交资料-RSS)配置项移动到这一栏下,允许自定义 RSS 地址 - 支持插入纯文本
- 支持完全自定义资料(图标,链接,无障碍标签)
增加于文章元数据
如何找到一篇文章元数据的设置位置:
- 方法一:进入后台管理页面 -> 找到文章管理页 -> 点击一篇文章右边的三个点 -> 弹出的上下文菜单中选择“设置” -> 拉到底部即可见元数据设置位
- 方法二:进入后台管理页面 -> 找到文章管理页 -> 进入一篇文章的编辑页 -> 点击右上角“发布”按钮左侧的“设置”按钮 -> 拉到底部即可见元数据设置位
- 增加“页面标题”配置项,可设定此文章在浏览页的 HTML 标题(如配置值为空,则 HTML 标题取此文章的标题)
- 添加“页面语言”配置项,可指定此文章的页面语言(HTML lang 属性)(如配置值为空,则取“全局-默认页面语言”的值)
增加于分类元数据
如何找到一个分类元数据的设置位置:
- 进入后台管理页面 -> 找到文章管理页 -> 点击右上角的“分类”按钮 -> 此时已进入文章分类管理页(/console/posts/categories) -> 点击一个分类右边的三个点 -> 弹出的上下文菜单中选择“编辑” -> 拉到底部即可见元数据设置位
- 增加“页面标题”配置项,可设定此分类在浏览页的 HTML 标题(如配置值为空,则 HTML 标题取此文章的标题)
- 添加“页面语言”配置项,可指定此分类的页面语言(HTML lang 属性)(如配置值为空,则取“全局-默认页面语言”的值)
增加于标签元数据
如何找到一个标签元数据的设置位置:
- 进入后台管理页面 -> 找到文章管理页 -> 点击右上角的“标签”按钮 -> 此时已进入文章标签管理页(/console/posts/tags) -> 点击一个标签右边的三个点 -> 弹出的上下文菜单中选择“编辑” -> 拉到底部即可见元数据设置位
- 增加“页面标题”配置项,可设定此标签在浏览页的 HTML 标题(如配置值为空,则 HTML 标题取此文章的标题)
- 添加“页面语言”配置项,可指定此标签的页面语言(HTML lang 属性)(如配置值为空,则取“全局-默认页面语言”的值)
增加于页面元数据
如何找到一个页面元数据的设置位置:
- 方法一:进入后台管理页面 -> 找到页面管理页 -> 点击一个页面右边的三个点 -> 弹出的上下文菜单中选择“设置” -> 拉到底部即可见元数据设置位
- 方法二:进入后台管理页面 -> 找到页面管理页 -> 进入一个页面的编辑页 -> 点击右上角“发布”按钮左侧的“设置”按钮 -> 拉到底部即可见元数据设置位
- 增加“页面标题”配置项,可设定此文章在浏览页的 HTML 标题(如配置值为空,则 HTML 标题取此文章的标题)
- 添加“页面语言”配置项,可指定此文章的页面语言(HTML lang 属性)(如配置值为空,则取“全局-默认页面语言”的值)
调整于“总体样式”
- 配色方案(样式-配色方案)对应的配置名修改:
- 暗黑 -> 暗色
- 白色 -> 亮色
- 亮色 -> 灰粉
调整于“首页样式”
- 个人简介(样式-个人简介)输入框高度修改: 100px -> 150px
杂项(对主题使用者大概无感的修改)
- 重构样式切换方式 (原来是 body 标签的 class 决定样式,现在是 body 标签的 theme 属性的值决定样式)
- 修改项目内各种链接指向分叉后的项目链接,并修改元数据避免与原主题冲突
- 清除无用样式,减小最终文件体积
杂项于“总体样式”
- 配色方案(样式-配色方案)对应的内部配置值修改,修改值详情请看 v1.0.1
已合并至上游的内容/上游也已修复的内容
<details><summary>点我展开详情</summary>- 关闭未关闭的
label
,使得prettier
能正常格式化文件 guqing/halo-theme-higan#92 - 修复原项目不可用的格式化脚本 (
package.json
内的npm
脚本) guqing/halo-theme-higan#91 - 页面底部的版权信息进行了分行避免在小屏上排版错乱 guqing/halo-theme-higan#87#108
- 补充了部分缺失的
aria-label
属性 guqing/halo-theme-higan#83#110 - 修复行内代码渲染问题 guqing/halo-theme-higan#85#109
- 修复错误的大纲定位样式 guqing/halo-theme-higan#69#112
原项目说明
该主题的原作者为 Pieter Robberechts,非常感谢做出这么优秀的主题。
原主题地址:hexo-theme-cactus
主题应用实例
如何获取主题包
稳定版获取方法
- 到 Release 下载最新版的 “Source code (zip)”
- 在 Console 端的主题菜单直接上传安装即可使用
Release v1.2.1 包括之后的版本已上架 halo 应用市场,直接到商店页面下载即可
- 市场链接:应用:彼岸-皓改
最新开发版获取方法
- 点击项目主页 HowieHz/halo-theme-higan-hz 绿色的 “<> Code” 按钮
- 选择 “Download ZIP” 下载最新代码
- 在 Console 端的主题菜单直接上传安装即可使用
可选插件(主题使用者必看章节!)
-
友链页面(/links),需插件 plugin-links
-
图库页面(/photos),需插件 plugin-photos
-
瞬间页面(/moments),需插件 plugin-moments
- 瞬间页面可用于展示 github 活动,此用法请看 howiehz/ghu-events-moments 或 guqing/ghu-events-moments(兼容原主题数据类型)
-
评论功能,需插件 plugin-comment-widget
-
搜索功能,需插件 plugin-search-widget
-
代码渲染,需插件: plugin-highlightjs
-
- 暗黑模式下,代码块高亮主题推荐选择 “an-old-hope.min.css”
-
图片灯箱,需插件: plugin-lightgallery
-
- 页面匹配规则 推荐设置为
路径匹配 | 匹配区域 |
---|---|
/archives/** | article .content |
/moments | article .content .medium |
/moments/** | article .content .medium |
进行此项目的开发
首先请确保你的编辑器支持 EditorConfig,这保证了项目代码格式的统一。
开发前准备
安装 pnpm
需要提前安装 Node.js,然后运行以下指令安装 pnpm
npm install -g pnpm
安装项目依赖
之后在项目根目录运行以下指令完成依赖的安装
pnpm install
开发主题
开发时在项目根目录运行运行以下指令可实时渲染修改
pnpm dev
开发之后
求疵
开发完成后请运行以下的指令进行检查(请确保无 error)
pnpm lint
格式化代码
提交前请运行以下的指令的指令格式化代码
pnpm format
构建主题
最后在提交前请不要忘记运行以下的指令构建主题
pnpm build
其他 NPM 脚本的作用
在 .\tmp\ 目录输出未压缩的样式文件,便于追踪问题
pnpm dev-build
<!-- #### 打包主题
```bash
pnpm release
``` -->
版本适用说明
当前 main 分支适用于 Halo 2.0 版本
适用于 Halo 1.x 版本的主题位于分支 halo-theme-higan 1.x
TODO
见 项目 Issue 页面
注:社区意愿较大的 Issue 会列为优先项。如果你对某功能有需求,请一定要在对应 Issue 下回复,或进入我的博客通过其他联系方式联系我,谢谢!