Back

Stack修改

开整!

使用主题

我选了一个stack的魔改的主题,感谢作者!(已给星星)

https://github.com/Mantyke/Hugo-stack-theme-mod

下载下来直接和github连接并使用即可,这里的hugo版本是hugo v0.89.2-63E3A5EB+extended

基础配置

对根目录的config.yaml进行配置:

baseurl: https://proben1.github.io/
title: 茄子的养殖场
emoji: 
# 推荐一个emoji查询的网站:https://www.emojiall.com/zh-hans
# 如果难看可以注释掉emoji
subtitle: 完成一个名为大学的作品

网站图标

根目录下新建static文件夹,把中意图标的ioc拖进去,命名favicon.ico

头像

修改img/avatar.png

短代码

选自这里

直接效果演示吧:

文字居左

文字居中

文字居右

notice-warning

notice-info

notice-note

notice-tip

To see a world in a grain of sand. And a heaven in a wild flower. Hold infinity in the palm of your hand. And eternity in an hour.

修改「行内代码」样式

摘自这里

效果

修改「键盘标签」样式

摘自这里

Ctrl

添加友链

同样是摘自这里

在~\data\links.json里添加友链就可以了;image放在~\assets\link-img\里

[
    {
        "title": "小球飞鱼",
        "website": "https://mantyke.icu/",
        "image": "mantyke.png",
     "description": "我们会一起遇见鲸鱼吗?"
    },
	{
        "title": "友情链接2",
        "website": "",
        "image": "",
     "description": ""
    }
]

代码块

首先,是代码高亮设置

打开项目根目录下的 config.yaml,在highlight中加入

style : autumn  # 样式参考https://xyproto.github.io/splash/docs/all.html

我很喜欢白天用perldoc夜间用dracula,现在有个问题是怎么能做到切换。由于暂时无法解决我先一直用着dracula。

然后是这个大块块不太顺眼,直白白的边框实在是难看hhh。在F:\ProbeN1\myblog\assets\scss\custom.scss里添加css代码进行修改,这里我加了一个灰色的边框:

早就看这个代码块不太顺眼,那个直白白的边框实在是难看hhh。在F:\ProbeN1\myblog\themes\hugo-theme-stack\assets\scss\custom.scss里添加css代码进行修改

//代码块
.highlight pre {
    font-family: Consolas;
    border-style: solid;
    border-width: 2px;
    border-color: (255,255,0);
  }

设置分栏

分成两栏显示:

在assets\scss\custom.scss里添加:

  /* 归档页面两栏 */
@media (min-width: 1024px) {
    .article-list--compact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: none;
      box-shadow: none;
      gap: 1rem;
  
      article {
        background: var(--card-background);
        border: none;
        box-shadow: var(--shadow-l2);
        margin-bottom: 8px;
        border-radius: 16px;
      }
    }
  }
comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy
© Licensed Under CC BY-NC-SA 4.0