介绍

预览站点

https://www.xhhao.com/

https://www.halosb.com/

作者： HandSome & 纸鹿

说明

部分功能需要使用插件进行支持，以下是相关插件列表：

https://www.halo.run/store/apps/app-SnwWD

https://www.halo.run/store/apps/app-YXyaD

https://www.halo.run/store/apps/app-hfbQg

https://www.halo.run/store/apps/app-BmQJW

https://auth.muyin.site/archives/LinksSubmit

https://www.halo.run/store/apps/app-sqpgf

https://www.halo.run/store/apps/app-kzloktzn

https://www.halo.run/store/apps/app-yISsV

协议

• 协议： GPL-3.0

• Halo 版本要求： >= 2.21.0

功能配置

本章节将指导你进行一些基础配置，包括：网站标题、logo、侧栏、页脚&社交、文章、友链、插件适配等。

设置

侧边栏头部设置

Logo 配置

填写 logo 链接，logo 链接可使用网页链接也可使用附件链接：

https://example.com/upload/logo.png
/upload/logo.png

显示标题

打开可使网站更加美观。

样式设置

配色方案

• 主配色： 用于按钮、链接、高亮等主要元素

• 辅配色： 用于次要高亮、悬停状态等

Logo 字体样式

填写 @font-face 代码，font-family 必须改为 "Logo Font"，留空则使用系统字体。

页脚&社交设置

页脚和社交图标配置

• 配置页脚左侧栏目

• 配置页脚中间自定义栏目

• 配置侧边栏底部的社交图标（如：RSS 和开往），可自定义添加

自定义添加： 需要填写 Iconfont 类名，如：icon-home（需先配置 Iconfont CSS 链接）

备案号

如已备案请正确填写。

Uptime Kuma 状态监控

启用后在页脚显示站点状态监控。

小组件配置

组件顺序

拖拽调整顺序，越靠前优先级越高。

天气组件配置

前往 https://www.seniverse.com 注册获取，免费版即可，自动根据访客 IP 定位。

文章配置

精选文章配置

选择要在首页轮播展示的文章。

每页文章数设置

设置单页展示的文章数量，在输入框中填写数字。

ℹ️ 默认值 当前默认值为 10。

文章摘要框设置

显示文章摘要框，勾选后文章页会显示摘要模块，关闭后所有文章页将不再展示摘要框。

摘要动画配置

• 打字机效果： 启用打字机效果，让摘要内容以 "打字" 的动态效果展示

• 打字速度（毫秒/字）： 控制打字动画的快慢，建议填写 30-80

• 光标字符： 设置打字动画的光标样式

过时文章提示配置

• 启用过时提示： 当文章发布超过设定天数时，显示过时提醒

• 过时天数： 定义 "过时" 的时间阈值，在输入框填写数字

• 提示文案： 设置过时提醒的显示内容

ℹ️ 占位符 文案中的 {days} 是占位符，会自动替换为文章发布后的实际天数。 当前文案："本文发布于 {days} 天前，内容可能已过时，请主意甄别。"

友链配置

我的博客信息

用于友链页面展示，留空则使用站点默认信息。

ℹ️ 自定义字体 如需自定义字体，请参考 字体配置指南，友链的 font-family 必须改为 "Links Title Font"。

启用自主提交

开启后访客可自助提交友链申请。

⚠️ 注意 需要安装 https://auth.muyin.site/archives/LinksSubmit。

自定义配置

Iconfont CSS 链接

输入 Iconfont 或其他图标库的 CSS 链接，用于支持自定义图标。

ℹ️ 图标配置 详细的图标配置教程请参考 自定义图标指南。

开发设置

🚫 不推荐开启 仅供开发环境使用，不推荐在生产环境开启。

开启此设置后，所有静态资源由 Vite 开发服务器提供，需要在本地启动 Vite 服务：

pnpm dev

字体配置指南

填写 @font-face 代码，font-family 必须改为 "Logo Font"（如阿里妈妈方圆体需将原 font-family 值替换），留空则使用系统字体（苹方/微软雅黑）。

字体配置示例：

@font-face {
  font-family: "Logo Font";
  src: url("your-font-url.woff2");
}

字体资源网站

可前往以下网站获取自定义字体：

• iconfont 字体库 - 阿里巴巴字体库

• Google Fonts - 最大的开源字体库

• 猫啃网 - 专注免费商用中文字体

• 字由 - 大量免费中文字体

• 100font - 免费商用字体合集

• 自由字体 - 免费可商用中文字体

配置步骤

以下以 iconfont 字体库为例：

第一步：找到字体库

前往 iconfont 字体库，找到喜欢的字体系列。

第二步：选择字体

点击进入字体详情页，选择需要的字体样式。

第三步：预览字体

在字体预览框中输入你的 Logo 文字，查看效果并选择喜欢的字体。

第四步：生成代码

点击生成代码，复制 @font-face 代码，将 font-family 的值改为 "Logo Font"，然后填写到主题设置中。

自定义图标指南

主题支持通过 https://www.iconfont.cn/ 自定义导航栏图标。

配置步骤

第一步：登录并新建项目

打开 https://www.iconfont.cn/，登录后点击"我的项目"，新建一个空白项目。

第二步：搜索并添加图标

在搜索框中搜索想要的图标类型，选择喜欢的图标并添加入库。

第三步：加入项目

完成全部图标添加后，点击右上角购物车，选择"添加至项目"，加入刚才创建的项目。

第四步：生成在线链接

在"我的项目"中选择刚才添加图标的项目，点击"查看在线链接"并更新生成。

第五步：复制链接

复制生成的 CSS 链接地址，填写到主题设置的「Iconfont CSS 链接」中。

第六步：配置菜单图标

在 Halo 后台「外观 → 菜单」中，编辑菜单项，在图标字段填写对应的图标类名，如 iconfont icon-home。

ℹ️ 使用图标 配置完成后，在需要使用图标的地方填写图标类名，如：icon-home。类名可在 iconfont 项目中查看。

支持

如有问题或建议，欢迎反馈！

交流群

遇到问题？加入 QQ 群 766203360 获取帮助。