↓跳到主要内容
  1. Posts/

航班计划｜No.1：先来写个To-Do list

整理 todo 也算完成一项 todo 吧……

·· 4296 字·9 分钟
运营公告 博客装修
目录

发现一个 bug，Congo 的 TOC 竟然不会显示 H1 和 H4-H6 的标题，甚至 H5、H6 级别的标题看起来和正文都差不多，只是行前会多一个代表标题的符号罢了……（扶额）。因此只能使用 H2 和 H3 的标题做出最多两级的差异，好吧，大概也够用了，但还是有一些不满……！就算我用不上更多的级别差但我也想拥有！而且两级的标题的确有点少了啊！难道这么快就要考虑换主题吗这可是我千辛万苦选定的啊！

看了一眼隔壁 Blowfish，也是不显示 H1，只能显示 H2-H4（好歹多了一级）的标题，这是什么共通 bug 么……

结果问了一下 ChatGPT 就迅速地解决了问题呢。在config/_default/markup.toml里找到下列代码，然后自由修改你想要的标题层级数即可：

1
2
3

[tableOfContents]
startLevel = 1
endLevel = 6

鉴于 Congo 的 H5、H6 级别和正文样式相同，H1 又大得可怕，就安详地用 H2-H4 好了，这下才是真的应该够用了。

呃想必看我博客的人都习惯我东拉西扯话很多了吧，总之下面才是正题。序号顺序有一定意义，但不一定多。

博文相关 #

  1. 维修日志 No.3 的正式版，记录一下博客的搭建过程
    主要是再不写就真的要忘光了！

    20240608 更新
    写完了！

  2. 五月月记
    阿弥陀佛……

    20240607 更新
    写完啦！

  3. 移植 Notion 博客，which means 不止搬运文章，还有 About 和友链也要设置好
    好大工程……

    20240610 更新
    完！！！成！！！博客装修告一段落！最难的还是搞 2023 年终总结，因为有图片……而且是和文字挤在一起的图片……后面的就都很顺利了，就是很多细节要改而已，我已经熟练得让自己心疼.jpg。

    首先是左侧文字右侧图片的环绕布局，效果参考

    直接放在.md文档内:

    <div class="flex-container">
  <div class="flex-text">
    <p class="flex-start">第一行</p>
    <p>第二行</p>
    <p class="flex-end">最后一行</p>
  </div>
  <img src="http://image.url/" class="flex-image" />
  <!--- 想要图在左边文字在右边的话，把 <img> 放到 <div class="flex-text"> 上方即可--->
</div>

    在assets/css/custom.css内添加：

    .flex-container {
  display: flex;
  align-items: flex-start;
  margin: 15px 0;
}

.flex-image {
  max-width: 300px;
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
}

.flex-text {
  flex: 1;
}

.flex-text p {
  margin-bottom: 1.25em;
}

/* 以下代码是我自行添加的，为确保第一行前面和最后一行后面不会多出奇怪的空白 */
.flex-start {
  margin-top: 0 !important;
}

.flex-end {
  margin-bottom: 0 !important;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .flex-container {
    flex-direction: column; /* 垂直排列 */
  }
  .flex-image {
    margin-left: 0; /* 取消左边距 */
    margin-top: 20px; /* 增加上边距，分隔内容 */
    max-width: 100%; /* 使图片宽度自适应容器 */
  }
}
    一行多图排版研究了下短代码作业没抄会，调教 ChatGPT 给代码了，效果参考

    .md文档内可以利用 Hugo 自带的 figure 短代码（插入短代码时不要忘记使用双括号{{ }}），使用如下格式即可：

    <div class="image-row">
  {<figure src="http://image1.url/" title="image1" caption="image1">}
  {<figure src="http://image2.url/" title="image2" caption="image2">}
  {<figure src="http://image3.url/" title="image3" caption="image3">}
</div>

    在assets/css/custom.css内添加：

    .image-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* 可调整为 space-between, space-evenly, center 等 */
  margin: 20px 0;
}

.image-row figure {
  flex: 1 1 calc(33.333% - 20px); /* 三张图片 */
  margin: 1px;
  text-align: center;
}

.image-row img {
  width: 100%;
  height: auto;
}

.image-row figcaption {
  margin-top: 8px;
  font-size: 0.9em;
  color: #666;
}

/* 响应式设计：根据屏幕尺寸调整图片宽度 */
@media (max-width: 1024px) {
  .image-row figure {
    flex: 1 1 calc(50% - 20px); /* 两张图片 */
  }
}

@media (max-width: 768px) {
  .image-row figure {
    flex: 1 1 calc(100% - 20px); /* 一张图片 */
  }
}

功能优化 #

  1. 评论区

    20240609 更新
    搞定！宝宝和我说很麻烦，没想到竟然是搭博客以来最简单的一集！选的是 Twikoo，官方文档写的非常清晰，就是 MongoDB 那一步由于网站的布局和配置步骤的细节有些微变化，需要自己随机应变一下。白石京的教程补充了相当多细节，感恩！没有这份教程我也不会如此一帆风顺没有遇到任何阻碍地搭好评论区！最后参考了 Congo 的官方文档，Congo 真是太好了设置评论区竟然如此方便……（抹泪）搬运 Notion 博文去了！

  2. 修改脚注文本，增加全站字数（以及“已经写了 xxxx 书”的小功能）和博客运营时长统计

  3. 去除分类（Categories）页和标签（Tags）页，并入归档（Archives/Posts）页

  4. 归档页增加各年份文章总数的统计，放在年份数字边上

  5. 主页增加热力图和随机入口，酌情增加分类与标签的一览

    主要是不确定怎么放好看，需要琢磨琢磨

  6. 添加博文发布时间

    20240607 更新
    在config\_default\languages.zh-Hans.toml里修改dateFormat为"2006-01-02 15:04"，并搞明白了博文发布时date的值的格式，即2024-06-04T21:53:28+08:00，无需双引号。

    在config\_default\config.toml里加上enableGitInfo = true，以后无需设置lastmod项，会自动使用 Git 提交时间。

    觉得时间仅在博文页显示就好，其他页面显示日期就够了，宝宝用的 Diary 主题就是这样，简洁省心又美观，但我这个主题估计得自己设置一堆东西……算了，还是就这样放着吧。

  7. 【进行中】 各种短代码

  8. 研究子标签（和 Hugo 分类法）

  9. 添加在线聊天小功能 and/or 提问箱

  10. 添加赞助功能（虽然真的有人投喂我吗但是人还是要有梦想）

单页 #

  1. 必须的：时间线，展览柜

  • About

  • 友链

    20240608 更新
    想到要迁移历史博文，就先新建了 About 和友链（）。About 没费什么功夫，当博文写就好。主要是友链，抄作业发现 SCSS 格式应用不上，换了 extend 版本也不行。我又看遍了全网的友链作业，死活没能弄上去。

    还有一个小问题是按照 Congo 默认的布局比例，右侧目录过宽空白过多而正文过窄了。原本我觉得我改不好这交错复杂的一堆代码，打算就这么扔着的，但友链双栏放在这个正文的宽度里就显得拥挤了，不美观，咬咬牙硬改！

    然后发现 Congo 还提供了一种什么都没有的简单页面，但我依然想保留更新时间和目录，于是自己新建了layouts/_default/links.html，在simple.html的基础上复制来single.html里时间和目录的代码，好万事俱备，只差我重新分配一下宽度比例了。

    于是对着代码一条条问 ChatGPT，把 class 一个个复制下来去主题原生的themes/assets/css/main.css搜索确认都起了什么作用，最后终于定位到了改元素宽度的代码，在assets/css/custom.css里覆盖掉就好。

    期间还学到一个小知识。我改完后 About 页面目录变窄了，友链页面还是原来那死样，我百思不得其解，被硬控了很久。打开开发者工具查过去发现目录右边一大块紫色虚线区域。一问 GPT 原来这个 flex 布局会根据内容长度自己变换，真是智能啊.jpg，净给我添乱。于是问了怎么能固定住，这下彻底改好了。顺便举一反三把博文页面的目录也微微调窄，这下看起来应该更美观了！

    页面布局好了，接下来就是折腾友链短代码的 CSS。我一开始抄的这份作业，看遍了全网作业也没能把 CSS 弄上。皇天不负有心人啊，我又找到一份作业，其中提出了一个天才的解法，即用短代码来引入友链卡片的 CSS！这个办法不仅立竿见影，而且目测普适性极强，比如 Neodb 卡片之类的应该都能用。我在互联网上奔波劳碌半天终于久旱逢甘露！激动的心情无以言表，只有默默感叹天才……

    然后就是微调友链的 CSS，这也调了好久。首先友链上还会显示链接的下划线和悬浮变色，覆盖了。其次我对 description 会被省略这点不太满意，调整了一下没有合适的办法，都会把卡片撑大，但我已经累了，算了。最后调整字体颜色，输颜色值的时候试图用--color-primary这种高级的办法，结果文档里说的neutral、primary和secondary完全不区分，而且悬浮的时候字会变白。隐约明白为什么之前模糊打码的 CSS 代码直接抄过来字会全白了，估计是什么主题特性耽误的，哎，烦人。总之还是简单粗暴地硬输了 Hex，反正之后网站颜色也要调整的，就是深色模式颜色不会切换这点比较尴尬，先不管了！

    下一件该头疼的就是装评论区了。苍天哪……

  1. 再议的：Memo，Now，瀑布流相册

美观与 UX #

必改的 #

  1. 修改翻译文件，保留部分英文

  2. 统一面包屑部分显示的英文

  3. 换字体，但改完英文效果还行的话也可能不换

    20240711 更新
    7.4 改的了，拖到现在才写。总之参考了这两份教程（1，2），但死活不成，后来发现我好像就是单纯地无法导入霞鹜文楷，很神奇，遂换成了朱雀仿宋，也很好看！

    然后因为不想把全站字体都改掉，学习了如何精细调整特定部分的字体。一开始就想在custom.css里把要改的元素的 class 都挑出来，一起应用了新字体就好了，但这个主题源代码里的 class 几乎都是class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral"这样，让我一看就想撒手人寰。又想要么给所有想改的元素全都打个相同的 id 就可以方便地调整了，但那就相当于要用自己的主页布局、单页布局等等等等所有布局，覆盖掉原主题的，其实更大费周折……于是还是向 ChatGPT 学习了怎么调整这种超长的 class 命名——只要把空格替换成.，再在:前加上\就好了！示例如下：

    nav,
h1.mt-0.text-4xl.font-extrabold.text-neutral-900.dark\:text-neutral {
  font-family: ZhuqueFangsong-Regular, ZhuqueFangsong-Regular, ui-sans-serif;
}

    CSS 的选择器真是一门博大精深的学问，还有用空格和>进行选择的，好复杂……总之有 GPT 在应该都没问题啦！

  4. 自定义博客配色，调整深色模式配色

  5. 深浅模式切换键提到页顶，语言选择框放到页底

    20240608 更新
    搜 Congo 讨论区的时候发现开发者说某个更新版本已经允许把深浅模式切换键放到页顶菜单了，我找半天没搞明白怎么搞，于是问了一下，结果就在快速开始里。阿弥陀佛，现在告诉我我看懂这讲的是什么了，不点拨我两句，光靠我自己是真的悟不出来啊！

    依样画葫芦地把语言选择框和打算删掉的分类页标签页放到页底了，主要是就一个语言框放着很奇怪，所以挪了两个打算删掉的页面下去陪它（）。但我觉得这个语言框放在左侧，被 footer 和最近文章夹击的效果实在也不好看，之后得想办法弄到右边，再议！

  6. 修改标签页小图标，目前是个紫色色块

再议的 #

  1. 高亮显示 categories 的标签

  2. code block 没有复制键，且代码全都同色，没有缤纷（？）的 colour code

    20240605 更新
    之前遇到的问题是明明已经按照文档说的，在config/_default/params.toml里把enableCodeCopy设置为true了，也确保同目录下mark.toml里noClasses值是 false，但依旧不显示复制键。问 ChatGPT 后解决了，需要加上两行代码：

    1
2
3
4

    [highlight]
noClasses = false
codeFences = true
guessSyntax = true

    起作用的主要是codeFences = true这一句，贴一下 GPT 的解释：

    codeFences 选项用于启用或禁用 Markdown 中的代码围栏（fenced code blocks）语法高亮。代码围栏是指使用三个反引号（```）或波浪号（~~~）包围代码块的语法。

    代码围栏的意思我还是第一次知道。guessSyntax的作用还蛮明显的，觉得有用就顺手也放着了。也顺手把“复制”和“已复制”的翻译改回了英文，中文字体不好看。

  3. 手机适配，主要是想把右上角菜单折叠起来，以及可有可无我不是很关心的 TOC 位置优化

    20240605 更新
    菜单折叠解决了。在config/_default/params.toml里把header.layout设置为hybrid即可。TOC 位置再议。

  4. RSS 界面的美化

  5. l2d 桌宠、动态背景等（在保证界面简洁好看的前提下，觉得很可能一辈子也不会整就是了）

↑