Hugo 主题 Stack - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
JimmyCai

Hugo 主题 Stack

  •  8
     
  •   JimmyCai
    CaiJimmy Sep 7, 2020 13941 views
    This topic created in 2061 days ago, the information mentioned may be changed or developed.

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

    一些功能

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

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

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

    Demo

    Example Site

    我自己的博客

    下载

    GitHub

    喜欢就点个吧。

    截图

    首页

    文章

    归档

    分类

    105 replies    2020-12-29 22:06:12 +08:00
    1  2  
    llerqwq
        1
    llerqwq  
       Sep 7, 2020 via Android
    挺好看的嗷
    statement
        2
    statement  
       Sep 7, 2020 via iPhone
    挺好看的
    98b984275a6b4591
        3
    98b984275a6b4591  
       Sep 7, 2020
    挺好看的,支持一个
    Eloxt
        4
    Eloxt  
       Sep 7, 2020
    好看,谢谢楼主
    eoamc
        5
    eoamc  
       Sep 7, 2020
    有移植 hexo 的计划吗?
    JimmyCai
        6
    JimmyCai  
    OP
       Sep 7, 2020
    @eoamc 抱歉,暂时没有
    JimmyCai
        7
    JimmyCai  
    OP
       Sep 7, 2020
    Zohar
        8
    Zohar  
       Sep 7, 2020 via iPhone
    好看!
    johnnyNg
        9
    johnnyNg  
       Sep 7, 2020
    好看 + 10086
    vissssa
        10
    vissssa  
       Sep 7, 2020
    好看,我想把我的 next 移过来了,很符合我的需求审美
    mokeyjay
        11
    mokeyjay  
       Sep 7, 2020
    很好看,圆润素雅很舒服,star 了,已加入我的博客设计参考列表
    mokeyjay
        12
    mokeyjay  
       Sep 7, 2020
    如果能给按钮之类的元素加点 hover 动效就更棒了
    shansing
        13
    shansing  
       Sep 7, 2020
    好看,支持。坐等 Typecho 移植
    foMM
        14
    foMM  
       Sep 7, 2020
    挺好看的,感谢分享
    JimmyCai
        15
    JimmyCai  
    OP
       Sep 7, 2020
    @Zohar
    @johnnyNg
    @vissssa
    @mokeyjay
    @foMM
    @shansing

    谢谢!


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

    不清楚有没有单独修改中文字体间距的方法
    JimmyCai
        26
    JimmyCai  
    OP
       Sep 7, 2020
    @ronman 主题自带的是 Disqus

    我博客那个是自己写的
    JimmyCai
        27
    JimmyCai  
    OP
       Sep 7, 2020
    @soaph 试试看 Hugo 吧,速度比 Jekyll 快很多的
    JimmyCai
        28
    JimmyCai  
    OP
       Sep 7, 2020
    @iannil
    @zhifanlo
    @littleangel
    @lazyyz

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

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

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

    https://blog.jimmycai.com/index.xml 这个界面有问题。
    wellsc
        51
    wellsc  
       Sep 8, 2020
    挺好看的
    g1eny0ung
        52
    g1eny0ung  
       Sep 8, 2020
    UI 很好看,已 star ,顺便放个我写的 hugo theme: https://github.com/g1eny0ung/hugo-theme-dream,欢迎交流~
    hercat
        53
    hercat  
       Sep 8, 2020
    建议修改下文章中代码的配色,黑底白字太扎眼了。
    g1eny0ung
        54
    g1eny0ung  
       Sep 8, 2020
    zliea
        55
    zliea  
       Sep 8, 2020
    好看,已 star
    42is42is42
        56
    42is42is42  
       Sep 8, 2020
    圆角好看 thumbs up
    JimmyCai
        57
    JimmyCai  
    OP
       Sep 8, 2020
    @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  
    OP
       Sep 8, 2020
    Waffle
        59
    Waffle  
       Sep 8, 2020
    好看!
    不过对 markdown 表格渲染是不是没有做支持?显示的表格没有任何边框……
    JimmyCai
        60
    JimmyCai  
    OP
       Sep 8, 2020
    @spacebound 暂时没考虑集成除了 Disqus 以外的评论系统(因为太多了)

    等有空了就去写如何插入第三方评论系统的文档
    JimmyCai
        61
    JimmyCai  
    OP
       Sep 8, 2020
    @sixway 可以的

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

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

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

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

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

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

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

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

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

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

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

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

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

    等作者允许我发布后就会更新相应的文档
    youngxhui
        89
    youngxhui  
       Sep 9, 2020
    看的我有点像更换了
    ResidualWind
        90
    ResidualWind  
       Sep 9, 2020
    可惜没有搜索功能...
    JimmyCai
        91
    JimmyCai  
    OP
       Sep 9, 2020 via Android
    @ResidualWind 以后应该会添加的
    JimmyCai
        92
    JimmyCai  
    OP
       Sep 9, 2020
    @foMM 已获得原作者授权,记录到文档中了
    foMM
        93
    foMM  
       Sep 9, 2020
    @JimmyCai 感谢感谢。期待后续可以加上搜索和手动调节 dark mode 之类的功能。
    dapengzhao
        94
    dapengzhao  
       Sep 10, 2020
    评论系统没法直接用吗?
    love4taylor
        95
    love4taylor  
    PRO
       Sep 15, 2020
    好的 换上了(主要心水图片相关的功能
    soaph
        96
    soaph  
       Sep 18, 2020
    同问评论系统,很想要这个
    JimmyCai
        97
    JimmyCai  
    OP
       Sep 19, 2020
    @soaph 抱歉,我博客那个评论系统是自用项目,暂时没打算发出来
    foMM
        98
    foMM  
       Oct 9, 2020
    请教一下您博客的搜索是如何实现的呢?文档里面没提,谢谢
    JimmyCai
        99
    JimmyCai  
    OP
       Oct 10, 2020
    foMM
        100
    foMM  
       Oct 10, 2020
    @JimmyCai #99 谢谢回复。等什么时候合并了我再升级吧
    1  2