返回

博客 | 仓库施工日志(更新至2023.07.21)

鱼在吭哧吭哧地搬家。

主题:从meme到stack

《仓库施工日志》,简称《日志》。精简后得到《仓库施工总览》(简称《施工总览》)。

《日志》内容:参考项;近期动态;施工详情

《总览》内容:待处理项;施工总览


参考

官方文档

官方文档

HUGO 中文网

meme主题的介绍页

hugo-theme-stack主题的介绍页

hugo-theme-stack主题的exampleSite页面

小球飞鱼:就算是普通地用Hugo建站(用的不是stack主题),也可以参考这个博主写的文章!对小白而言非常有帮助

Hugo | 一起动手搭建个人博客吧》2021-11-03

Hugo | Hugo-stack-theme主题魔改版》2022-02-13

stack主题更多相关一览
  • 高级装修技巧

如果你也用stack主题,那么我会说:不看血亏!(因为我已经换上了魔改版,所以参考这两篇时基本都是为了细节美化!但文章本身还是讲到很多实用内容的)

Hugo Stack主题更新小记》Jan 12, 2022。回到顶部,字体样式修改,目录紧凑化,滚动条美化,相关文章组件美化

如何优雅的从 Hexo 转移 Blog 到 Hugo》Feb 17, 2022。Light Mode 配色,移除 PhotoSwipe,移除相关文章中的彩色遮罩

  • stack主题更多相关一览

Hugo Stack主題修改記錄 (瘦身篇)》2021-03-01,魔改记录(这个博主的主页也可以看看)

Hugo Stack主题配置与使用》2021-07-24

安装 Hugo 主题 Stack 时你可能会遇到的问题》Jul 28, 2021

hugo主题stack》2021-11-01

从 Material 主题迁移到 Stack 主题》2021 年 11 月 21 日。让 Hugo 生成大小写敏感的 URL。

Hugo博客 | stack主题修改第一站》Jan 15, 2022。

个人网站的建立过程(三):Hugo主题stack的使用与优化》Feb 22, 2022。语言转换按钮

Hugo Stack 主题折腾笔记》Apr 21, 2023

建站指南-Stack主题

用Hugo Stack主题搭建个人主页》Oct 28, 2022

拥抱最好用的hugo之stack》Dec 17, 2022

博客切换到STACK 主题》May 09, 2023

如何在 Windows 系统从零开始构建一个和我一样的 Hugo 博客

Hugo|自定义 hugo-theme-Stack》May 11, 2023

Hugo Stack主题装修笔记

各取所需

个站 | 从零开始的Hugo博客建站

本站的博客主题》Jan 09, 2021。腾讯视频,音乐播放器

本博客的折腾史》Mar 31, 2021。统计访问

从Jekyll迁移至Hugo》May 27, 2021

更新hugo主题》Jul 04, 2021。自定义菜单,统计访问

『 Hugo 』Blog Comments System》Sep 20, 2021。在 Hugo 中添加 utterances 博客评论系统

从 Hexo 搬迁至 Hugo》Sep 30, 2021。摘要代替description,ShortCodes

为网站加入Loading加载页 | Add loading page to your site

Hugo博客搭建使用》2022-03-09

给hugo博客添加字数统计和阅读需要xx分钟的功能

随便逛逛

在皮卡堂的对话框里发出sbgg(随便逛逛)就能随机传送到一个房间,无聊的时候我会不断发sbgg来参观其他人的装修。

老麦笔记

木木木木木

屠·城

Stack Pub

动手写一个 Hugo 博客主题》2021-08-29 ( 2021-10-12 有更新 )

博客网站搭建记录》2021-11-08

試毅-思伟

山茶花舍

沉默之沙


施工详情

开端

真正开始捣鼓“从零开始搭建个人博客”这件事还是在2021-12-04的晚上,直接原因在于,我找到了两篇写得很详细的教程。咱说做就做,当晚开始注册GitHub、Vercel与下载Hugo、Git、Github Desktop、VScode一条龙。

建站前后只花了两个小时左右,我给自己的博客套的第一个主题是meme。这个主题只用了一个晚上,第二天下午我就换了stack主题,自此开始我的漫漫装修路。

不过从日志就能看出,我平时都不做功能性更新的……

近期动态

2023-09-22

  • 解决了手动TOC无法跳转的问题。

先放参考:Markdown 文档中文内锚点链接跳转(中文)

编辑《Roman Holiday》那篇博客时在为如何实现页内文字跳转而发愁,到处点击琢磨的时候突然解决了一个大问题——“为什么手动打出来的TOC无法跳转”。

原因竟在于在那种情况下标题是【跳转到的链接】而链接里不能有中文。。。。也就是说标题里不能有中文,否则就不到了。这么一想到倒也非常合理,但还是喷了!我说为什么《Fallen Arcadia》里的那个TOC只有Michael那个标题能够点击就跳呢……

标题里不能有中文这还真是个问题,毕竟这样一来就不够直观了。但是呢!如果我们在博客开头放个手动TOC并在其中附加中文描述,那是不是就跟原本的情况差不太多?草!天才啊,就这样了,完美的解决办法,什么新东西也不用加。

  • 把博客slug里的连字符通通替换为下划线。

第一次大装修(2021-12-05至2021-12-07)

2021-12-05

  • 成功用Hugo搭好个站。主题从meme改成了hugo-theme-stack,大致调了调首页,左栏调好了,但是项目顺序好像变了,我怀疑这是因为我调了weight的数值,不明白。//(Solved.)(weight是权重,影响项目的排序)
  • 几乎完全不懂html!Those Who Loved Him里的正文贴进去后消失了,很神秘,前端完全没有显示出来。//(Solved.)(最后决定把文章删掉了。后来一想,文章贴过去却没有显示,可能是因为标注的时间在博客时间的未来……)

2021-12-06

仔细看了看stack主题的介绍页又研究了会:

  • 确认了在stack主题下,往菜单栏里添加页面的推荐方式。//(不是直接修改config)
  • 搞懂了FrontMatter及所包括的项目是什么意思,学会添加slug来自定义文章链接。
  • 知道了怎么给分类/标签添加图片。知道了CSS、px、em等缩写是啥意思。//(呃但是后来又忘了)
  • 添加《仓库施工手册》来记录学习过程与tips,简化了《仓库施工日志》。
  • 解决了插入本地图片不成功的问题:添加超链接后你没在英文符号 [ 前加英文感叹号 ! !正确的格式是 ![操作:输入想要显示出来的描述文字](图片文件名.文件格式) 。而且Markdown文件的文件名要改成index才行。
  • 解决了左栏项目顺序发生变化的问题:你调了weight的值!而且每一个页面都调成了不同的值,不变才有鬼(原来这个weight真的是权重的意思)。
  • 添加网站icon。

2021-12-07

还能靠自己修的已经所剩无几了,感觉剩下的就是想修也无从修起,为什么呢,因为我确实一点也不懂码(一点也不懂)。为什么,竟会痛苦。相比起来卡文都堪称一种幸福体验……不禁对天问一句how。

  • 学会添加任务列表。
  • 添加《链接收藏》。
  • 添加《待写集》。

第二次大装修(2022-03-17至2022-03-19)

2022-03-17

心血来潮点进《日志》里的参考文章,一看:我擦!之前搭个站时参考的那篇博客的博主直接给出了stack主题魔改版的说明与GitHub仓库,我立马冲过去研究一下。

于是本站终于得以再次更新(还是大更新!装了好多东西又修了好多东西),装修内容具体参考《Hugo | Hugo-stack-theme主题魔改版》。

  • 将stack主题替换成stack魔改版。

这里我要提一嘴:stack主题前不久更新了(应该算是大更新),到GitHub上下载的主题压缩包的名字变成了hugo-theme-stack-master,比旧版多了个master。而魔改版主题的压缩包叫Hugo-stack-theme-mod-master,这个www打了mod,倒也对!

  • 成功安装Waline评论区。

  • 添加访问统计功能。代码可以直接参考不蒜子-极简网页计数器,也可以在不蒜子的基础上advance一把,比如我用的这个:

 <br />本站访客数<span id="busuanzi_value_site_uv"></span>人次
        <span id="busuanzi_container_site_pv"> 总访问量<span id="busuanzi_value_site_pv"></span>次 </span>
        <span id="busuanzi_container_page_pv">本文阅读量<span id="busuanzi_value_page_pv"></span>次</span>

学习正确的文章更新方式:值得注意的是,如果你更新个站文章的方法是「删除旧文件,并复制粘贴新文件」,那么这篇文章底下显示的阅读量会清零——所以最好不要这么做。

2022-03-18

昨天才感慨说:感觉博客的功能已经很是齐全——甚至还有了专门放友链的页面——除非换主题(或是更新主题),否则个站的大更新应该到此就该暂告一段落了(虽然这才第二次)。之后就是整理文章和搬运文章了!

结果今天就又修了好多东西(基本都是为了美观),没想到吧!这一切都得归功于我淘到了好多经验贴,不过,唉,你当初怎么就不会善用搜索!总之最后还是把想修的都修上了。

  • 删除主題里的vibrant.js插件,删除主題里的photoswipe灯箱插件。
  • 修改文章页字体设置,缩短文章行距。
  • 缩短目录里的标题行间距。
  • 目录内容适当左移。
  • 使“相关文章”栏里的文章显示文章日期(原本能看见的信息只有标题)。

这一步造成了一点小问题。我现在套着的主题是stack魔改版,相较于原版,魔改版的“相关文章”栏其实已经进行了一定程度的美化,具体表现在:一,魔改版里的文章块被压缩了。二,魔改版里的文字居中显示。

由于我一开始未能发现这点(真是令人伤心……),导致在进行这一步修改后,“相关文章”栏的显示一度让我以为,这个小小的修改带来了大大的问题。意识到魔改版的修改后,我才明白这一步带来的真正问题在哪儿:首先,得搞明白部分标题左飘与这步修改有无关系。其次,日期显示它不居中啊!看着太别扭了。

我现在的想法是:其一,个别文章的标题不居中,大概是因为标题太长了。我不认为标题显示与这一步的修改有关,毕竟可以看出,短标题的显示效果还是居中的。这个有点令人头疼,不知道怎么修。其二,日期应该也能像标题一样居中显示。要实现这个效果,仿照魔改版相关部分的代码来改一下日期部分的代码也许能行。

  • 加深菜单栏文字的颜色。

默认的字体颜色太淡了!而且点击也不会使文字高亮,看得眼睛有点费力。

PS:其实也可以实现选中高亮效果,但高亮好像有点麻烦……直接把整个菜单栏的颜色加深更简单。

PPS:魔改版送了高亮功能,但因为我基本只点“主页”选项,导致一开始并没有发现这点……

  • 修改全站的滚动条样式(a.k.a.美化滚动条)。

默认的滚动条是很粗的方形长条,让人一看就不禁感慨年代感(年代感)。修完后全站的滚动条都变成细的圆角长条了(但是手机端看到的还是方形长条)!确实让人看着心情愉快。

  • 美化选中样式
  • 为个站加了loading动画。

参考《为网站加入Loading加载页 | Add loading page to your site》,为个站加入了一段loading动画。

其实我一开始发现网站还能插入加载动画时,脑子里冒出的第一个想法是“我要把大王的片段给塞进去”!如果能实现我想要的那种效果的话,当然是不管怎样都要把大王的片段放进去!!!后来发现这可能有点难……要么是本身难以实现这点,要么是实现这点对我来说很难。

总之这个想法先暂时搁置了!我可能得先理解loading加载页的实现原理是个啥……

2022-03-19

今天小改一把。

  • 修改默认模式下的代码块的背景与字体颜色。文件途径为 根目录/assets/scss/variables.sass

默认的那个黑底白字真的要看瞎眼……代码块的背景色我直接copy了黑暗模式下代码块的字体色,而字体色则copy了黑暗模式下代码块的背景色——当然,这个背景色我还小调了一下。

普通装修项

2022

2022-03-22

  • 解决站点图标只在首页显示的问题。

第一步:将Icon命名为favicon.png;

第二步:打开 根目录的/static/img 文件夹,如果没有这个文件夹,则新建一个;

第三步:将Icon放进上述文件夹里,并打开config.yaml修改favicon栏,具体为 favicon: /img/favicon.png

注意:img前带/。如果漏了/,写成img/favicon.png,那么就会出现只有首页显示Icon的情况。

  • 删除超大Avatar。

打开 根目录/layouts/partials/sidebar/left.html ,删除以下部分即可。

        {{ with .Site.Params.sidebar.avatar }}
            {{ if (default true .enabled) }}
            <figure class="site-avatar">
                <a href="{{ .Site.BaseURL | relLangURL }}">
                {{ if not .local }}
                    <img src="{{ .src }}" width="300" height="300" class="site-logo" loading="lazy" alt="Avatar">
                {{ else }}
                    {{ $avatar := resources.Get (.src) }}
                    
                    {{ if $avatar }}
                        {{ $avatarResized := $avatar.Resize "300x" }}
                        <img src="{{ $avatarResized.RelPermalink }}" width="{{ $avatarResized.Width }}"
                            height="{{ $avatarResized.Height }}" class="site-logo" loading="lazy" alt="Avatar">
                    {{ else }}
                        {{ errorf "Failed loading avatar from %q" . }}
                    {{ end }}
                {{ end }}
                </a>
                {{ with $.Site.Params.sidebar.emoji }}
                    <span class="emoji">{{ . }}</span>
                {{ end }}
            </figure>
            {{ end }}
        {{ end }}
  • 缩小菜单栏里图标与描述之间的距离。

打开 根目录/assets/scss/partials/menu.scss ,找到menu>li>svg,修改margin-right栏的数值。我调的是15px。

2022-03-23

  • 在菜单栏添加“留言板”。

新的东西新的问题,注意到“搜索/归档/友链”页之后,我还得研究研究怎么:隐藏标题与页尾(感觉可以抄友链页里的代码?);隐藏右侧栏;在page底下开评论区(应该和Front Matter有关?)。

2022-04-27

  • 解决“引用块长得跟代码块一模一样”的问题:你没用对引用代码!//(代码块引用和平常看到文字引用是两种引用……以及,事实是,魔改版的说明里明确给出了引用样式短代码的说明……只是我一直没有注意到罢了(望天)。)

MarkDown官方教程给出的引用语法是 > 引用内容 ,而Hugo现在能用的引用语法如下:

{< quote >}
我说你怎么不告诉你爹,你爹来自大海,大海会包容一切。

他说:大海!他叹:大海!你可知大海带来了一切,又可将一切收回。没有人真的是大海的眷者。
{< /quote >}

PS:实际用的时候,首行与尾行都有两层大括号
PPS:这个引用代码在stack主题下渲染出来的效果确实只有一个左引号(but why),不要担心。

我说你怎么不告诉你爹,你爹来自大海,大海会包容一切。

他说:大海!他叹:大海!你可知大海带来了一切,又可将一切收回。没有人真的是大海的眷者。

关于引用代码,还可以看看这篇文章Getting to know Hugo shortcodes

2023

2023-05-01

我擦,闹了个乌龙。前一阵子不是终于又登上个站捣鼓了一下嘛,结果发现不知道为什么某几篇文章贴是贴上去了,github上看着也没显示有问题,但主页就是不显示!今天又贴了另外一篇,也是如此。跑去搜索一通,然后改动某处的细节看了看,以为终于发现了问题何在:时间标为2023年的文章无法显示!

结果再一搜,好吧!神速破案,不是时间标为2023年的文章就无法显示,而是超过“当前时间”的文章都无法出现……部署的锅。我再看看。

好耶,在config里加了个变量 TimeZone: Asia/Shanghai ,把站点的时区改到上海后就可以让文章以当前的时间发布而不至于无法显示了。

2023-07-17

  • Waline相关问题

Waline

Valine评论系统出现504错误错误码详解

应用被归档之后,没有办法激活

Waline 评论系统的介绍与基础配置

waline在GitHub上的讨论区

  • 在留言板页面底部开启评论功能,实装留言板。

其实还是没琢磨出来要怎样才能在page页底下开评论区!最后的做法是把留言板的文件从page移到post里变成文章页,再在config里把文章页的链接链到菜单栏里。迂回一下,至少变成post后,底下是有评论框的……好吧,起码留言板终于实装了!

2023-07-20

  • 购买并成功配置新域名。

NameSilo上购买域名,参考Namesilo DNS 域名解析教程和常见问题解决方法汇总Namesilo 域名购买及使用教程(附 Namesilo 优惠码),以及vercel官方的这篇文章Domains Overview,成功配置新的域名!

啊啊啊啊啊妈呀域名可算都解析成功了,带www和不带www的都能成功跳转到个站了,感天动地了呀TT现在的域名是 northefish.space。啊呀唯一遗憾的是换域名之后,网站的访问数据会清空,好吧但是问题不大,也没什么所谓。呵呵总之这下又可以直连了。至今没想明白原先那个自动分配的域名怎么就突然给墙了……

新发现,带www.的和不带www.的还能是不同的两个网站,啊!?当我在vercel上给两个地址都选上 Assigned to main 、分别点进去却发现访问数还能有不同的时候,真是不禁感到两眼一黑……看完www.和不带www.的域名有什么区别?这篇文章之后了解了,这还要选一个当主域名啊,好吧!

  • 终于拥有个站评论区的管理员身份——这下才算真正完成Waline的部署!

第二次重新部署,终于拥有管理员(Admin)的身份……真的要流下泪来。

第一次部署没成功。第二次部署成功了(serverURL记为A),但在五百来天后我发现我忘记了一开始注册的账号密码,按【忘记密码】也没用,这下定当不成Admin,遂删vercel和github上的项目重新部署,于是有了第一次重新部署。

第一次重新部署成功了(serverURL记为B,A和B是不同的URL),并且在重新部署成功后,我立马注册了账号,然而很意外地,这个账号竟然没有Admin身份!大为震惊的我在评论区连发多条评论以作测试,并到处搜来搜去,最后终于确认,在后台页面的左上角没有显示管理选项的账号,真的不是Admin……这下真的要两眼一黑的我决定彻底重新部署,不仅删了vercel和github上的项目,还把个站根目录底下的 config.yaml\layouts\partials\comments\provider\waline 里的serverURL(B)也删掉,然后还把LeanCloud的应用也删了!彻底重新开始!这就是第二次重新部署。令人感动的是这次注册的账号终于是Admin了……哇简直要哭了好吗。

  • 把《日志》中【参考】部分的第三条从“高级装修技巧”改为“stack主题更多相关一览”。

因为经验贴真的很多啊!?先存一下,日后再作具体更新。

  • 添加“返回顶部”按钮。这个按钮在移动端也看得到。

代码部分,参考《Hugo Stack主题装修笔记》和《Hugo|自定义 hugo-theme-Stack》。

SVG图标部分,参考《一行代码实现一键返回顶部 | Back to top in one line of code

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

参考《Hugo Stack主题装修笔记

第一步:
找到 根目录\assets\scss\partials
定位到 .article-list--compact ,在这部分添加如下内容
.article-subtitle {
 margin-top: 6px;//这个值决定文字部分是否上移或下移,带-号的会往上走,不带则往下走
 font-size: 1.5rem;
 @include respond(md) {
 font-size: 1.6rem;
 }
}

第二步:
找到 根目录\layouts\partials\article-list
 <h2 class="article-title">
 {{- .Title -}}
 </h2>

在上面这段的下边加上下面这段
 <div class="article-subtitle">
 {{- .Params.description -}}
 </div>

唯一的问题是标题和描述粘到一起了,我得看看咋把描述往下拉拉……好,解决了,调 margin-top 就行。

草,但是调了之后发现描述和时间又分太开了!好,这个也解决了,找到 根目录\assets\scss\partials , 定位到 .article-time 并修改它的 margin-top 即可。

2023-07-21

在保留《仓库施工日志》的同时,将精简后的《日志》命名为《仓库施工总览》。

2023-08-20

研究一下短代码,还是想不明白为什么>引用块和反引号引用块在本博客内看着一模一样……不应该啊。

自定义 Hugo Shortcodes 简码

来写一些好玩的 Hugo 短代码吧

深入探究 Hugo 短代码

最后更新于 2023-07-21 00:00 CST
.. ... ...
Built with Hugo
Theme Stack designed by Jimmy

本站访客数人次 总访问量 本文阅读量