椒盐豆豉

静态博客一年啦！Hugo 装修小记之三

May 31, 2024
重启电脑
tutorial | hugo | code | blog

MidJourney prompt: pixel art style person decorating their home --ar 16:9

本文总计 3.96k 字, 阅读约需要 9 分钟

不知不觉从 Wordpress 迁到 Hugo 竟然已经一年了，本非建站博主竟然装修笔记也已经写了第三篇（[一], [二]）了，果然静态博客前端代码好改就会忍不住开始折腾，想要的功能发现没有就会随时加上去，又积攒了写各种小修改，趁着静态博客一周年一起发了。会首先像半年时候一样总结下半年来的新内容，想看装修笔记的可以直接前往装修环节。

内容 #

最受欢迎的博文 #

排名第一二的都是半年前就第一位的 2023 年了你为什么需要写博客和从第五来到第二的美国码农前半段职业发展道路（career ladder）（旧文，都是搜索来的有机流量（换了静态博客之后占我博客流量的 20%，比用 wordpress 时候多了不少，不知道是不是偶然现象。这篇还是用 wordpress 时候写的呢！），再往后翻也有许多前半年的访问量排在新文前面。看来我新发的博文要加油了！新文章里：

  1. 「被裁记」 - 不出意料，毕竟这半年的最大生活状态变化就是被裁，写个啥都要隔三差五自己引用一下，又跟现在大市场环境比较相关。浪了小半年，对晚点旅行回来就要开始进行的找工作有种又本能厌恶又有点陌生刺激的感觉……
  2. 「一些低门槛的实用上网小技巧」 - 完全没想到这篇会受欢迎，写之前犹豫了好久因为觉得可能大家都已经知道了写出来没什么用，没想到还有挺多反馈说有学到新东西的！
  3. 「静态博客半年记」 - 套娃了哈哈哈！
  4. 「租房还是买房，公寓还是 house」 - 从租公寓到买 house 再到现在又租了两年公寓又变回了挺坚挺的不买党，这篇充满私货的万字长文终于被我给写了！觉得自己有理有据，能拦住一个不适合的是一个。
  5. 「2024 新年理财和羊毛待办清单」 - 随着理财理念成熟没啥新发现，就好久不写啥纯理财文了。年初薅羊毛写了这篇。

我最喜欢的新博文 #

旧的在这里内容就不重复了，这半年新写的里最喜欢的五篇：

特定读者群 #

本来想像上期一样找找有机流量博文访问量，翻了好几页发现都是之前写的旧博文，最高的被裁那篇都排到第 21 了，遂作罢。想到逐渐加了些博客聚合站，如[积薪]、[川流]，还写教程有了一些引用，读者人群又跟我之前的非常不同，就挑几家说吧：

装修 #

首页显示最新文章/静态彩色 tag #

之前我的首页没有显示博客，需要点进博客才能查看博客，而且是阅读视图不便快速浏览。又觉得专门加个 archive page 有些冗余，于是自己看了下 Hugo doc 提取了前 25 篇文章做成个 list 放在首页。

又觉得光放文章列表有点单调，想提取前三个 tag 给定固定的随机颜色放在文章名后。Hugo 模版里提供了 md5 函数，hash 了之后取前 6 位作为颜色的 hex code，再调整一下透明度，就大功告成了。

<ul>
  {{ range (first 25 (where .Site.RegularPages "Type" "post")) }}
    <li>
      <a href="{{ .RelPermalink}}">{{ .Title }}</a> 
      {{range (first 3 (.Params.tags))}}
        {{ $tagColor := substr (md5 .) 0 6}}
        <!-- hex code attach opacity to end of code, 1A is 10% opacity  -->
        <!-- to add link here, you'd need to search Taxonomies for url, but it doesn't have chinese tag -->
        <div class="tag" style="--tag-color: #{{$tagColor}}1A" >{{ . }}</div>
      {{end }}
      <div class="archive">- {{.Date.Format "2006-01-02"}}</div>
    </li>
  {{ end }}
</ul>

/* css */
.archive {
  display: inline;
  color: var(--gray-500);
  font-size: 0.75em;
}

.tag {
  display: inline;
  padding: 0 $padding-4;
  border-radius: 2px;
  font-size: 0.75em;
  background:var(--tag-color);
  color: var(--gray-500);
}

效果如下：

博客统计 #

重整首页之后把热力图从近况挪到了首页，就顺手又加了个博客统计 shortcode：

{{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
    {{$scratch.Add "total" .WordCount}}
{{ end }}

博文数量： {{ len (where .Site.RegularPages "Section" "posts") }} 篇 | 累计字数： {{div ($scratch.Get "total") 10000.0 | lang.FormatNumber 1 }} 万字

相关文章 #

Hugo 自带了通过分类和 tag 选取相关文章的功能，直接引用 .Site.RegularPages.Related，取前 5 篇，放到一个 list 里。缺点是这个计算方式只会给出引用当篇文章之前发布的文章，之后发布的即便更相关也不会向前更新了。先凑合着用吧。

{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h2>相关阅读</h2>
<ul>
 {{ range . }}
 <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
 {{ end }}
</ul>
{{ end }}

剧透/Content Warning 模糊 #

加了一个鼠标 hover/手机点击消除模糊的 shortcode，效果如下：
我是剧透
。

<div class="spoiler">{{ index .Params 0 }}</div>

/* css */
.spoiler {
  filter: blur(4px);
  display: inline;
  &:hover {
    filter: blur(0);
  }
}

此处有个 tricky 的地方不知道是我的模版问题还是 Hugo，即如果使用这个短代码前的文字块没有别的定制模块的<div>，就会自动给短代码生成一个<p> tag，导致模糊部分即便 display:inline 也会另起一行。简单的 hacky solution 是我又加了一个只有一个 inline <div> empty shortcode 插在需要使用的剧透之前:

<div class="empty" />

/* css */
.empty {
  display: inline;
}
今天在 Massai Mara 碰到的猎豹

文字包裹图片和图片脚注 #

我的模版本来在 markdown 图片 render 的语法中就有脚注功能![脚注](图片 URL)，但文字样式跟正文一样。修改了一下 render-image 变成了居中、斜体、文字更小的文字脚注。这个样式还用在了题图和下面要提到的 wrap 图片中。

之前还只有全屏图片和等距 column 镶嵌图片两种图片格式，很多时候不想让图片占全屏或者没有文字来凑等距，不方便排版。于是添加了一个让文字包裹在图片周围的 shortcode。

<div class="wrap {{if .Get 2}}wrap-left{{end}}">
  <img src="{{.Get 0}}">
  {{ if and (.Get 1) (gt (len (.Get 1)) 0) }}
    <i class="image-desc">{{ .Get 1}}</i>
  {{ end }}
</div>

/* css */
.wrap {
  float: right;
  max-width: calc(min(100%, 400px)) !important;
  padding-left:  $padding-8;
  padding-top: $padding-8;
  text-align: center;
}

.wrap-left {
  float: left;
  padding-right:  $padding-16; 
  padding-left: 0px;
}
.image-desc {
  font-size:small;
  margin-top: 2px; 
  color: gray; 
  text-align: center;
}

NeoDB 卡片手动修改个人评分 #

之前按照博友教程添加了 neodb 卡片，但有个问题是 neodb 使用人数较少，很多条目的评分完全不能反应作品的水平或个人偏好，有时候作品简介也会缺失。因此在短代码里加了两个 field 来手动 override 评分和简介（没有选择直接从 neodb API 获取因为懒得看 API）：

<div class="db-card-title">
  <a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">「{{ $dbFetch.title }}」</a>  
</div>
{{ if .Get 1}}
  {{ $itemRating :=  .Get 1 }}
  <div class="rating"> 个人评分：<span class="allstardark"><span class="allstarlight" style="width:{{mul 10 $itemRating }}%"></span></div>
{{ end }}
<div class="db-card-abstract">
  {{ if .Get 2 }}
    个人短评：{{ .Get 2 }}
  {{ else }}
    {{ $dbFetch.brief }}
  {{ end }}
</div>

效果如下：

「疯狂的麦克斯：狂暴女神」
个人评分：
个人短评：是挺好看的，但没了《Fury Road》那种摇滚震天血火汽油交织让人头皮发麻那种爽和震撼了，其实动作场面也不少，量大管饱的给了三座不同城镇戏码，但没了音乐和节奏总感觉像一部“正常”好莱坞大制作而不是能狂与燃到这么疯癫都能走上主流的邪典了（为啥呀，难道音乐是 immortan Joe 的主题）。但算是完整地把在前者中当作背景故事的 Furiosa 和遥远的家乡补全了，也让这个角色和社群更为动人。小 Furiosa 的演员好有灵气啊甚至跟 Anya 有点像但又透出更多狠劲，超帅。锤哥这个角色乏善可陈不能怪他，角色本身跟 Jo 和 war boy 们比起来就没啥亮点，但莫名觉得在学 Tom Hardy 这两年愈演愈烈的夹子音就有点难忍。看完总觉得不够过瘾，前作太珠玉在前了。
movie

热力图字数上限 #

之前流传挺广的博客热力图中我用字数作为热力图单个数据点的数值，如 1 万字分成四等份。如果有文章超过了一万字则不会显示，因此每次写出超过上限的文章我都会调整分的等份（如 1.5 万字分四等份）。这样的缺点是绝大多数文章的区分不明显，极少数文章白占了几整个颜色。于是修改了一下代码，把超过字数上限的数据 round down 到上限，这样就无需一直修改字数上限且使图的区分不均匀了：

// sum 是当天所有文章的总字数，push 进 data 的是千字
data.push([key, Math.min(10, (sum / 1000).toFixed(1))]);

相关阅读

<< 前 | 茶加奶和奶加茶一样吗？——... 随便逛逛 关我辟事 Vol.18：新大陆 ｜ 后 >>
如果您觉得本文对您有帮助，想支持我的博客创作，或者有特定的内容想要看到，或者想约 coffee chat，手把手教学我有的技能等，欢迎点击下面按钮成为我的金主：
订阅 Patreon 参与博客选题和定制服务 在 Kofi 上给我买杯奶茶