博客优化

hugo优化记录

添加折叠内容shortcodes

1
2
3
4
5


# layouts/shortcodes/detail.html
<details>
    <summary>{{ (.Get 0) }}</summary>
    {{ .Inner | markdownify }}
</details>

使用方法

生效了

(〃`𓎟´〃) 天才ですから！

添加博客运行时间

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


#layouts/partials/footer/custom.html
<!-- Add blog running time -->
<script>
    function updateTime() {
        let s1 = '2022-5-18'; // website start date
        s1 = new Date(s1.replace(/-/g, "/"));
        let s2 = new Date();
        let timeDifference = s2.getTime() - s1.getTime();

        let days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
        let hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

        let result = days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
        document.getElementById('runningdays').innerHTML = result;
    }

    // 每隔一秒钟调用一次updateTime函数
    setInterval(updateTime, 1000);
</script>

1
2
3
4
5
6


#layouts/partials/footer/footer.html
<!-- Add blog running time -->
<section class="running-time">
本博客已稳定运行
<span id="runningdays" class="running-days"></span>
</section>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


#assets/scss/partials/footer.scss
.running-time {
    color: var(--card-text-color-secondary);
    font-weight: normal;

    .running-days {
        font-weight:bold;
        color: var(--emphasize-text-color);
    }   
}

在归档页添加标签云

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


#layouts/_default/archives.html  </header>标签之后
{{- $taxonomy := $.Site.GetPage "taxonomyTerm" "tags" -}}
{{- $terms := $taxonomy.Pages -}}
{{ if $terms }}
<section class="widget tagCloud">
<h2 class="section-title">{{ $taxonomy.Title }}</h2>

    <div class="tagCloud-tags">
        {{ if ne (len $.Site.Taxonomies.tags) 0 }}
            {{ range $name, $taxonomy := $.Site.Taxonomies.tags }}
                {{ $tagCount := len $taxonomy.Pages }}
                <a href="{{ "/tags/" | relURL }}{{ $name | urlize }}" class="tagCloud-tags">
                    {{ $name }}<span class="tagCloud-count">{{ $tagCount }}</span>
                </a>
            {{ end }}
        {{ end }}
    </div>
<section>
{{ end }}

1
2
3
4
5
6


#assets/scss/partials/widgets.scss
.tagCloud {
    .tagCloud-count {
        color: var(--body-text-color);
    }
}

在归档列表显示文章副标题/简介

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


#assets/scss/partials/article.scss
找到.article-list--compact
.article-subtitle {
    margin-top: -5px;
    font-size: 1.5rem;

    @include respond(md) {
        font-size: 1.6rem;
    }
}

1
2
3
4
5
6
7
8
9


#layouts/partials/article-list/compact.html
<h2 class="article-title">
    {{- .Title -}}
</h2>
{{ with .Params.description }}
<div class="article-subtitle">
    {{ . }}
</div>
{{ end }}

添加私信小气泡

详情见这位博主：Third Shire 的装修笔记

添加返回顶部按钮

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


#/layouts/partials/widget/toc.html
widget--toc盒子之后

<a href="#" id="back-to-top"><image src="/photos/top.png"></image></a>

文件最后
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
    // Check to see if the window is top if not then display button
    $(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#back-to-top').fadeIn();
    } else {
        $('#back-to-top').fadeOut();
    }
    });

    // Click event to scroll to top
    $('#back-to-top').click(function() {
    $('html, body').animate({scrollTop: 0}, 1000);
    return false;
    });
</script>

#custom.css
// 返回顶部按钮
$hover: 0.2s ease-in-out;
#back-to-top {
    bottom: -60px;
    right: 2px;
    display: none;
    position: absolute;  
    border: 0;
    transition: transform $hover;
    &:hover {
      transform: translateY(-10px);
    }
}