V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  ç™»å½•
爱意满满的作品展示区。
GeekHub
JimmyCai
V2EX  â€º  分享创造

📚 Hugo 主题 Stack

  •  7
     
  •   JimmyCai · 20 天前 · 4519 次点击

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

    一些功能

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

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

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

    Demo

    Example Site

    我自己的博客

    下载

    GitHub

    喜欢就点个⭐吧。

    截图

    首页

    文章

    归档

    分类

    97 条回复  â€¢  2020-09-19 00:23:43 +08:00
    llerqwq
        1
    llerqwq   20 天前 via Android
    挺好看的嗷
    statement
        2
    statement   20 天前 via iPhone
    挺好看的
    98b984275a6b4591
        3
    98b984275a6b4591   20 天前
    挺好看的,支持一个👍
    Eloxt
        4
    Eloxt   20 天前
    好看,谢谢楼主
    eoamc
        5
    eoamc   20 天前
    有移植 hexo 的计划吗?
    JimmyCai
        6
    JimmyCai   20 天前
    @eoamc 抱歉,暂时没有 😅
    JimmyCai
        7
    JimmyCai   20 天前
    @llerqwq
    @statement
    @98b984275a6b4591
    @Eloxt

    谢谢!
    Zohar
        8
    Zohar   20 天前 via iPhone
    好看!
    johnnyNg
        9
    johnnyNg   20 天前
    好看 + 10086
    vissssa
        10
    vissssa   20 天前
    好看,我想把我的 next 移过来了,很符合我的需求审美
    mokeyjay
        11
    mokeyjay   20 天前
    很好看,圆润素雅很舒服,star 了,已加入我的博客设计参考列表
    mokeyjay
        12
    mokeyjay   20 天前
    如果能给按钮之类的元素加点 hover 动效就更棒了
    shansing
        13
    shansing   20 天前
    好看,支持。坐等 Typecho 移植
    foMM
        14
    foMM   20 天前
    挺好看的,感谢分享
    JimmyCai
        15
    JimmyCai   20 天前
    @Zohar
    @johnnyNg
    @vissssa
    @mokeyjay
    @foMM
    @shansing

    谢谢!


    @mokeyjay 多谢你的提议!会在之后的更新里加入 😀
    iannil
        16
    iannil   20 天前
    cool 很棒
    zhifanlo
        17
    zhifanlo   20 天前
    很好看 star 了
    littleangel
        18
    littleangel   20 天前
    cool 好看
    soaph
        19
    soaph   20 天前 via iPhone
    要是有 jekyll 的就好了
    microyu
        20
    microyu   20 天前
    撒卡默多
    dingdangnao
        21
    dingdangnao   20 天前
    好看,提个小问题,博客页面中文的字间距感觉有点紧
    ronman
        22
    ronman   20 天前 via Android
    请问一下,评论系统用的啥呢?
    Tink
        23
    Tink   20 天前 via Android
    求 hexo 版
    lazyyz
        24
    lazyyz   20 天前 via Android
    很好看,已 star⭐
    JimmyCai
        25
    JimmyCai   20 天前
    @dingdangnao 谢谢!中文字体间距可能与我用的字体有关(思源宋体)

    不清楚有没有单独修改中文字体间距的方法
    JimmyCai
        26
    JimmyCai   20 天前
    @ronman 主题自带的是 Disqus

    我博客那个是自己写的
    JimmyCai
        27
    JimmyCai   20 天前
    @soaph 试试看 Hugo 吧,速度比 Jekyll 快很多的 😀
    JimmyCai
        28
    JimmyCai   20 天前
    @iannil
    @zhifanlo
    @littleangel
    @lazyyz

    多谢支持~
    soaph
        29
    soaph   20 天前 via iPhone
    @JimmyCai 主要是 jekyll 放 github 不需要自己编译呀
    foMM
        30
    foMM   20 天前
    已经熟悉 hexo 的我第一次下载 hugo 准备尝试楼主的这个 theme……

    试了一下觉得重新重头学习使用的成本有点大,等 lz 更新配置教程了我再回过头学习吧。
    misaka19000
        31
    misaka19000   20 天前
    楼主是高中生?
    JimmyCai
        32
    JimmyCai   20 天前
    @soaph 可以借助 GitHub Action 或者 Netlify 这类服务自动编译的
    JimmyCai
        33
    JimmyCai   20 天前
    @foMM 抱歉,最近忙着处理主题的细节问题,还没完善文档部分 😅

    等有空了就开始写文档 (🕊🕊🕊
    JimmyCai
        34
    JimmyCai   20 天前
    @misaka19000 不是,是大一生 😅
    soaph
        35
    soaph   20 天前
    @JimmyCai !!!看来我是很久没去了解过了,好像不麻烦的样子
    Rebely
        36
    Rebely   20 天前
    好看, 以后如果想建博客的话就用这个了。
    foMM
        37
    foMM   20 天前
    @JimmyCai 感谢您分享的 notion,里面有一部分的设置。请教一下 archive,cateloge 等 page 是如何生成的呢?只是创建一个 folder 在 content 下面并不能生成跟您 blog 一样的一个页面
    Esay
        38
    Esay   20 天前
    非常漂亮简洁的主题,感谢开源!
    killerv
        39
    killerv   20 天前
    真的不错
    spacebound
        40
    spacebound   20 天前
    很简洁的主题,可以集成 valine 搞个评论
    geniusmyn
        41
    geniusmyn   20 天前
    好看!
    vinceying
        42
    vinceying   20 天前
    好看!
    sixway
        43
    sixway   20 天前
    请我我能移植到 hexo 吗?
    ID2333
        44
    ID2333   20 天前
    赞,star
    sixway
        45
    sixway   19 天前
    @sixway #43 请问,抱歉,打错字
    panxianhai
        46
    panxianhai   19 天前
    真好看,用起来
    likaci
        47
    likaci   19 天前
    害我还去查了查 Vanilla JS
    spacebound
        48
    spacebound   19 天前
    @JimmyCai 楼主博客里的评论感觉不错呀,是有后端的吗?后续有没有计划开源:)
    garipan
        49
    garipan   19 天前
    确实挺好看的
    whatCanIDoForYou
        50
    whatCanIDoForYou   19 天前
    UI 好看

    https://blog.jimmycai.com/index.xml 这个界面有问题。
    wellsc
        51
    wellsc   19 天前
    挺好看的
    g1eny0ung
        52
    g1eny0ung   19 天前
    UI 很好看,已 star ✨,顺便放个我写的 hugo theme: https://github.com/g1eny0ung/hugo-theme-dream,欢迎交流~
    hercat
        53
    hercat   19 天前
    建议修改下文章中代码的配色,黑底白字太扎眼了。
    g1eny0ung
        54
    g1eny0ung   19 天前
    修复下上条的链接: https://github.com/g1eny0ung/hugo-theme-dream
    ztechstack
        55
    ztechstack   19 天前
    好看,已 star
    42is42is42
        56
    42is42is42   19 天前
    圆角好看 thumbs up
    JimmyCai
        57
    JimmyCai   19 天前
    @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
        58
    JimmyCai   19 天前
    @Rebely
    @Esay
    @killerv
    @geniusmyn
    @vinceying
    @ID2333
    @panxianhai
    @garipan
    @wellsc
    @g1eny0ung
    @ztechstack
    @42is42is42

    多谢支持!😃
    Waffle
        59
    Waffle   19 天前
    好看!
    不过对 markdown 表格渲染是不是没有做支持?显示的表格没有任何边框……
    JimmyCai
        60
    JimmyCai   19 天前
    @spacebound 暂时没考虑集成除了 Disqus 以外的评论系统(因为太多了😂)

    等有空了就去写如何插入第三方评论系统的文档
    JimmyCai
        61
    JimmyCai   19 天前
    @sixway 可以的 👌

    保留好版权信息就行
    JimmyCai
        62
    JimmyCai   19 天前   ❤️ 1
    @Waffle 谢谢提醒!因为没有在自己博客里插入过表格,所以就忘了写样式了 😅

    会尽快补上的 👌
    Love4Taylor
        63
    Love4Taylor   19 天前
    等哪天对 kiss 厌烦了就换这个 2333
    Xuyiyang23333
        64
    Xuyiyang23333   19 天前
    我认为如果加上一些动效会更加好看,Star 了。
    ylhawj
        65
    ylhawj   19 天前 via iPhone
    很好看啊,回头换上
    JimmyCai
        66
    JimmyCai   19 天前
    @whatCanIDoForYou 谢谢!

    请问那个页面有什么问题呢?
    JimmyCai
        67
    JimmyCai   19 天前
    @hercat 多谢你的提议!我会试试看有没有更好的配色方案 😃
    yaxe
        68
    yaxe   19 天前
    楼主好 刚开始接触 hugo 我把 example_site 里的 config.toml 粘到我的站下面,hugo new posts/test.md 但是不能正常显示页面,想问一下 permalinks 下面 page/post 和我创建的页面的对应关系应该是怎么样的
    whatCanIDoForYou
        69
    whatCanIDoForYou   19 天前
    ![]( https://i.bmp.ovh/imgs/2020/09/1ddf2fa0d7137934.png)

    打开订阅是这样的 难道就是这个风格 我理解错了嘛,,,》
    JimmyCai
        70
    JimmyCai   19 天前   ❤️ 1
    @whatCanIDoForYou 是的,RSS 链接就长这样(
    whatCanIDoForYou
        71
    whatCanIDoForYou   19 天前
    @JimmyCai #70 抱歉 闹笑话了~~
    JimmyCai
        72
    JimmyCai   19 天前   ❤️ 1
    @yaxe 主题默认在主页输出 `content/post` 文件夹下的内容,所以你应该在那个文件夹创建新文章

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

    https://github.com/CaiJimmy/hugo-theme-stack/tree/master/exampleSite/content/post/markdown-syntax
    hwdef
        73
    hwdef   19 天前
    好看,已 star
    Shauntse
        74
    Shauntse   19 天前 via iPhone
    已 star 用上了。这几天捣鼓着建站,换了好多主题。这个主题的平衡点不错。区块结构和动效不复杂刚刚好。
    不过我有一个不太懂的地方:默认特色图片的设置是把“default-image.jpg”感到根目录的 assets/img 下,然后再文章里面要不要加上 imge:“default-imge.jpg”?
    janxin
        75
    janxin   19 天前
    看起来很好看,终于可以放心切换 hugo 啦
    wanxiankai
        76
    wanxiankai   19 天前
    好看
    JimmyCai
        77
    JimmyCai   19 天前
    @Shauntse 抱歉,文档写得有点不太清楚

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

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

    主题暂时还没有默认特色图片的选项 😅
    exceldream
        78
    exceldream   19 天前 via Android
    已赞
    CriseLYJ
        79
    CriseLYJ   19 天前
    @JimmyCai 楼主字体挺好看的呀,请问如何替换成你的那个字体
    JimmyCai
        80
    JimmyCai   19 天前
    @CriseLYJ 写到主题文档了 👌
    CriseLYJ
        81
    CriseLYJ   19 天前
    @JimmyCai okok,感谢
    foMM
        82
    foMM   19 天前
    @JimmyCai 原来 copy 过去就可以依葫芦画瓢了,谢谢
    avalon8
        83
    avalon8   19 天前
    好看
    JimmyCai
        84
    JimmyCai   19 天前
    @Xuyiyang23333 昨天按 #12 楼的建议给卡片加上了 hover 阴影效果。现在不知道还有哪里可以加动效而不显得突兀 😅
    foMM
        85
    foMM   19 天前
    我个人觉得现在的效果就挺好……动态太多的 theme 挺腻味的……

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

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

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

    感谢感谢
    soaph
        86
    soaph   19 天前
    我觉得如果能够有类似站内搜索的功能就更好了
    JimmyCai
        87
    JimmyCai   19 天前
    @soaph 一开始的设计稿里面有包含站内搜索页面,但后来没找到合适的前端 JSON 搜索库,就放着暂时不做了
    JimmyCai
        88
    JimmyCai   19 天前
    @foMM 刚刚意识到这个功能可能会有侵权的问题(使用到的语法)

    等作者允许我发布后就会更新相应的文档 👌
    youngxhui
        89
    youngxhui   19 天前
    看的我有点像更换了
    ResidualWind
        90
    ResidualWind   19 天前
    可惜没有搜索功能...
    JimmyCai
        91
    JimmyCai   18 天前 via Android
    @ResidualWind 以后应该会添加的
    JimmyCai
        92
    JimmyCai   18 天前
    @foMM 已获得原作者授权,记录到文档中了
    foMM
        93
    foMM   18 天前
    @JimmyCai 感谢感谢。期待后续可以加上搜索和手动调节 dark mode 之类的功能。
    dapengzhao
        94
    dapengzhao   17 天前
    评论系统没法直接用吗?
    Love4Taylor
        95
    Love4Taylor   13 天前
    好的 换上了(主要心水图片相关的功能
    soaph
        96
    soaph   9 天前
    同问评论系统,很想要这个
    JimmyCai
        97
    JimmyCai   9 天前
    @soaph 抱歉,我博客那个评论系统是自用项目,暂时没打算发出来 😅
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4387 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 03:11 · PVG 11:11 · LAX 20:11 · JFK 23:11
    ♥ Do have faith in what you're doing.