Skip to content

halo主题名彼岸,生死为此岸,涅槃为彼岸;有苦无乐为此岸,无苦无乐为彼岸...它代表着对一切美好的精神追求,也代表着生生不息的轮回亦如本主题分黑白两色,阴极阳至,向死而生。

License

Notifications You must be signed in to change notification settings

imba97/halo-theme-higan-hz

 
 

Repository files navigation

halo-theme-higan-hz

GitHub GitHub all releases GitHub release (latest by date) GitHub repo size

说明

该主题是 guqing 的 halo-theme-higan 进行了定制化修改后的主题

更激进的修改,更高的配置自由度!

目录

相较于原始主题的修改

样式修复

  1. 移除导航栏文字前出现的空白 guqing/halo-theme-higan#113
  2. 使用 PostCSS + Tailwind CSS + daisyUI 重构,修复上游标注在标签的 class 内但没有正常引入的样式,以及没有正常工作的样式。

样式修改

  1. 添加了使用多元列表模式时,置顶文章在首页列表的标识(图标与简洁列表模式一致)
  2. 新增文章顶部分享栏分享方式: qqzone
  3. 修改文章顶部分享栏 Twitter 的链接为 X
  4. 友链页面允许用户在链接描述使用 html 代码块

配置项修改

为方便查找,本主题将选项分类到多栏目下,而不是像原主题集中在一个样式栏下。
现分类为总体样式首页样式文章页样式RSS社交资料

解释:现主题设置项位置原主题设置项位置)-> 小括号内的为现主题设置项位置对应的原主题设置项位置。 例:在增加于总体样式有提到 配色方案样式-配色方案),含义为总体样式-配色方案对应原主题样式-配色方案选项。

增加于总体样式

  1. 配色方案样式-配色方案)添加跟随系统
  2. 可自定义内容区域最大宽度
    (默认为 48rem。允许全部 CSS 长度单位, 如: 48rem, 780px, 70vw, 70%)
    (原主题虽然更新后适配了宽屏,但是在我 2560px 宽的屏幕上,适配后会导致整体内容偏左,非常的不美观。远不如原主题先前限制内容宽度 48rem 来的美观。所以这项我设置为默认启用。如想体验原主题的最大宽度自适应,只需要去设置关闭总体样式-自定义内容区域最大宽度这一项就可以了)

增加于首页样式

  1. 首页样式样式)允许同时开启一言和个人简介
  2. 允许自由选择是否开关文章列表置顶图标,以及选择图标位置
  3. 允许关闭页面底部主题信息
  4. 允许关闭页面底部版权信息
  5. 允许关闭页面底部菜单
  6. 允许用户修改主页上的固定文本 guqing/halo-theme-higan#86
    • 默认值相较于原主题的变化
      • Writing -> 近期发布
      • Read article -> 阅读全文
      • Find me on -> 与我联系
  7. 允许设定主页 HTML 标题,而不是取值于Halo设置-基本设置-站点标题

增加于 RSS

  1. 允许自定义 RSS 地址

增加于社交资料

  1. 允许设置多个重复的社交平台
  2. 允许设置社交平台的排列顺序
  3. 在原支持 Dribbble, Email, Facebook, Github, Instagram, QQ, Telegram, X, 微博的基础上
    额外增加对 BiliBili, Reddit, Stack Overflow, YouTube, 豆瓣, 网易云音乐, 知乎的支持
    注:没有简书和 CSDN(Copy, Steal and pay-Download Net) 的原因是平台过于小众,甚至 iconify 找不到它们的图标

增加于文章元数据

如何找到一篇文章元数据设置位置:

  • 方法一:进入后台管理页面 -> 找到文章管理页 -> 点击一篇文章右边的三个点 -> 弹出的上下文菜单中选择设置 -> 拉到底部即可见元数据设置位
  • 方法二:进入后台管理页面 -> 找到文章管理页 -> 进入一篇文章的编辑页 -> 点击右上角发布按钮左侧的设置按钮 -> 拉到底部即可见元数据设置位
  1. 增加 页面标题 配置项,可设定此文章的在浏览页的HTML 标题(如配置值为空,则HTML 标题取此文章的标题)

调整于总体样式

  1. 配色方案样式-配色方案)对应的配置名修改:
    • 暗黑 -> 暗色
    • 白色 -> 亮色
    • 亮色 -> 灰粉

调整于首页样式

  1. 个人简介样式-个人简介)输入框高度修改: 100px -> 150px

杂项

  1. 修改 html 标签 lang 属性值,lang='en' -> lang='zh'
  2. 重构样式切换方式 (原来是 body 标签的 class 决定样式,现在是 body 标签的 theme 属性的值决定样式)
  3. 修改项目内各种链接指向 fork 后的项目链接,并修改元数据避免与原主题冲突
  4. 清除无用样式,减小最终文件体积

杂项于总体样式

  1. 配色方案样式-配色方案)对应的配置值修改,修改值详情请看 v1.0.1

已合并至上游的内容/上游也已修复的内容

点我展开详情
  1. 关闭未关闭的 label,使得 prettier 能正常格式化文件 guqing/halo-theme-higan#92
  2. 修复原项目不可用的格式化脚本 (package.json 内的 npm 脚本) guqing/halo-theme-higan#91
  3. 页面底部的版权信息进行了分行避免在小屏上排版错乱 guqing/halo-theme-higan#87#108
  4. 补充了部分缺失的 aria-label 属性 guqing/halo-theme-higan#83#110
  5. 修复行内代码渲染问题 guqing/halo-theme-higan#85#109
  6. 修复错误的大纲定位样式 guqing/halo-theme-higan#69#112

原项目说明

该主题的原作者为 Pieter Robberechts,非常感谢做出这么优秀的主题。

原主题地址:hexo-theme-cactus

预览截图

待添加...

主题应用实例

howiehz.top

使用方法

Release 版本获取方法:

  1. Release 下载最新版的 Source code (zip)
  2. 在 Console 端的主题菜单直接上传安装即可使用

最新开发版本获取方法:

  1. 点击项目主页 HowieHz/halo-theme-higan-hz 绿色的<> Code按钮
  2. 选择Download ZIP下载最新代码
  3. 在 Console 端的主题菜单直接上传安装即可使用

可选插件

路径匹配 匹配区域
/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

版本适用说明

当前 main 分支适用于 Halo 2.0 版本

适用于 Halo 1.x 版本的主题位于分支 halo-theme-higan 1.x

TODO

Issue
注:社区意愿较大的 Issue 会列为优先项

Lighthouse

Lighthouse-result-2024-04-15-post

项目状态

Alt

Star History

Star History Chart

About

halo主题名彼岸,生死为此岸,涅槃为彼岸;有苦无乐为此岸,无苦无乐为彼岸...它代表着对一切美好的精神追求,也代表着生生不息的轮回亦如本主题分黑白两色,阴极阳至,向死而生。

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 49.8%
  • CSS 39.1%
  • TypeScript 4.6%
  • JavaScript 4.0%
  • Stylus 2.5%