Hugo Stack | 删删改改大胆行事

博客更新日志 #

2022-04-18 | 取消右侧栏小组件，更改页面宽度，Archive页面中增添Tags板块，取消了左侧栏的Home键。修改Site-info为You need to have some concerns and, even better, a bit of anger.

2022-04-17 | 按照善楪的笔记增加了右下角的Channel.io即时聊天气泡。将Fanfic站的主题换为Stack。按照echosec的博客修改了选中目标和行内代码样式。

2022-03-02 | 为分类组件增加计数，修改方法来自塔塔的笔记，修改了小组件Icon。删掉了去往Mastodon的社交链接。

2022-01-27 | 增加分类组件推荐阅读，为评论功能增添了邮件提醒。

待办清单 #

• 想要一个音乐播放器 | 音乐网站提供的内嵌链接为我解决了难题
• 修改分类组件
• 增加Quote短代码，感觉有点难弄，但是很漂亮呢。

在FreeCodeCamp上学了几节CSS和Html以后，我终于对我的博客下手了。编程世界真是好，竟然允许人出错以后火速替换更改的文件以便达到救火目的。因为我不知道应该怎么看修改记录，也不确定可以看修改记录，同时兼任健忘人士和差生两大身份，所以我需要对这次贸然施工进行详尽记录。

施工进行一段时间后，我牢牢记住了：Ctrl+Z是撤回，Ctrl+Y是恢复。这两大魔法按钮，辅助Ctrl+S，使得我像是挠一爪子就停下来看看沙发怎么样了的猫一样所向披靡。

对我这个编程基础为零的人来讲，每修改一处都是大成就。为了让这篇东西的写作快乐一点，也便于让我这个健忘认识复习，我会写下我脑海里详细的、笨笨的解题思路。

卡片圆角改为直角 #

我在FreeCodeCamp学的第一课马上就用上了，直角圆角问题属于border-radius管辖。在\assets\scss\variables.scss这个文件中：

    --tag-border-radius: 0px; // 标签圆角改直角，由4改为0px

由于博客的评论区是后来添加的，所以想让它改为圆角，依然需要跑去\layouts\partials\comments\provider\waline.html单独修改。

代码块问题 #

上一个修改带来了这个问题。我希望标签是直角，但代码块（此前我以为我的博客根本用不上这个东西）是在文中的，它也引用了上述的样式，单独修改一下。

  code {
​    color: var(--code-text-color);
​    background-color: var(--code-background-color);
​    padding: 2px 4px;
​    border-radius: 5px; // 单独改为4px
​    font-family: var(--code-font-family);
  }

左侧栏的问题 #

菜单 #

菜单部分在\assets\scss\partials\menu.scss里修改。

    li {
    
    ...... 
    
        @include respond(md) {
            width: 77%; //我希望它们和标题与描述一起居中，但修改半天实在做不到，先这样。
            text-align:left; // left好看
            padding: 0px 0; // 10px 0 改为1px 0 是菜单栏的间距
        } 

暗色模式 #

哎呀，暗色模式默认是在底部，让它上来！这部分在\assets\scss\partials\sidebar.scss修改。

#dark-mode-toggle {
    margin-top: 10px; // auto改为10px，暗色模式按钮与菜单最后一栏的间距

修改左栏的占比 #

印象中我把头像的Margin直接改大了，然后参照Hugo | 看中 Stack 主题的归档功能，搬家并做修改改了标题与描述的居中，会想要修改博客的样式也是因为看了这篇博客，在修改过程中抄了很多作业😭谢谢她！

右侧小组件更改 #

我不喜欢以年份归类，尤其是我博客的内容全是在2020年以后写的：众所周知，新冠爆发以后的这2019-2022年生命的流逝快到令人崩溃。所以我决定在config.yaml关闭归档功能！

来增加分类小组件吧！ #

2022-01-27 Update

关于如何在Stack主题中增添分类小组件，塔塔写了一篇功能更完善也更清晰的笔记，推荐阅读：右侧栏新增分类小部件

.widget.categories {
    .widget-categories--list {
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        background-color: var(--card-background);
        width: 80%;
    }

    .card-category {
        border-style: solid;
        border-width: 0 0 0 12px;

        a {
            font-size: 1.4rem;
            padding: 18px 25px;
            display: flex;

            span.categories {
                flex: 1;
                color: var(--card-text-color-main);
                font-weight: 1;
            }

        }
    }
}

给目录增添左边框 #

上面作妖完毕后，我决定给目录Toc也加上左边框，理由：我学会了怎么加左边框。目录作为自带的组件，增添这个小小设置应该很简单，事不宜迟，开始动手：

在\assets\scss\partials\layout\article.scss中修改：

.widget--toc {
    background-color: var(--card-background);
    border-radius: 1px (--card-border-radius);
    box-shadow: var(--shadow-l1);
    display: flex;
    flex-direction: column;
    color: var(--card-text-color-main);
    overflow: hidden;
    width: 80%;
    border-style: solid;
    border-width: 0 0 0 12px;
    border-color: #93B5C6; // 增加了四行，更改宽度与左边框

修改左侧导航栏宽度 #

在\assets\scss\partials\sidebar.scss中：

.left-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-self: stretch;

    width: 100%;
    padding: 30px 0 15px 0;
    max-width: none;
    min-width: 15%; // 左侧导航栏的宽度

为Waline评论区增添邮件提醒 #

首先关于如何给Hugo增添评论区请见：Hugo | 为 Blog 增加评论区，表情包添加则是参考了这篇文章：Waline｜添加自定义表情。

有了评论区的很长一段时间我都没有弄邮件提醒，之前看了Waline的官方文档，没看懂，有些畏难情绪。最近胆子大了，于是又开始琢磨这事。现在终于加上了，就写一下流程吧。

先放参考资料：

Waline官方文档

Waline 评论系统的介绍与基础配置

先介绍一下，我的评论区是用Vercel部署的，弄起来非常简单，而使用的发件邮箱（也就是文档中提到的SMTP邮件发送服务提供商）是Gmail。

邮件提醒增加起来也很方便，直接在Vercel部署好的评论区项目里转到Dashboard-Setting-Environment Variables，进行环境变量配置，在NAME中添加上面官方文档中提到的变量名，VALUE中添加变量值，然后ADD上去就好啦！我只添加了必填的内容，添加成功后是这样的：

在这里如果你也是用Gmail邮箱，需要注意一件事情，由于Google的安全意识非常之高，所以在SMTP_PASS密码这一项中，不能直接填你的邮箱密码，而需要填应用专用密码，如何创建应用专用密码，请见Gmail的文档帮助：创建和使用应用专用密码。

之后，还要记得要去设置中开启IMAP访问（据说163邮箱也需要这两步）。具体操作请见：通过其他电子邮件平台查看 Gmail，完成第一步即可。

完成上述操作后还需要回到Vercel中重新部署你的评论区项目：点进项目→Deployments→对最上方那一条，点击右侧的三个点→Redeploy。

实不相瞒，由于Redeploy需要很久，还有很多Warning出现，等得我超慌的！不过等部署成功之后看到有邮件提醒出现，一切都明亮了起来！由于我还不清楚怎么设置邮件模板，所以使用的还是Waline的默认模板，它长这样：

取消设备与浏览器版本显示 #

在我增添邮件提醒功能、Redeploy了Waline之后，发现评论者昵称下方会出现设备与浏览器的版本号。我猜测是Waline的新功能，但是对我来讲太多余了😿Waline，我真的不需要了解网友那么多信息啦！

搜寻官方文档和Issue无果，只好进群询问。经作者回复，找到了DISABLE_USERAGENT这个环境变量，用上文的方法，将这个变量值设置成true，然后重新部署即可。Waline的其他环境变量在这里可以找到：服务端配置。

在Archive页中加入Tag云 #

因为修改了以下主题，取消掉了右侧边栏的组件，但又想要Tag云，决定在Archive页面中实现。动手吧！

在layouts\_default\archives.html中的第14行的{{ end }}后面（也就是Archive页面中的Categories下面）加入以下内容

    {{- $taxonomy := $.Site.GetPage "taxonomyTerm" "tags" -}} 
    {{- $terms := $taxonomy.Pages -}}
    {{ if $terms }}
    <h2 class="section-title">{{ $taxonomy.Title }}</h2>
    <div class="subsection-list">
        <div class="article-list--tagtile">
            {{ range $terms }}
                {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
            {{ end }}
        </div>
    </div>
    {{ end }}

之后在assets\scss\partials\layout\list.scss中，搜索出.subsection-list这一条，在它的中括号{ }中加入以下内容：

    .article-list--tagtile {
        display: flex;
        padding-bottom: 10px;
        flex-wrap: wrap; //实现Archive中的Tag卡片自动换行

        article {
            width: auto; //改爲200px
            height: auto; //改爲50px
            margin-left: 7px; 
            margin-right: 5px; //改爲5px
            margin-top: 7px; //新增一行
            flex-shrink: 0;
            box-shadow: var(--shadow-l2); //改个卡片阴影

            .article-title {
                margin: 0;
                font-size: 1.4rem;
            }

            .article-details {
                padding: 15px 22px;
            }

        }
    }

从而美美实现以下效果：

页面主体内容宽度更改 #

在取消右侧栏小组件之后（这个直接在config.yaml中取消即可），主题内容变得很宽，所以想要修改一下宽度。折腾很久终于做到。

在assets\scss\grid.scss中修改以下内容

    &.compact {
        @include respond(md) {
            --left-sidebar-max-width: 25%;
            max-width: 768px;
        }

        @include respond(lg) {
            max-width: 1024px;
            --left-sidebar-max-width: 20%;
        }

        @include respond(xl) {
            max-width: 1050px; //主版面宽度改为1050px
        }
    }
}

然后左侧栏忽然变得拥挤起来，所以需要再改动一下assets\scss\partials\menu.scss中的这一部分：

        @include respond(md) {
            width: 80%; //修改为80%
            text-align:left; 
            padding: 0px; 
        }

取消掉小组件后唯一麻烦的地方在于没有内容目录啦XD有点可惜呢！