📚 Hugo 主题 Stack

[JimmyCai]

前段时间写的一款 Hugo 主题，已经在 GitHub 上开源，欢迎使用 & 提意见 😀

一些功能

• 暗色模式
• 归档页面
• 响应式图片
• 图片懒加载
• 图片灯箱 (PhotoSwipe)

文章缩略图使用了 Hugo 的 Image Processing 功能，自动裁剪成合适的大小来优化页面加载速度。缺点是第一次生成站点时耗时会比较长，第二次有缓存后就会恢复到正常速度（我博客生成速度 ~ 500ms ）。

页面头部加入了 Open Graph 标签，在 Telegram 或 Twitter 这些平台上贴链接时可以获得不错的效果。

Demo

Example Site

我自己的博客

下载

GitHub

喜欢就点个⭐吧。

截图

[llerqwq]

挺好看的嗷

[statement]

挺好看的

[98b984275a6b4591]

挺好看的，支持一个👍

[Eloxt]

好看，谢谢楼主

[eoamc]

有移植 hexo 的计划吗？

[JimmyCai]

@eoamc 抱歉，暂时没有 😅

[JimmyCai]

@llerqwq
@statement
@98b984275a6b4591
@Eloxt

谢谢！

[Zohar]

好看！

[johnnyNg]

好看 + 10086

[vissssa]

好看，我想把我的 next 移过来了，很符合我的需求审美

[mokeyjay]

很好看，圆润素雅很舒服，star 了，已加入我的博客设计参考列表

[mokeyjay]

如果能给按钮之类的元素加点 hover 动效就更棒了

[shansing]

好看，支持。坐等 Typecho 移植

[foMM]

挺好看的，感谢分享

[JimmyCai]

@Zohar
@johnnyNg
@vissssa
@mokeyjay
@foMM
@shansing

谢谢！


@mokeyjay 多谢你的提议！会在之后的更新里加入 😀

[iannil]

cool 很棒

[zhifanlo]

很好看 star 了

[littleangel]

cool 好看

[soaph]

要是有 jekyll 的就好了

[microyu]

撒卡默多

[dingdangnao]

好看，提个小问题，博客页面中文的字间距感觉有点紧

[ronman]

请问一下，评论系统用的啥呢？

[Tink]

求 hexo 版

[lazyyz]

很好看，已 star⭐

[JimmyCai]

@dingdangnao 谢谢！中文字体间距可能与我用的字体有关（思源宋体）

不清楚有没有单独修改中文字体间距的方法

[JimmyCai]

@ronman 主题自带的是 Disqus

我博客那个是自己写的

[JimmyCai]

@soaph 试试看 Hugo 吧，速度比 Jekyll 快很多的 😀

[JimmyCai]

@iannil
@zhifanlo
@littleangel
@lazyyz

多谢支持~

[soaph]

@JimmyCai 主要是 jekyll 放 github 不需要自己编译呀

[foMM]

已经熟悉 hexo 的我第一次下载 hugo 准备尝试楼主的这个 theme……

试了一下觉得重新重头学习使用的成本有点大，等 lz 更新配置教程了我再回过头学习吧。

[misaka19000]

楼主是高中生？

[JimmyCai]

@soaph 可以借助 GitHub Action 或者 Netlify 这类服务自动编译的

[JimmyCai]

@foMM 抱歉，最近忙着处理主题的细节问题，还没完善文档部分 😅

等有空了就开始写文档 （🕊🕊🕊

[JimmyCai]

@misaka19000 不是，是大一生 😅

[soaph]

@JimmyCai ！！！看来我是很久没去了解过了，好像不麻烦的样子

[Rebely]

好看， 以后如果想建博客的话就用这个了。

[foMM]

@JimmyCai 感谢您分享的 notion，里面有一部分的设置。请教一下 archive，cateloge 等 page 是如何生成的呢？只是创建一个 folder 在 content 下面并不能生成跟您 blog 一样的一个页面

[Esay]

非常漂亮简洁的主题，感谢开源！

[killerv]

真的不错

[spacebound]

很简洁的主题，可以集成 valine 搞个评论

[geniusmyn]

好看！

[vinceying]

好看！

[sixway]

请我我能移植到 hexo 吗？

[ID2333]

赞，star

[sixway]

@sixway #43 请问，抱歉，打错字

[panxianhai]

真好看，用起来

[likaci]

害我还去查了查 Vanilla JS

[spacebound]

@JimmyCai 楼主博客里的评论感觉不错呀，是有后端的吗？后续有没有计划开源：）

[garipan]

确实挺好看的

[whatCanIDoForYou]

UI 好看

https://blog.jimmycai.com/index.xml 这个界面有问题。

[wellsc]

挺好看的

[g1eny0ung]

UI 很好看，已 star ✨，顺便放个我写的 hugo theme： https://github.com/g1eny0ung/hugo-theme-dream，欢迎交流～

[hercat]

建议修改下文章中代码的配色，黑底白字太扎眼了。

[g1eny0ung]

修复下上条的链接： https://github.com/g1eny0ung/hugo-theme-dream

[zliea]

好看，已 star

[42is42is42]

圆角好看 thumbs up

[JimmyCai]

@foMM 抱歉那一部分的文档还没写好 😅

你可以先看下 exampleSite 的文件夹结构：

归档： https://github.com/CaiJimmy/hugo-theme-stack/blob/master/exampleSite/content/page/archive.md
分类： https://github.com/CaiJimmy/hugo-theme-stack/blob/master/exampleSite/content/categories/Test/_index.md

归档需要在 `content/page` 文件夹下新建一个页面，在 Frontmatter 写 `layout: "archive"`
分类页面请参考文档和上方的例子

[JimmyCai]

@Rebely
@Esay
@killerv
@geniusmyn
@vinceying
@ID2333
@panxianhai
@garipan
@wellsc
@g1eny0ung
@ztechstack
@42is42is42

多谢支持！😃

[Waffle]

好看！
不过对 markdown 表格渲染是不是没有做支持？显示的表格没有任何边框……

[JimmyCai]

@spacebound 暂时没考虑集成除了 Disqus 以外的评论系统（因为太多了😂）

等有空了就去写如何插入第三方评论系统的文档

[JimmyCai]

@sixway 可以的 👌

保留好版权信息就行

[JimmyCai]

@Waffle 谢谢提醒！因为没有在自己博客里插入过表格，所以就忘了写样式了 😅

会尽快补上的 👌

[Love4Taylor]

等哪天对 kiss 厌烦了就换这个 2333

[Xuyiyang23333]

我认为如果加上一些动效会更加好看，Star 了。

[ylhawj]

很好看啊，回头换上

[JimmyCai]

@whatCanIDoForYou 谢谢！

请问那个页面有什么问题呢？

[JimmyCai]

@hercat 多谢你的提议！我会试试看有没有更好的配色方案 😃

[yaxe]

楼主好 刚开始接触 hugo 我把 example_site 里的 config.toml 粘到我的站下面，hugo new posts/test.md 但是不能正常显示页面，想问一下 permalinks 下面 page/post 和我创建的页面的对应关系应该是怎么样的

[whatCanIDoForYou]


打开订阅是这样的 难道就是这个风格 我理解错了嘛，，，》

[JimmyCai]

@whatCanIDoForYou 是的，RSS 链接就长这样（

[whatCanIDoForYou]

@JimmyCai #70 抱歉 闹笑话了~~

[JimmyCai]

@yaxe 主题默认在主页输出 `content/post` 文件夹下的内容，所以你应该在那个文件夹创建新文章

刚刚才发现演示站点的文章目录没删干净，现在已经处理好了。可以参考下这篇文章的目录结构：

https://github.com/CaiJimmy/hugo-theme-stack/tree/master/exampleSite/content/post/markdown-syntax

[hwdef]

好看，已 star

[Shauntse]

已 star 用上了。这几天捣鼓着建站，换了好多主题。这个主题的平衡点不错。区块结构和动效不复杂刚刚好。
不过我有一个不太懂的地方：默认特色图片的设置是把“default-image.jpg”感到根目录的 assets/img 下，然后再文章里面要不要加上 imge：“default-imge.jpg”？

[janxin]

看起来很好看，终于可以放心切换 hugo 啦

[wanxiankai]

好看

[JimmyCai]

@Shauntse 抱歉，文档写得有点不太清楚

opengraph.defaultImage 的图片地址是在文章没有特色图片的情况下，提供给 Open Graph 标签的（在社交平台上显示），不会直接出现在博客里。

如果要给文章添加特色图片，需要在文章的 Front Matter 添加 `image` 字段。

主题暂时还没有默认特色图片的选项 😅

[exceldream]

已赞

[CriseLYJ]

@JimmyCai 楼主字体挺好看的呀，请问如何替换成你的那个字体

[JimmyCai]

@CriseLYJ 写到主题文档了 👌

[CriseLYJ]

@JimmyCai okok,感谢

[foMM]

@JimmyCai 原来 copy 过去就可以依葫芦画瓢了，谢谢

[avalon8]

好看

[JimmyCai]

@Xuyiyang23333 昨天按 #12 楼的建议给卡片加上了 hover 阴影效果。现在不知道还有哪里可以加动效而不显得突兀 😅

[foMM]

我个人觉得现在的效果就挺好……动态太多的 theme 挺腻味的……

请教一下在 post 里面发图片，我看有些是一张图一行，有些一三张图一行（缩小了），例如 https://blog.jimmycai.com/p/hugo-theme-stack/#&gid=1&pid=1 里的首页，归档，文章，分类的截图。

再例如 https://blog.jimmycai.com/p/new-computer/ 这篇文章，可以一行两张图片。

请问如何定义一行几张图片呢？

感谢感谢

[soaph]

我觉得如果能够有类似站内搜索的功能就更好了

[JimmyCai]

@soaph 一开始的设计稿里面有包含站内搜索页面，但后来没找到合适的前端 JSON 搜索库，就放着暂时不做了

[JimmyCai]

@foMM 刚刚意识到这个功能可能会有侵权的问题（使用到的语法）

等作者允许我发布后就会更新相应的文档 👌

[youngxhui]

看的我有点像更换了

[ResidualWind]

可惜没有搜索功能...

[JimmyCai]

@ResidualWind 以后应该会添加的

[JimmyCai]

@foMM 已获得原作者授权，记录到文档中了

[foMM]

@JimmyCai 感谢感谢。期待后续可以加上搜索和手动调节 dark mode 之类的功能。

[dapengzhao]

评论系统没法直接用吗？

[Love4Taylor]

好的 换上了（主要心水图片相关的功能

[soaph]

同问评论系统，很想要这个

[JimmyCai]

@soaph 抱歉，我博客那个评论系统是自用项目，暂时没打算发出来 😅

[foMM]

请教一下您博客的搜索是如何实现的呢？文档里面没提，谢谢

[JimmyCai]

@foMM https://github.com/CaiJimmy/hugo-theme-stack/pull/19

还没合并到 master 分支

[foMM]

@JimmyCai #99 谢谢回复。等什么时候合并了我再升级吧