Back

Log

记录一些比较大的装修

全站字数统计

参考：Hugo | Hugo-stack-theme 主题魔改版
在\hugo-theme-stack\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" }} <a href="https://stack-theme-mod.vercel.app/">Example Site</a>·<i class="fas fa-bell"></i> <a id="days">0</a>Days<br>
      {{$var :=  $scratch.Get "total"}}{{$var = div $var 100.0}}{{$var = math.Ceil $var}}{{$var = div $var 10.0}}共书写了{{$var}}k字·共 {{ len (where .Site.RegularPages "Section" "post") }}篇文章</br><span><p>
    </section>

更改分类标签的颜色

在博客目录\content新增文件夹categories，分别给每个分类新建文件夹并在该文件夹内建立_index.md文件。如分类名为 “没有说明书的人生”，则建立文件夹 没有说明书的人生和文件_index.md，并在该md文件中写入如下内容：

---
title: "没有说明书的人生"
description:  # 分类说明，可不填
style:
    background: "#96c8a2"  # 标签颜色
    color: "#fff"  # 文字颜色
---

友链

参考：忘记哪里抄的了，等找到再添加。
在主题文件夹\hugo-theme-stack\assets\scss\partials\layout中新建文件links.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: 720px) {
    .friend-link-div {
        width: 92%;
        margin-right: auto;
    }

    .friend-bio {
        margin: auto;
        align-content: center;
        justify-content: left;
    }

    .friend-link-avatar {
        width: 84px;
        margin: auto;
    }

    .friend-name {
        font-size: 14px;
        font-style: normal;
        font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
    }
}

在文件links.md中编辑友链页面的具体内容，其中友链添加的格式为：

{{&lt; friend name="Blogname" url="link.to.blog" avatar="link.to.avatar" bio="blog description" &gt;}}

其中&lt;应为<，&gt;应为>。用尖括号会使上面这行代码被编译，找不到合适的方法避免在这里被编译，因此使用html标签代替。

添加评论

参考：Waline 快速上手
根据教程中提到的步骤，先在LeanCloud 国际版注册应用，再到Vercel部署，最后修改主题配置文件中的comments部分。

comments:
        enabled: true
        provider: waline

        waline:
            serverURL: #vercel 提供的仓库链接
            lang:
            visitor:
            avatar: 'monsterid'
            emoji:
                - https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo
            requiredMeta:
                - name
                - email
            placeholder:
            locale:
                admin: Admin

为文章添加上一篇下一篇

参考：博客迁移——Hugo使用整体概览
在主题文件夹中\hugo-theme-stack\layouts\partials\article\components新建文件prevnext.html，写入如下内容：

{{$prev := .PrevInSection}}
{{$next := .NextInSection}}

{{if or $prev $next}}
<div class="clearfix">
<ul class="prevnext">
{{if $prev}}
    <li style="list-style: none; margin: 0; padding: 0;">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <a href="{{$prev.Permalink}}">
            &lt; {{$prev.Title}}
          </a>
        </div>
        <div>
          {{if $next}}
            <a href="{{$next.Permalink}}">
              {{$next.Title}} &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            </a>
          {{end}}
        </div>
      </div>
    </li>
  {{end}}
</ul>
</div>
<hr style="border: none;">
{{end}}

在文件\hugo-theme-stack\layouts\partials\article\article.html合适的位置添加引用：

    <!-- 原有内容 -->
    {{ partial "article/components/footer" . }} 
    <!-- 新增内容 -->
    {{ partial "article/components/prevnext" . }}

调整文章页面显示样式

参考：不是从零开始的 Hugo 建站笔记
新建或修改文件\hugo-theme-stack\layouts\partials\widget\toc.html，写入以下内容：

{{ if (.Scratch.Get "hasTOC") }}
    <section class="widget archives">
        <div class="widget-icon">
            {{ partial "helper/icon" "hash" }}
        </div>
        <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
        
        <div class="widget--toc">
            {{ .TableOfContents }}
        </div>
    </section>
{{ end }}

修改文件\hugo-theme-stack\layouts\_default\single.html：

{{ define "body-class" }}
    {{ $TOCEnabled := default (default false .Site.Params.article.toc) .Params.toc }}
    {{- .Scratch.Set "hasTOC" (and (ge (len .TableOfContents) 100) $TOCEnabled) -}}
    article-page
{{ end }}

{{ define "container-class" }}
    <!-- {{ if (.Scratch.Get "hasTOC") }}
        extended
    {{ else }}
        on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}
    {{ end }} -->
    on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}
{{ end }}

{{ define "main" }}
    {{ partial "article/article.html" . }}

    {{ partial "article/components/related-contents" . }}
     
    {{ if not (eq .Params.comments false) }}
        {{ partial "comments/include" . }}
    {{ end }}

    {{ partialCached "footer/footer" . }}

    {{ partialCached "article/components/photoswipe" . }}
{{ end }}

{{ define "left-sidebar" }}
    <!-- {{ if (.Scratch.Get "hasTOC") }}
        <div id="article-toolbar">
            <a href="{{ .Site.BaseURL | relLangURL }}" class="back-home">
                {{ (resources.Get "icons/back.svg").Content | safeHTML }}
                <span>{{ T "article.back" }}</span>
            </a>
        </div>
    {{ else }}
        {{ partial "sidebar/left.html" . }}
    {{ end }} -->
<div id="article-toolbar">
    <a href="{{ .Site.BaseURL }}" class="back-home">
        {{ (resources.Get "icons/back.svg").Content | safeHTML }}
        <span>{{ T "article.back" }}</span>
    </a>
</div>
    {{ partial "sidebar/left.html" . }}
{{ end }}

{{ define "right-sidebar" }}
    <!-- {{ if (.Scratch.Get "hasTOC") }}
        <aside class="sidebar right-sidebar sticky">
            <section class="widget archives">
                <div class="widget-icon">
                    {{ partial "helper/icon" "hash" }}
                </div>
                <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
                
                <div class="widget--toc">
                    {{ .TableOfContents }}
                </div>
            </section>
        </aside>
    {{ else }}
        {{ partial "sidebar/right.html" . }}
    {{ end }} -->
    {{ partial "sidebar/right.html" . }}
{{ end }}

别人用这个方法都成功了，但我的就是改不了，生气！
突然成功了，我也不懂为什么！

首页以外的文章卡片也显示 description

参考：博客迁移——Hugo使用整体概览
修改文件\hugo-theme-stack\layouts\partials\article-list\compact.html,在文章标题</h2>下增加内容：

            <h2 class="article-title">
                {{- .Title -}}
            </h2>
            {{ with .Params.description }}
            <p>{{ . }}</p>
            {{ end }}

修改左侧菜单的行间距

在hugo-theme-stack\assets\scss\partials\menu.scss修改相应部分：

    @include respond(xl) {
        margin-top: 15px; // 调整menu和头像之间的距离
    }

    li {
        position: relative;
        vertical-align: middle;
        padding: 10px 30px;

        &:not(:last-of-type) {
            margin-bottom: 3px; //调整menu元素之间的距离

            @include respond(xl) {
                margin-bottom: 3px; //调整menu元素之间的距离
            }
        }

在hugo-theme-stack\assets\scss\partials\sidebar.scss修改相应部分：

    #dark-mode-toggle {
        margin-top: 30px; // 调整dark mode键与menu之间的距离
    }

代码块增加限高

参考：Hugo | 另一篇 Stack 主题装修记录

在/assets/scss/partials/layout/article.scss中的 pre 部分增加代码：

    pre {
        overflow-x: auto;
        max-height: 230px;
        }

修改light mode的颜色

修改hugo-theme-stack\assets\scss\variables.scss和hugo-theme-stack\assets\scss\partials\highlight\light.scss中的相关部分。

Licensed under CC BY-NC-SA 4.0
© 2019 - 2024     − 273.15 ℃
共 195 篇文章 · 311767 字

Built with Hugo
Theme Stack designed by Jimmy