✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
HEO主题
category
tags
type
status
slug
date
password
Last edited time
Jan 31, 2024 08:15 AM
summary
icon
感谢张洪大佬的设计 https://blog.zhheo.com/
主题说明
此主题参考张洪大佬设计开发的Acrylic-Promote主题,相似度极高,但很多细节上并非100%复刻,不足之处,日后改进。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8c42e056-3318-47fc-ab15-0bf545db2745%2FUntitled.png?table=block&id=0f41e75d-bf32-43c3-877f-e4a982c6851f&t=0f41e75d-bf32-43c3-877f-e4a982c6851f&width=3340&cache=v2)
使用主题
将代码版本更新到4.0以后
将您的默认主题设置为HEO,相关的所有配置都可以在 /themes/heo/config.js 文件中找到。接下来我会介绍这个主题的功能区。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2c4b8b86-3394-46fd-bf39-eba296f64b8a%2FUntitled.png?table=block&id=e6ee1b21-ac92-4e9d-a410-b03d29763b03&t=e6ee1b21-ac92-4e9d-a410-b03d29763b03&width=1615&cache=v2)
图中从上往下分别标注了6个区域,他们分别的功能和配置内容如下:
1. 顶部横幅
可以滚动当前的通知内容,并且支持点击跳转到指定链接,配置方式 themes/heo/config.js
2. 英雄区
英雄区左侧
- 左上角的卡牌点击是随机跳转到一篇文章,此功能无法修改配置,但是可以在源代码themes/heo/components/Hero.js中看到。
- 左上卡牌大标题 themes/heo/config.js
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6f762c20-ed70-43c4-8e7e-df8f21c77302%2FUntitled.png?table=block&id=b29b8f59-bff1-4a86-88c1-1de0f99f559a&t=b29b8f59-bff1-4a86-88c1-1de0f99f559a&width=578&cache=v2)
- 左上角卡牌背景滚动图,会循环展示一些技能的图标,可以在 themes/heo/config.js中配置
展开相关代码
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff67db5e5-5bce-4dc0-af90-7b1ff04a8bee%2FUntitled.png?table=block&id=02419ca8-36e2-47f0-8a18-5be1b00377a6&t=02419ca8-36e2-47f0-8a18-5be1b00377a6&width=646&cache=v2)
- 左下角三个导航标签,点击跳到特定页面,可以在 themes/heo/configs.js 中配置
- 文章分类横幅
- 个人资料卡牌欢迎语
- 公告栏, 卡牌中间的文字是公告内容
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa6724d9c-5258-498d-81be-3a1c36f7e5d0%2FUntitled.png?table=block&id=e37acf25-78a3-4e83-80fa-c51f626563a0&t=e37acf25-78a3-4e83-80fa-c51f626563a0&width=686&cache=v2)
目前这个三个卡牌,默认跳到的是三个标签归档页。
什么是标签归档?例如
/tag/必看精选
这个链接,展示的是所有标签中包含必看精选
的文章:![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F53c85635-42e3-44bb-8932-6f8eff167f77%2FUntitled.png?table=block&id=4b9a7efb-5411-4531-b50d-9a78dcae3d71&t=4b9a7efb-5411-4531-b50d-9a78dcae3d71&width=1208&cache=v2)
一篇文章可以打多个标签,然后通过访问
/tag/[标签]
的方式,快速浏览一组包含了同一标签的文章,例如您希望某片文章出现在 /tag/必看精选
这个链接 这个链接下,只要给这篇文章打上必看精选的标签(tag)
即可。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F79cbdcfd-6497-4274-9aba-831eb82fd4bf%2FUntitled.png?table=block&id=eb1d50b2-c0ac-4ea1-b2f9-c7a85195e1bb&t=eb1d50b2-c0ac-4ea1-b2f9-c7a85195e1bb&width=1483&cache=v2)
英雄区右侧
显示置顶文章的标题文字,以及跳转链接, 配置方式 themes/heo/config.js
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7f4217e3-e26d-46c0-b146-84ee31aa4f49%2FUntitled.png?table=block&id=ebd26d20-4843-4810-b2f0-d69aaf0f87f5&t=ebd26d20-4843-4810-b2f0-d69aaf0f87f5&width=686&cache=v2)
推荐置顶文章
点击更多推荐后,可以看到6篇被推荐制定的文章,只有被打了“推荐”标签的文章会在此置顶。
相关配置请查看 themes/heo/config.js
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9cfdc600-2221-43dd-b223-d765b33f7c88%2FUntitled.png?table=block&id=071a9ffa-077b-40c2-97e7-96f067f71def&t=071a9ffa-077b-40c2-97e7-96f067f71def&width=2764&cache=v2)
3. 文章列表区
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7dfbbe25-43cf-4d05-b24d-2ed76b0d7b5a%2FUntitled.png?table=block&id=e0881f7d-2772-40d3-b81b-5d77194814d0&t=e0881f7d-2772-40d3-b81b-5d77194814d0&width=1360&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff6bdd967-bfb4-425c-b40a-3d45aeacbd57%2FUntitled.png?table=block&id=9bb9ab1f-9682-472c-9476-d8a5fe979bae&t=9bb9ab1f-9682-472c-9476-d8a5fe979bae&width=1061&cache=v2)
这里显示您Notion中的所有文章分类,每篇文章可打多个标签,但只能归属于一个分类。
您可以直接在分类栏中输入分类名字,按下回车键即可创建。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F97466e2b-bdb7-42e5-84e2-acff145abe56%2FUntitled.png?table=block&id=c01de612-70e8-4dd6-b524-2074ff889939&t=c01de612-70e8-4dd6-b524-2074ff889939&width=808&cache=v2)
此处的文字点击会发生变化,在 themes/heo/config.js 中配置
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5f664750-5613-4dee-a5f2-edf6cd55c047%2FUntitled.png?table=block&id=6ec68c46-25be-420f-9ee2-858a3fbd1510&t=6ec68c46-25be-420f-9ee2-858a3fbd1510&width=312&cache=v2)
下方的 Tangly是显示作者名字,在blog.config.js中配置
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F08f03b32-5f90-4949-9a6e-96c432d33500%2FUntitled.png?table=block&id=9c78f59b-cb65-4545-9bda-2df7924365a6&t=9c78f59b-cb65-4545-9bda-2df7924365a6&width=305&cache=v2)
公告内容是您Notion模板中类型为
Notice
的文章内容。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F54485e37-47b6-4ede-a80c-dd36c283fe68%2FUntitled.png?table=block&id=03b6905e-f334-48c8-b388-2acf1524fd76&t=03b6905e-f334-48c8-b388-2acf1524fd76&width=1446&cache=v2)
移动端-英雄区
在移动端英雄区被精减,默认显示如下:
左侧是两个标签,默认是必看精选和热门文章,第三个标签被隐藏。
右侧默认显示打了《推荐》标签的六篇文章
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd06ba16a-2f1f-44c3-af62-f554fb8a689a%2FUntitled.png?table=block&id=95154d27-98e4-4354-8a84-57a9fd4a332d&t=95154d27-98e4-4354-8a84-57a9fd4a332d&width=672&cache=v2)
Loading...
Last update: