Note
本项目不再活跃,若对本主题感兴趣,欢迎使用静态框架 Astro 的重构版本。
Sora 意为「穹」,象征着无限的可能性、广阔的空间和创造力
若君喜欢这个主题,欢迎 🌟Star!
欢迎提一个 Issue 来展示自己的网站。
一切从简,避免花哨。样式服务于内容的呈现。
黑白灰打底,主色调 #82045b
。
衬线 | 非衬线 | 等宽 | semi-serif | |
---|---|---|---|---|
中文 | 思源宋体 Noto Serif CJK |
HarmonyOS Sans SC | Maple Mono NF CN | 霞鹜文楷 |
英文 | ||||
数字 |
HarmonyOS Sans SC 调用服务器本地字体,其他字体调用第三方 CDN。
最后选择 ui-serif
、serif
,ui-sans-serif
、sans-serif
, ui-monospace
、monospace
作为 fallback 字体。
左侧显示站点标题。
右侧的分割线前显示一些页面,与 Halo 后台的菜单关联。支持主菜单下的子菜单。
分割线后显示搜索按钮和英文界面(待开发)。
首行是版权说明,格式为「© 建站时间 · 版权所有者」。
次行是备案号(可选)。
尾行是 Halo 和主题的链接。
Halo 内置评论系统,但是有些功能缺失,例如无 Markdown 支持:
- 请求支持MarkDown语法 · Issue #141 · halo-dev/plugin-comment-widget
- 【Feature】希望插件能支持以下功能,这样就不用老是切换第三方评论系统了 · Issue #142 · halo-dev/plugin-comment-widget
因此增加了对静态博客常用的第三方评论系统 Artalk 的支持。
-
发布时间、更新时间
yyyy-mm-dd 格式。当更新时间与发布时间是同一天时,只显示发布时间。
私以为,发布时间与更新时间是体现文章时效性的重要元信息,有手动设定的需求。而 Halo 目前只支持手动设定发布时间,于是考虑通过文章的元数据来实现手动设定更新时间,详见此文。
-
分类、标签
-
字数统计
实现见此文。
-
预计阅读时间
取 WPM(Words Per Minute,每分钟阅读字数)为 250~350,用字数除以 WPM,结果四舍五入。
-
浏览量
提示读者此文的时效性,因为有些信息的价值随着时间的流逝会不断削减。
以更新时间(若有)或发布时间为准,显示距今的天数。
「春去秋来」部分的灵感源自这里,每次刷新网页时通过 JavaScript 从词库
[
"时过境迁",
"沧海桑田",
"天翻地覆",
"水流花落",
"斗转星移",
"物是人非",
"时移世易",
"物换星移",
"春去秋来",
];
中随机选取显示。
Halo 没有内建目录支持,于是通过 JavaScript 从 HTML 提取标题来生成目录。支持 H1、H2、H3、H4 四级标题。
目录附着于文章右侧,跟随页面滚动,并高亮当前所在标题。
对于较长的列表项,在左侧添加竖线以更加醒目。
使用 highlight.js
代码高亮,需要在 Halo 后台开启相应插件。
通过 background
模拟下划线样式,并添加鼠标悬停时的样式。
通过 JavaScript 为站外链接在链接开头显示其 favicon。图标来源于
- 通过 DevTools 寻找站点资源
- 通过
https://www.google.com/s2/favicons?domain=${domain}&sz=64
获取
优先使用 SVG,其次 PNG。
采用卡片形式展示。包括文章的标题、链接、作者、发布与更新时间和许可。
应友人的建议:读者阅读到文章的末尾时,有时会想到继续浏览相关的其他文章,这时在末尾有分类和标签的链接就会很方便。
在「版权许可」中展示。
点赞功能的实现源自 theme-earth。点赞数据与 Halo 后端通信,通过 localStorage 来判断点赞状态,已点赞时按钮变灰。
赞助按钮点击弹出二维码和赞助名单(可选)。
采用小卡片并排。
单个分类 / 标签下的文章展示效果与首页一致。
通过自定义页面实现。
采用与文章页一致的排版。
使用 Vite 构建静态资源(CSS、JS),输出到 templates/assets/dist/
,然后通过 Browsersync 监听 templates/
变化自动刷新浏览器实现热重载。