该主题是 guqing 的 halo-theme-higan 进行了定制化修改后的主题
更激进的修改,更高的配置自由度!
- 移除导航栏文字前出现的空白 guqing/halo-theme-higan#113
- 使用
PostCSS
+Tailwind CSS
+daisyUI
重构,修复上游标注在标签的 class 内但没有正常引入的样式,以及没有正常工作的样式。
- 添加了使用多元列表模式时,置顶文章在首页列表的标识(图标与简洁列表模式一致)
- 新增文章顶部分享栏分享方式: qqzone
- 修改文章顶部分享栏 Twitter 的链接为 X
- 友链页面允许用户在链接描述使用 html 代码块
为方便查找,本主题将选项分类到多栏目下,而不是像原主题集中在一个样式
栏下。
现分类为总体样式
,首页样式
,文章页样式
,RSS
,社交资料
。
解释:现主题设置项位置
(原主题设置项位置
)-> 小括号内的为现主题设置项位置
对应的原主题设置项位置
。
例:在增加于总体样式
有提到 配色方案
(样式-配色方案
),含义为总体样式-配色方案
对应原主题样式-配色方案
选项。
配色方案
(样式-配色方案
)添加跟随系统
- 可自定义内容区域最大宽度
(默认为 48rem。允许全部 CSS 长度单位, 如: 48rem, 780px, 70vw, 70%)
(原主题虽然更新后适配了宽屏,但是在我 2560px 宽的屏幕上,适配后会导致整体内容偏左,非常的不美观。远不如原主题先前限制内容宽度 48rem 来的美观。所以这项我设置为默认启用。如想体验原主题的最大宽度自适应,只需要去设置关闭总体样式-自定义内容区域最大宽度
这一项就可以了)
首页样式
(样式
)允许同时开启一言和个人简介- 允许自由选择是否开关文章列表置顶图标,以及选择图标位置
- 允许关闭页面底部主题信息
- 允许关闭页面底部版权信息
- 允许关闭页面底部菜单
- 允许用户修改主页上的固定文本 guqing/halo-theme-higan#86
- 默认值相较于原主题的变化
Writing
->近期发布
Read article
->阅读全文
Find me on
->与我联系
- 默认值相较于原主题的变化
- 允许设定主页 HTML 标题,而不是取值于
Halo设置-基本设置-站点标题
- 允许自定义 RSS 地址
- 允许设置多个重复的社交平台
- 允许设置社交平台的排列顺序
- 在原支持 Dribbble, Email, Facebook, Github, Instagram, QQ, Telegram, X, 微博的基础上
额外增加对 BiliBili, Reddit, Stack Overflow, YouTube, 豆瓣, 网易云音乐, 知乎的支持
注:没有简书和 CSDN(Copy, Steal and pay-Download Net) 的原因是平台过于小众,甚至 iconify 找不到它们的图标
如何找到一篇文章元数据设置位置:
- 方法一:进入后台管理页面 -> 找到文章管理页 -> 点击一篇文章右边的三个点 -> 弹出的上下文菜单中选择
设置
-> 拉到底部即可见元数据设置位 - 方法二:进入后台管理页面 -> 找到文章管理页 -> 进入一篇文章的编辑页 -> 点击右上角
发布
按钮左侧的设置
按钮 -> 拉到底部即可见元数据设置位
- 增加
页面标题
配置项,可设定此文章的在浏览页的HTML 标题
(如配置值为空,则HTML 标题
取此文章的标题)
配色方案
(样式-配色方案
)对应的配置名修改:暗黑
->暗色
白色
->亮色
亮色
->灰粉
个人简介
(样式-个人简介
)输入框高度修改:100px
->150px
- 修改 html 标签 lang 属性值,
lang='en'
->lang='zh'
- 重构样式切换方式 (原来是
body
标签的class
决定样式,现在是body
标签的theme
属性的值决定样式) - 修改项目内各种链接指向
fork
后的项目链接,并修改元数据避免与原主题冲突 - 清除无用样式,减小最终文件体积
配色方案
(样式-配色方案
)对应的配置值修改,修改值详情请看 v1.0.1
点我展开详情
- 关闭未关闭的
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 版本获取方法:
- 到 Release 下载最新版的
Source code (zip)
- 在 Console 端的主题菜单直接上传安装即可使用
最新开发版本获取方法:
- 点击项目主页 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
需要提前安装 Node.js
,然后运行以下指令安装 pnpm
npm install -g pnpm
之后在项目根目录运行以下指令完成依赖的安装
pnpm install
开发时在项目根目录运行运行以下指令可实时渲染修改
pnpm dev
开发完成后请运行以下的指令进行检查(请确保无 error)
pnpm lint
提交前请运行以下的指令的指令格式化代码
pnpm format
最后在提交前请不要忘记运行以下的指令构建主题
pnpm build
在 .\tmp\
输出未压缩的样式文件,便于追踪问题
pnpm dev-build
当前 main 分支适用于 Halo 2.0 版本
适用于 Halo 1.x 版本的主题位于分支 halo-theme-higan 1.x
见 Issue
注:社区意愿较大的 Issue 会列为优先项