Giter VIP home page Giter VIP logo

halo-theme-higan-hz's Introduction

halo-theme-higan-hz

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

说明

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

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

preview

文档版本: 1.6.0
(如此处文档版本小于您正在使用的主题版本,说明您正在阅读一份过时的文档,请到项目原地址阅读最新版本。)

目录

相较于原始主题 最新开发版 的修改

原主题最新版本为:v2.8.0
而本主题修改基于最新开发版:上游提交日志

样式修复

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

不可配置的样式修改

如果添加的样式修改是可被配置的(如可修改,可关闭),则不会被列举在此处

  1. 新增文章顶部分享栏分享方式: QQ 空间
  2. 修改文章顶部分享栏 Twitter 的链接为 X
  3. 友链页面允许用户在链接描述使用 HTML 代码块

配置项修改

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

解释:“现主题设置项位置”(原主题设置项位置)-> 小括号内的为“现主题设置项位置”对应的“原主题设置项位置“。

例:在增加于“总体样式”这一章节中有如下文字:

  • “配色方案”(样式-配色方案)

其含义为“总体样式-配色方案”对应原主题“样式-配色方案”选项。

增加于“全局”

  1. 添加“CSP:upgrade-insecure-requests”选项,避免 HTTPS 协议网页引用 HTTP 资源时报错。相关文档:CSP: upgrade-insecure-requests - HTTP | MDN

增加于“总体样式”

  1. “配色方案”(样式-配色方案)添加“跟随系统”选项
  2. 可自定义内容区域最大宽度
    (默认值为 48rem。允许全部 CSS 长度单位, 如: 48rem, 780px, 70vw, 70%)
    (原主题在之后的更新里更新了自适应最大宽度设置,但是实测会让内容显示偏左,因此项默认开启。如果你想体验上游的最大宽度设置模式,请关闭“总体样式-自定义内容区域最大宽度”这一项设置)
  3. 允许关闭页面底部主题信息
  4. 允许关闭页面底部版权信息
  5. 允许关闭页面底部菜单
  6. 允许添加内容到页脚最底部

增加于“首页样式”

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

增加于“文章页样式”

  1. 将“文章标题大写”(样式-文章标题大写)配置项移动到这一栏下
  2. 允许选择是否启用文章与评论区间的分隔线
  3. 允许选择是否启用文章评论区

添加于“分类集合页样式”

  1. 允许选择是否显示每个分类下的文章数量
  2. 允许设置在“文章数量”左侧的字符
  3. 允许设置在“文章数量”右侧的字符
  4. 允许选择是否显示多层分类

增加于“自定义页面样式”

  1. 允许选择是否启用正文内容与评论区间的分隔线
  2. 允许选择是否启用评论区

增加于“瞬间页样式”

  1. 允许选择是否启用点赞按钮
  2. 允许选择是否启用评论区

增加于 “RSS”

  1. 将“首页 RSS 展示”(社交资料-RSS)配置项移动到这一栏下
  2. 允许自定义 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 属性值,从 en 修改为 zh。
  2. 重构样式切换方式 (原来是 body 标签的 class 决定样式,现在是 body 标签的 theme 属性的值决定样式)
  3. 修改项目内各种链接指向分叉后的项目链接,并修改元数据避免与原主题冲突
  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

如何获取主题包

稳定版获取方法

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

Release v1.2.1 包括之后的版本已上架 halo 应用市场,直接到商店页面下载即可

最新开发版获取方法

  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 会列为优先项。如果你对某功能有需求,请一定要在对应 Issue 下回复,或进入我的博客通过其他联系方式联系我,谢谢!

Lighthouse

Lighthouse-result-2024-04-15-post

项目状态

Alt

Star History

Star History Chart

halo-theme-higan-hz's People

Contributors

guqing avatar howiehz avatar ruibaby avatar erzbir avatar imgbotapp avatar johnniang avatar lilgg avatar

Stargazers

savfile avatar XLB avatar  avatar 星星 avatar maninhill avatar  avatar  avatar  avatar  avatar libxcnya.so avatar

Forkers

imba97

halo-theme-higan-hz's Issues

去除归档年份之间的空白&调整头像高度

guqing/halo-theme-higan#88

  1. 去除归档年份之间的空白

当年份是连续时样式看起来还可以,但感觉还是有点大,删了flex-auto的类会更好点。
当年份中间有空缺时,中间间隔太大,看起来怪怪的。

  1. 将头像高度设置为header的高度,这样可以保持一致,或者让头像居中

样式加载有延迟导致闪烁

先加载出来的html是白底黑字
之后加载出来的样式是dark的话就变成黑底绿字
导致在视觉上会闪一下

暂时不知如何解决,如有建议请留言

文章导航栏重构

可以在宽度不够时显示灰色条,给active的部分显示为绿色,鼠标放到附近展开目录 - 建议来自 @L33Z22L11

加入备案模式

一键关闭全部评论区xxx
其他的功能需要更多讨论
主要是针对非交互式网站备案

多元列表限制概要行数

学习earth主题,可以在设置里面指定显示多少行,再多的就省略号掉

-webkit-box-orient: vertical
-webkit-line-clamp: 6
display: -webkit-box
box-sizing: border-box

公告栏

已创建的 issue 如果有你需要的功能,可进行回复,会优先考虑实现。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.