Hugo 极简主题 Echo
source link: https://blog.forecho.com/hugo-theme-echo.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Hugo 极简主题 Echo
06 Apr 2021
去年年初的时候博客从 Octopress 迁移到 Hugo，那个时候找遍了很多 Hugo 主题都不满意，于是自己写了一个。
这就是 echo 主题的由来。最近又优化了一下这个主题，就顺便写篇文章给大家介绍一下这个主题，刚写出来的时候只在 V2EX 上分享过。
风格基于 Tailwind CSS
TailwindCSS 可以说是这两年比较火的 CSS 框架了，看腻了 Bootstrap 的样式，觉得 TailwindCSS 真漂亮，但是在使用上不同于 Bootstrap， TailwindCSS 给人的一种感觉是面向过程写代码，可以自己自由组装各种样式，缺点是学习门槛高一点。而且可能要写大量重复的代码。
这次采用 TailwindCSS 做为主题 CSS 框架，一是因为它样式好看，二是尝鲜，换思路写 CSS。
1.0 版本的 TailwindCSS 还不支持深色模式，现在最新版 2.0 了，所以我也就升级了，顺便支持了深色模式，为了支持深色模式，代码结构改动很多，不得不引入了一些其他工具（比如说 Nodejs、PostCSS 等），其实我很不愿意把一个主题项目搞得那么复杂，但是尝试了一番之后，最后发现不得不这样做。
这次加入深色模式，工作量比预期的要多，
我非常喜欢 Google 相册以及 Day One 的「那年今日」功能，所以这次我在「文章归档」中也实现了此功能，我认为此功能：
- 可以帮助自己回忆过往写过的博客
- 也可以激励自己多多写博客
通过给文章添加「popular」标签，可以实现热门文章，在右侧和 404 页面都有展示热门文章列表。
更加友好的 SEO
在 SEO 上也做了很多优化，文章如果被分享到 Twitter/Facebook 上会有卡片效果。
其他基本功能
- 自定义 CSS，自定义 JS
- 文章支持目录
- 支持相关阅读
- 使用更快的 Chroma 代码高亮
- 主题的地址 hugo-theme-echo
- 本博客的源码地址：你可以参考我的 Hugo 配置信息和 GitHub Actions 配置
本文有 154次阅读
Recommend
-
126
Fast Render Mode boosts live reloading! October 16, 2017 Go to Hugo Releases for the release downloads. Hugo 0.30
-
112
Images and other resources with page-relative links, resize, scale and crop images, and much more. December 31, 2017 Go to Hugo Releases for...
-
102
Hugo 0.33 comes with resource (images etc.) metadata, type and layout for all page types, url in front matter for list pages … January 18, 2018 Go to
-
6
Hugo 极简搭建指南Hugo 是一个搭建网页的框架，有极高的构建和部署速度。至于在 Windows 下的安装配置，官方文档并未详细说明，第三方教程也参差不齐，所以我写了这一篇教程。下载安装
-
6
求 V 友推荐个 Hugo 主题~V2EX = way to explore V2EX 是一个关于分享和探索的地方
-
9
给 Hugo even 主题添加 utterances 评论系统2021-08-15Blog485 words 1 min read 7 times read建立博客以来，试用了多款评论系统，不过最终还是用了 disqus，但是...
-
7
在开发 Hugo 的主题中，移动端的体验是必不可少的，我总结了一些经验。 一、利用scss优化移动端样式
-
9
[分享] Basic HTML - 一款极简的Typecho主题 之前从Emlog迁移过来顺带也把自用的主题迁移过来了。草草寥寥把主题从Emlog的关键字替换成Typecho的，一路还算轻松。唯一是归档页面没迁移过来，因为在Emlog的时候是用的一个插件，这段时间空了也...
-
5
A beautiful cover Pacman Pacman 是一个不错的 Hexo 主题，一直有冲动把这个主题转成 Hugo 的，...
-
12
/ 代码 /WordPress & Typecho 极简主题 Writing v1.0 发布 全文共355字, 阅读约需1分钟 • 16 条评论
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK