Blog更新汇总

添加utteranc评论

首先github授权utteranc。

针对github-style主题，在themes/github-style/layouts/partials/下，创建utteranc.html文件。

{{ if .Site.Params.Utteranc.enable }}
<script src="https://utteranc.es/client.js"
        repo="{{ .Site.Params.Utteranc.owner }}/{{ .Site.Params.Utteranc.repo }}",
        issue-term="title"
        label="💬"
        theme="{{ .Site.Params.Utteranc.theme }}",
        crossorigin="anonymous"
        async>
</script>
<noscript>Please enable JavaScript to view the <a href="https://github.com/utterance">comments powered by utterances.</a></noscript>
{{ end }}

然后，修改themes/github-style/layouts/_default/single.html文件

{{ define "content" }}
{{ partial "toc.html" .}}
{{ partial "post.html" .}}
{{ partial "gitalk.html" . }}
{{ partial "utteranc.html" . }} // 添加
{{end }}

最后，在config.toml中增加配置

[params]
  [params.utteranc]
    enable = true
    owner = "your_github_name"
    repo = "blog"
    issueTerm = "pathname"
    theme = "icy-dark"

添加github action部署（20230428）

详情见链接

增加回到顶部

20230505

针对github-style主题，在theme的static目录下增加js文件

// Progress bar part
let progress_meter = document.getElementById("progress_meter");

let height = document.body.scrollHeight - screen.height;
let last_position = window.scrollY;

function update_progress_meter () {
  height = document.body.clientHeight - window.innerHeight;
  current_position = window.scrollY;

  progress = Math.ceil((current_position / height) * 100);
  // Makes it looks better...
  if (height == 0) {
    progress = 100;
  } else if (progress < 0) {
    progress = 0;
  } else if (progress > 100) {
    progress = 100;
  } 
  
  progress_meter.innerText = progress + "%";
}

let ticking = false;
window.addEventListener('scroll', function(e) {
  if (!ticking) {
	window.requestAnimationFrame(function() {
	  update_progress_meter();
	  ticking = false;
	});

	ticking = true;
  }
});

progress_meter.style.textDecoration = 'none';
update_progress_meter();

在layouts/partials/script.html中，引入js

<!-- top 标记 -->
<script type="application/javascript" src='{{ "js/progress-meter.js" | absURL }}'></script>

在layouts/partials/baseof.html中，加入按钮块

<div id="action-botton">
  <div class="action-wrapper">
    <div class="action meter">
      <span id="progress_meter">JS</span>
    </div>
    <a href="#top" class="action up no-dot">
      <svg xmlns='http://www.w3.org/2000/svg' class='icon' viewBox='0 0 512 512'><title>Arrow Up</title><path fill='none' stroke='currentColor' stroke-linecap='square' stroke-miterlimit='10' stroke-width='96' d='M112 244l144-144 144 144M256 120v292'/></svg>
    </a>
  </div>
</div>

增加动漫名言

20230505

针对github-style主题，在theme的static目录下增加js文件

var binft = function(r,n) {
    // 将 n 数组中的所有元素转换为字符串
    var n = n.map(function(t) {
            return t + "";
      })
      , i = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"]
      , l = { // 定义打字动画的状态对象
        text: "",
        prefixP: -5,
        skillI: 0,
        skillP: 0,
        direction: "forward",
        delay: 2,
        step: 1
    };

    // 将 n 数组中的元素随机排序
    n.sort(function() {
        return Math.random() - 0.5;
    });
    
    // 定义递归函数 t()，实现打字动画效果
    !function t() {
        var e = n[l.skillI];
        l.step ? l.step-- : (l.step = 1,
        l.prefixP < "".length ? (0 <= l.prefixP && (l.text += ""[l.prefixP]),
        l.prefixP++) : "forward" === l.direction ? l.skillP < e.length ? (l.text += e[l.skillP],
        l.skillP++) : l.delay ? l.delay-- : (l.direction = "backward",
        l.delay = 2) : 0 < l.skillP ? (l.text = l.text.slice(0, -1),
        l.skillP--) : (l.skillI = (l.skillI + 1) % n.length,
        l.direction = "forward")),
        r.textContent = l.text,
        r.appendChild(function(t) {
            for (var e = document.createDocumentFragment(), r = 0; r < t; r++) {
                var n = document.createElement("span");
                n.textContent = String.fromCharCode(94 * Math.random() + 33),
                n.style.color = i[Math.floor(Math.random() * i.length)],
                e.appendChild(n)
            }
            return e
        }(l.prefixP < "".length ? Math.min(5, 5 + l.prefixP) : Math.min(5, e.length - l.skillP))),
        setTimeout(t, 75)
    }()
};
var divElement=document.getElementById("binft");
var descElement=document.getElementById("anime-aphorisms");
var myArray = JSON.parse(descElement.textContent);
binft(divElement,myArray)

在config.toml中新增参数

[params]
  Aphorisms = [
      "与其装点自己的终焉，不如漂亮地活到最后。——《银魂》",
      "真実はいつもひとつ。——《名侦探柯南》",
      "安西教练，我想打篮球。——《灌篮高手》",
      "逃げちゃだめだ逃げちゃだめだ逃げちゃだめだ 不可以逃避！不可以逃避！不可以逃避！——《新世纪福音战士》",
      "海賊王になる男です 我是要成为海贼王的男人！——《海贼王》",
      "我が生涯に一片の悔いなし 吾之一生，无憾无悔。——《北斗神拳》",
      "あきらめたらそこで試合終了だよ 一旦放弃，比赛就会在那一刻结束。——《灌篮高手》",
      "我不知道离别的滋味是这样凄凉，我不知道说声再见要这么坚强。——《千与千寻》",
      "外見をあまり気にしないでください。心が一番大切です 不要对外表过分在意，心灵才是最重要的。——《魔女宅急便》",
      "なんとかなるよ！絶対大丈夫だよ 一定有办法的，肯定没问题。——《魔卡少女樱》",
      "まっすぐ自分の言葉は曲げねぇ それがオレの忍道だ 我说到做到，这就是我的忍道！——《火影忍者》",
      "ピカチュウ、行きましょう 去吧，皮卡丘！——《神奇宝贝》",
      "月を代表してあなたを滅ぼします 我要代表月亮消灭你！——《美少女战士》。",
  ]

在layouts/partials/overview.html中，修改代码

<article class="markdown-body entry-content container-lg f5">
  {{- .Content -}}
  <div id="anime-aphorisms"><p id="binft">{{ .Site.Params.Aphorisms | jsonify }}</p></div>
</article>
<!-- 闪动字体 -->
<script type="application/javascript" src='{{ "js/binft.js" | absURL }}'></script>

更换字体

20230506

增加Algolia搜索

20230507

增加sakana小人

20230507

增加相册

20230509

展示效果

命运

添加步骤

采用的是nanogallery2插件，具体的配置文档：nanogallery2用法指导

详情见链接

前往

增加内链

20230509

展示效果

Hugo 支持相册

日期: 2023-05-09 标签: #hugo

利用hugo插件nanogallery2支持相册 ......

文件路径

在layouts/shortcodes目录下（没有则创建目录），新建一个名为innerlink.html的文件。

添加代码

<div style="height: 200px;margin: 1em auto;position: relative;
        box-shadow: 0 2px 4px rgb(0 0 0 / 25%), 0 0 2px rgb(0 0 0 / 25%);
        border-radius: 15px;padding: 23px;max-width: 780px;background: var(--entry);">
    {{ $url := .Get "src" }}
    {{ with .Site.GetPage $url }}
    <div style="font-size: 22px; font-weight: 600">
        <a target="_blank" href="{{ .Permalink }}" style="box-shadow: none">{{ .Title }}</a>
    </div>
    <span style="font-size: 14px; color: #999">
        日期: {{ .Date.Format ( default "2006-01-02") }}
        {{ if .Params.tags }}&nbsp;
        标签:
        {{ range .Params.tags }}
            #{{ . }}&nbsp;
        {{ end }}
    </span>
    <div style="font-size: 14px; line-height: 1.825;max-height: 75px; overflow: hidden;margin-top: 5px;">
        {{ .Summary | plainify}} ......
    </div>
    {{ end }}
    {{ end }}
</div>

增加按钮

20230509

展示效果

前往Google

文件路径

在layouts/shortcodes目录下（没有则创建目录），新建一个名为button.html的文件。

添加代码

{{ $_hugo_config := `{ "version": 1 }` }}
<a {{ with .Get "href"}} href="{{.}}" target="_blank" {{ end }} class="btn btn-default">
  {{ $icon := .Get "icon" }}
  {{ $iconposition := .Get "icon-position" }}
  {{ if ($icon) }}
    {{ if or (not ($iconposition)) (eq $iconposition "left") }}
  <i class="{{$icon}}"></i>
    {{ end }}
  {{ end }}
  {{ .Inner }}
  {{ if and ($icon) (eq $iconposition "right")}}
  <i class="{{$icon}}"></i>
  {{ end }}
</a>

增加提示

20230509

展示效果

支持两种风格

hugo-notice风格
自定义风格

hugo-notice展示

莫听穿林打叶声，何妨吟啸且徐行。

竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。

料峭春风吹酒醒，微冷，山头斜照却相迎。

回首向来萧瑟处，归去，也无风雨也无晴。

自定义展示

莫听穿林打叶声，何妨吟啸且徐行。

竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。

料峭春风吹酒醒，微冷，山头斜照却相迎。

回首向来萧瑟处，归去，也无风雨也无晴。

实现方式

点击查看

增加github shortcode

20230701

展示效果

img2hub

A Chrome extension that uploads PNG and JPG images from web pages to GitHub, power by me and chatgpt.

Javascript

文件路径

在layouts/shortcodes目录下（没有则创建目录），新建一个名为github.html的文件。
在static/css目录下（没有则创建目录），新建一个名为shortcode-github.css的文件。
在data/SVG.toml文件中（没有则创建文件），中增加一行repository svg配置

添加代码

github.html

<link rel="stylesheet" href='{{ "css/sc-github.css" | absURL }}' />
<div class="github">
    <div class="logo">
        {{ replace $.Site.Data.SVG.repository "icon" "icon github-icon" | safeHTML }}
        <a class="name" href={{ .Get "link" }} target="_blank">{{ .Get "name" }}</a>
    </div>
    <div class="description">{{ .Get "description" }}</div> 
    <div class="language">
        <span class="language-color" style="background-color: {{ .Get "color" }}"></span>
        <span class="language-name">{{ .Get "language" }}</span>
    </div>
</div>

shortcode-github.css

.github {
    border: 1px solid #31655f;
    border-radius: 3px;
    margin: 0 auto;
    margin-bottom: 1em;
    padding: 1em;
    .github-icon {
        width: 1.2em;
        height: 1.2em;
        margin-right: 0.5em;
        margin-bottom: 0.2em;
        fill: var(--color-contrast-high);
        transition: all .5s;
    }
    .name {
        font-weight: bold;
        color: var(--color-primary);
        text-decoration: none;
    }
    .description {
        margin-top: 0.5em;
        margin-bottom: 1em;
        color: var(--color-contrast-high);
        text-align: justify;
        font-size: 90%;
        transition: all .5s;
    }
    .language-color {
        position: relative;
        top: 1px;
        display: inline-block;
        width: 0.75em;
        height: 0.75em;
        border-radius: 50%;
    }
    .language-name {
        color: var(--color-contrast-high);
        font-size: 90%;
        margin-left: 0.5em;
        transition: all .5s;
    }
}

svg配置

repository = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/></svg>'

我的名字叫浩仔/Blog更新汇总

添加utteranc评论

添加github action部署（20230428）

增加回到顶部

增加动漫名言

更换字体

增加Algolia搜索

增加sakana小人

增加相册

展示效果

添加步骤

增加内链

展示效果

文件路径

添加代码

增加按钮

展示效果

文件路径

添加代码

增加提示

展示效果

hugo-notice展示

自定义展示

实现方式

增加github shortcode

展示效果

文件路径

添加代码

github.html

shortcode-github.css

svg配置