Migrate to Hugo

修改主题的想法

之前的 Next 用了有一年多了，自己也做了各种修改，比如加个背景、改个字体之类的。但最近发现由于我硬改了一些颜色，导致深色模式下没什么问题，但浅色模式下就有一个模块是黑色的，很难看，又懒得找当时自己写的代码在哪儿了。

另一个原因是队友们都跟风用 Next 主题，难免有点审美疲劳。最终就决定给自己换个主题。

本来的选择

其实最一开始并没有打算换成 Hugo，毕竟 Hexo 又不是不能用，既然很多东西都配置好了，那换个主题直接生成多好。于是我精挑细选选了个一个 Hexo 主题：https://github.com/Haojen/hexo-theme-Claudia。

然而配置的时候发现好像因为 npm 的原因，scss 文件一直跑不起来，很多 css 文件无法生成，于是就想干脆迁移到 Hugo，这样还省得配 npm 了。

结识 Hugo stack

最初看到 Hugo 其实是在帮 web 手收集博客的时候看到了陆队的博客，正好记录了迁移到 Hugo 的过程。博客里讲了 Hugo 的静态网页生成速度很快。联想到自己的博客垃圾文章也越来越多，Hexo 确实有点慢了，Hugo 也许以后会是个不错的选择。

后来想要帮校队搭个博客，于是决定试试 Hugo。最一开始看中的是 Hugo Bootstrap Theme，想把背景改一下颜色，但是失败了，于是又找了找主题，发现 Stack 更好看，于是干脆就拿 Stack 搭了，而后来才发现，原来陆队的博客也是 stack 主题，看来审美从来没有变过 😂。

于是，在 Claudia 配置失败后，我果断转到了 Hugo Stack 主题。

目前的修改

友链

Stack 主题本身是不带友链的，作者应该是正在写，但比较忙，也不知道什么时候能写完，于是就看了看别人的方案。直接搜能搜到一个方案，但讲得不是特别清楚，搭建失败了。后来在 pull request 里面发现有人实现了一个，作者没有采纳而已，于是就以这个作为临时方案了。

主题 assets/scss/style.scss 27行添加：

@import "partials/layout/links.scss";

新建 assets/scss/partials/layout/links.scss

/* Place your custom SCSS in HUGO_SITE_FOLDER/assets/scss/custom.scss */

// 头像边框颜色
$avatar-border-color: #566a82;
$avatar-border-color-dark: 	#C0C0C0;

// style-card 背景色
$friend-link-background-color: #51a8ca10;
$friend-link-background-color-dark: #69697141;

// 友链 name 原始色
$friend-link-color: #11a1a2;
$friend-link-color-dark: #ffffff;

// 友链 name 气泡响应对比色
$friend-link-hover-color: #ea4e2f;
$friend-link-hover-color-dark:	rgb(241, 213, 159);

// bio 简介上下文
$context-color: #404040;
$context-color-dark:	#c0c0c0;

// 友链头像及头像边框的样式
.friend-avatar {
    width: 56px;
    height: 56px;
    padding: 2px;
    margin-top: 14px;
    margin-left: 14px;
    border-radius: 15px;
    border: 3.6px inset $avatar-border-color;
    [data-scheme=dark] & {
        border: 3.6px inset $avatar-border-color-dark;   
    }
}

.friend-link-div {
    // 实现卡片双栏排列效果
    height: auto;
    margin-top: auto;
    margin-inline-start: 4.5%;
    width: 43%;
    display: inline-block !important;

    // 控制上下连续排列的卡片之间的行距
    margin-bottom: 11px;

    // 卡片圆角
    border-radius: 7px 7px 7px 7px;

    // 卡片阴影
    -webkit-box-shadow: 0px 14px 32px 0px rgba(231, 224, 224, 0.15);
    -moz-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0.7px 1px 6px 0px rgba(0, 0, 0, 0.16);

    // 卡片背景色
    background: $friend-link-background-color;
    [data-scheme=dark] & {
        background: $friend-link-background-color-dark;
    }

    // 卡牌气泡响应动画
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.15s ease;
    &:hover {
        transform: scale(1.03);
    }
}


.friend-link-avatar {
    width: 92px;
    float: left;
    margin-right: 2px;

}

// name 特效样式， hover 气泡效果,友链 name 变色
.friend-link-info {
    margin-top: 13px;
    margin-right: 18px;
    color: $friend-link-color;

    [data-scheme=dark] & {
        color: $friend-link-color-dark;
    }
    &:hover {
        color: $friend-link-hover-color;
        [data-scheme=dark] & {
            color: $friend-link-hover-color-dark;
        }
    }
}

// name 文字样式
.friend-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-style: normal;
    font-family: 'Comic Sans MS',cursive;
    font-size: 16px;

}

// bio 文字样式
.friend-bio {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-top: auto;

    // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
    font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
    font-size: 14px;

    color: $context-color;
    [data-scheme=dark] & {
        color: $context-color-dark;
    }
}

// 响应式页面，允许根据不同的尺寸调整样式
@media screen and (max-width: 600px) {
    .friend-bio {
        display: none;

    }
    .friend-link-avatar {
        width: 84px;
        margin: auto;
    }
    .friend-link-info {
        height: 100%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .friend-name {
        font-size: 14px;
    }
}

接下来只需要在自己的 page 页面下加个 links.md 即可

---
title: "Links 友情链接"
date: 2021-10-01T16:45:06+08:00
slug: "links"
layout: "links"
license: false
toc: false
menu:
    main:
        weight: -80
        pre: link
---

## Friends

{ {< friend name="" url="" avatar="" bio="" >} }

两个大括号之间的空格需要去掉，我这里不去掉的话会显示友链标签（竟然没有考虑到代码块的问题，可以考虑提 issue 了）

文章字数统计

参考 https://coderqs.github.io/2022/02/hugo-stack-%E4%B8%BB%E9%A2%98%E8%A3%85%E4%BF%AE%E7%AC%94%E8%AE%B0

layouts/partials/article/components/details.html

        {{ if .Site.Params.article.readingTime }}
            <div>
                {{ partial "helper/icon" "brush" }}
                <time class="article-words">
                    {{ T "article.wordCount" .WordCount }}
                </time>
            </div>

i18n/en.yaml 的 article 中添加

    wordCount:
        other: "{{ .Count }} words"

站点上线时间统计、总字数统计

参考 https://coderqs.github.io/2022/02/hugo-stack-%E4%B8%BB%E9%A2%98%E8%A3%85%E4%BF%AE%E7%AC%94%E8%AE%B0

layouts\partials\footer\footer.html

修改：

<section class="copyright">
    &copy;
    {{ if and (.Site.Params.footer.since) (ne .Site.Params.footer.since (int (now.Format "2006"))) }}
        {{ .Site.Params.footer.since }} -
    {{ end }}
    {{ now.Format "2006" }} {{ .Site.Title }} <br />
    已运行 <i class="fas fa-bell"></i> <a id="days">0</a> 天
    {{$scratch := newScratch}}
    {{ range (where .Site.Pages "Kind" "page" )}}
        {{$scratch.Add "total" .WordCount}}
    {{ end }}

    ⌨ {{ div ($scratch.Get "total") 1000.0 | lang.FormatNumber 2 }}k 字 🧠 {{ len (where .Site.RegularPages "Section" "post") }} 篇文章
</section>

最后添加

<script>
    var s1 = '2022-01-01';
    s1 = new Date(s1.replace(/-/g, "/"));
    s2 = new Date();
    var days = s2.getTime() - s1.getTime();
    var number_of_days = parseInt(days / (1000 * 60 * 60 * 24));
    document.getElementById('days').innerHTML = number_of_days;
</script>

站点信息居中

参考 https://coderqs.github.io/2022/02/hugo-stack-%E4%B8%BB%E9%A2%98%E8%A3%85%E4%BF%AE%E7%AC%94%E8%AE%B0

修改 assets/scss/partials/sidebar.scss

.site-avatar {
    position: relative;
    margin: 0;
    margin-left: auto; //站点头像居中
    margin-right: auto; //站点头像居中
    width: var(--sidebar-avatar-size);
    height: var(--sidebar-avatar-size);

    margin-bottom: var(--sidebar-element-separation);

    .site-logo {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        box-shadow: var(--shadow-l1);
    }


.site-name {
    color: var(--accent-color);
    text-align: center; //站点名称居中
    font-size: 1.8rem;

    @include respond(2xl) {
        font-size: 2rem;
    }
}

.site-description { 
    color: var(--body-text-color);
    font-weight: normal;
    text-align: center; //站点描述居中
    font-size: 1.6rem;

    @include respond(2xl) {
        font-size: 1.8rem;
    }
}

修改 assets/scss/partials/memu.scss

.social-menu {
    list-style: none;
    padding: 0%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    
    svg {
        width: 24px;
        height: 24px;
        stroke: var(--body-text-color);
        stroke-width: 1.33;
    }
}

目前的问题

在迁移博客的时候顺便稍微整合了一下以前的一些文章，但同时也发现了问题，之前用 Hexo 的时候，习惯用 <--!more--> 来写摘要，所以就使得摘要习惯性地放了目录，目前还没能在 Hugo 中找到对应的解决方案，所以可能以后的博客归纳思路需要改一改，但之前的应该就这样了。