简明装修笔记一则

2025-01-05 ‧ 3013 words

简明？我看也不是很简明嘛！

大家好！最近又在装修博客（没停过），主要原因是实体生活开始写手账了，所以想要一个和手账本一样的可爱主题，由于依然没找到符合我心意的主题，所以还是决定自己改。在这里对一些经常重复修改的内容做一下笔记整理，后续新增也会在这里持续添加。

PS：大家知道我上新（？）夜间模式了吧，右上角的小圆点请点一下！很可爱的摩卡色！

这个主题依然是在No Style Please这个主题上修改的，它非常好的一点是，给出了博客所必需的每一个部件，但没有任何冗余的样式或者动画，响应起来非常快。而我则擅长东抄西抄指挥GPT抄一些可爱的样式回来，然后增加一些我喜欢的功能。

修改更新请见Changelog，以下是一些修改笔记。

侧边目录

这个铁定是抄的，再找却没找回原来的教程。

新增layouts/partials/toc.html，写入以下内容：

代码折叠

{{ if (.Params.toc | default true ) }}
    <div class="post-toc" id="post-toc">
        <aside>
            <header>
                Table of Contents
            </header>
            {{ $emtLiPtrn := "(?s)<ul>\\s<li>\\s<ul>(.*)</li>\\s</ul>" }}
            {{ $rplcEmtLi := "<ul>$1" }}
            {{ .TableOfContents | replaceRE $emtLiPtrn $rplcEmtLi | safeHTML }}
            <!-- https://github.com/gohugoio/hugo/issues/1778#issuecomment-483880269 -->
            <!-- {{.TableOfContents}} -->
        </aside>
        <a href="#" id="toc-toggle"></a>
    </div>

{{ end }}

在\layouts\posts\single.html中，找到表示文章内容的{{ .Content }}上方增加：

代码折叠

    <div style="position: fixed; right:3px; max-width:400px; overflow:auto; top: 100px; width: 12vw; bottom:50px; font-size: 90%;">
        {{ partial "toc.html" . }}
    </div>

因为我没研究出来移动端该怎么显示比较合适，所以直接隐藏了，在main.scss内写入：

代码折叠

@media only screen and (max-width: 1224px) {
  .post-toc {
    display: none;
  }
}

字数显示与页脚统计

在config.toml中写入：hasCJKLanguage = true，这样才能处理中文字数统计。
在\layouts\posts\single.html中需要插入字数显示的地方写入：{{ .WordCount }} words

页脚统计的代码来源于塔塔，但那篇文章可能隐藏了，所以无法引用，这里稍微记录。

代码折叠

<footer class="site-footer">
    <section class="copyright">
        &copy; 2021 -{{ if and (.Site.Params.footer.since) (ne .Site.Params.footer.since (int (now.Format "2006"))) }} {{ .Site.Params.footer.since }} - {{ end }} {{ now.Format "2006" }}
        <a href="/"> {{ $.Site.Title }} </a> · <i class="fas fa-bell"> </i>
        <a id="days">0</a> Days<br>
        {{$scratch := newScratch}}
        {{ range (where .Site.Pages "Kind" "page") }}
        {{$scratch.Add "total" .WordCount}}
        {{ end }}
        {{$var := $scratch.Get "total"}}
        {{$var = div $var 100.0}}
        {{$var = math.Ceil $var}}
        {{$var = div $var 10.0}}
        共书写了{{$var}}k字 · 共 {{ len (where .Site.RegularPages "Section" "posts") }}篇文章
    </section>

    <!-- 计算网站启动以来的天数 -->
    <script>
        var s1 = '2021-11-12'; // 设置建站日期
        s1 = new Date(s1.replace(/-/g, "/"));
        var s2 = new Date();
        var days = s2.getTime() - s1.getTime();
        var number_of_days = parseInt(days / (1000 * 60 * 60 * 24));
        document.getElementById('days').innerHTML = number_of_days;
    </script>
</footer>

评论区样式修改

我对Waline评论区的一些颜色样式不太喜欢，但它的样式代码又多又长每次改都非常生气。

在放置评论区的文件中（我的是layouts/partials/comment.html），或者CSS文件内，增加以下内容：

代码折叠

<style>
    .wl-card {
        border: 0px solid #eee;
    }

    .wl-card .wl-quote {
        border-inline-start: 0px dashed rgba(237, 237, 237, .5);
    }

    .wl-card-item {
        position: relative;
        display: flex;
        padding: 0.2em;
    }

    .wl-addr {
        display: none !important;
        color: transparent !important;
    }

    .wl-content .vemoji,
    .wl-content .wl-emoji {
        display: inline-block;
        vertical-align: baseline;
        height: 3.4em !important;
        margin: -0.125em 0.25em;
    }

    img.wl-emoji,
    img.vemoji {
        vertical-align: sub;
        transition: ease-out 0.6s;
    }

    img.wl-emoji:hover,
    img.vemoji:hover {
        transform: scale(1.8) !important;
    }

    .wl-header {
        display: flex;
        overflow: hidden;
        padding: 0 4px;
        border-bottom: 0px dashed var(--waline-border-color);
        border-top-left-radius: 0em;
        border-top-right-radius: 0em;
    }

    .wl-btn.primary {
        border-color: transparent !important;
        background: Peru;
        color: white;
    }

    @media (max-width: 580px) {
        .wl-header-item:not(:last-child) {
            border-bottom: 0px dashed var(--waline-border-color);
        }
    }

    :root {
        --waline-theme-color: Peru;
        --waline-active-color: Peru;
        --waline-light-grey: unset;
        --waline-info-color: unset;
        /*--waline-color: unset;*/
        --waline-border: 0px solid peru;
    }

    .wl-editor:focus,
    .wl-input:focus {
        background: transparent;
    }

    .wl-panel {
        background-color: #fffcf9;
        /*评论区输入框的背景颜色*/
    }

    .wl-card .wl-delete,
    .wl-card .wl-like,
    .wl-card .wl-reply,
    .wl-card .wl-edit,
    .wl-card span.wl-nick,
    .wl-empty, .wl-admin-actions,
    [data-waline] p {
        color: unset;
    }

    .wl-info .wl-text-number {
        color: var(--waline-color);
        font-size: .75em;
    }

</style>

这里的Peru是我选的主题色，可以直接搜索替换成自己喜欢的颜色代码。

由于我缺乏一个个修改匹配成主题颜色的耐心，这里的话是把Waline的一些文字颜色直接unset掉了，一般会继承当前博客的文字配色，因此也会跟着博客明亮/夜间主题改变而变化。再者是把一些难看的边框给隐藏了。

在文章末尾显示上一篇文章和下一篇，Hugo本身自带这个特性。

在\layouts\posts\single.html中，文章内容的部分下方增加：

代码折叠

    <div class="pre-next">
        {{with .PrevInSection}}
            <a class="pre-next-btn bg" href="{{.Permalink}}"><< {{ .Title }}</a>
        {{end}}
        {{with .NextInSection}}
            <a class="pre-next-btn bg" href="{{.Permalink}}">{{ .Title }} >></a>
        {{end}}
    </div>

CSS部分

代码折叠

.pre-next {
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}

.pre-next-btn {
  font-size: 1rem;
  transition: font-size 0.3s ease;
  /* 添加平滑过渡效果 */
}
/* 手机端适配：布局变为单列 */
@media (max-width: 768px) {
    .pre-next-btn {
    font-size: 3.5vw;
    }
}

还挺方便的吧？

Collection页面

这个Collection页面是最近新增的，当照片墙也好，好物收集也行。

这个实际是通过短代码实现的，看到Hugo 创建「好物」页面这篇文章所以想搞一个，但作者在更新后好像没有写具体怎么实现。所以稍微来写一下。

在layouts/shortcodes中增加goods.html：

代码折叠

<div class="goods">
    {{ range .Site.Data.goods.goods }}
    <div class="goods-bankuai">
        <img loading="lazy" class="whitey" src="{{ .image }}" alt="{{ .title }}">
        <div class="goods-info">
        <div class="goods-title">
            <div style="text-align: center;">
                <span>{{ .title }}</span>
            </div>
        </div>
        <div class="goods-note">
            {{ .description }}
        </div>
        </div>
    </div>
    {{ else }}
    <p>Nothing here...</p>
    {{ end }}
</div>

<style>
    .whitey {
        border-width: 10px;
        border-style: solid;
        border-image: url("https://i.imgur.com/8xftJ3v.gif") 7 fill round;
        width: 100%;
        height: auto;
        border-radius: 10px;
        box-sizing: border-box;
        transition: transform 0.3s ease; /* 设置过渡效果 */
    }
    .whitey:hover {
        transform: translateY(-5px); /* 鼠标悬停时，图片向上浮动 5px */
    }
    .goods {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start; /* 确保内容左对齐 */
        gap: 30px;  /* 设置照片之间的间隙 */
    }

    .goods-bankuai {
        width: calc(33.333% - 30px); /* 每张图片占父容器的三分之一宽度，减去间隙 */
        box-sizing: border-box;
        text-align: center;
        /*display: flex;*/
        flex-direction: column;
        justify-content: space-between; /* 确保每个块内容上下排列 */
        /*height: 300px; !* 固定容器高度，以避免图片撑高 *!*/
    }

    .goods-bankuai img {
        width: 100%;  /* 图片宽度为容器宽度 */
        height: 200px; /* 统一高度，确保照片高度一致 */
        object-fit: cover; /* 确保图片裁剪和填充容器 */
        border-radius: 8px; /* 可选：为图片添加圆角 */
    }

    .goods-title {
        margin-top: 0px;
    }

    .goods-note {
        margin-top: 5px;
        font-size: 0.9rem;
    }


    /* 当屏幕宽度小于 1024px 时，每行显示两张图片 */
    @media (max-width: 1024px) {
        .goods-bankuai {
            width: calc(50% - 20px); /* 每行显示两张 */
        }
    }

    /* 当屏幕宽度小于 768px 时，每行显示一张图片 */
    @media (max-width: 768px) {
        .goods-bankuai {
            width: calc(100% - 20px); /* 每行显示一张 */
            height: auto;  /* 让容器高度自适应 */
        }
        .goods-bankuai img {
            height: auto; /* 图片自适应高度，不再设置固定高度 */
        }
    }

</style>

在博客文件夹根目录创建data/goods/goods.json，存放图片和文字等等数据内容。示例如下（记得改一下别把我们家小豆泥女仆带走了…！）：

代码折叠

[

  {
    "image": "https://pub-219f59729cc7474d97beb0f99a13e6bd.r2.dev/picture/2025/01/f8ef5b36f711097e46ef49edbe729747.png",
    "title": "凶巴巴女仆小豆泥",
    "description": "这家女仆好凶，不敢来了。"
  },
  {
    "image": "https://pub-219f59729cc7474d97beb0f99a13e6bd.r2.dev/picture/2025/01/78dbfc3707453bcbf1b47091768a0331.jpg",
    "title": "委屈擦地女仆小豆泥",
    "description": "好可怜，欺负一下，好可怜……"
  },
  {
    "image": "https://pub-219f59729cc7474d97beb0f99a13e6bd.r2.dev/picture/2025/01/635f82685c9f81e58a30fa48ad44657c.png",
    "title": "听音乐的Pingu",
    "description": "Chill, chill..."
  },
]

新增content/goods.md页面，正文部分写入短代码：{/{< goods >}}，记得删去第一个斜杠。

图片点击放大

图片放大这个功能大家好像都是用fancybox插件完成的，但无奈我怎么都不成功，只能直接粗暴指挥GPT写一个基础的。实现如下：

在layouts/partials/head.html中写入：

代码折叠

  {{/*图片放大*/}}
  <style>
    .image-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      align-items: center;
    }

    .image-row img {
      flex-grow: 1;
      max-width: calc(100% / 3 - 20px);
      height: auto;
      object-fit: contain;
    }

    .image-row.two-columns img {
      max-width: calc(50% - 10px);
    }

    .image-row.three-columns img {
      max-width: calc(33.33% - 10px);
    }

    .image-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .image-overlay.active {
      display: flex;
    }

    .image-overlay img {
      max-width: 80%;
      max-height: 80%;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      console.log('JavaScript loaded and DOMContentLoaded event fired.');

      const postContent = document.querySelector('#post-content');
      if (!postContent) {
        console.error('Error: #post-content not found!');
        return;
      }

      // 查找所有的 img 元素（无论是否在 p 标签内）
      const images = Array.from(postContent.querySelectorAll('img'));

      if (images.length === 0) {
        console.log('No images found.');
        return;
      }

      console.log(`Found ${images.length} images.`);

      // 初始化图片点击放大功能的遮罩
      const overlay = document.createElement('div');
      overlay.className = 'image-overlay';
      document.body.appendChild(overlay);

      const overlayImage = document.createElement('img');
      overlay.appendChild(overlayImage);

      overlay.addEventListener('click', () => {
        overlay.classList.remove('active');
      });

      // 处理每个段落的图片
      const paragraphs = postContent.querySelectorAll('p');

      paragraphs.forEach((paragraph, pIndex) => {
        const paragraphImages = Array.from(paragraph.querySelectorAll('img'));
        if (paragraphImages.length === 0) {
          return; // 跳过没有图片的段落
        }

        console.log(`Found ${paragraphImages.length} images in paragraph ${pIndex + 1}.`);

        if (paragraphImages.length === 1) {
          // 单张图片，保留原始布局，仅添加缩放功能
          const img = paragraphImages[0];
          const naturalWidth = img.naturalWidth || img.width;
          const naturalHeight = img.naturalHeight || img.height;

          if (naturalWidth > 200 && naturalHeight > 200) {
            img.style.cursor = 'zoom-in';
            img.addEventListener('click', () => {
              overlayImage.src = img.src;
              overlay.classList.add('active');
            });
          }
          return; // 跳过多图布局处理
        }

        // 多张图片处理，创建新布局
        const imageRow = document.createElement('div');
        imageRow.classList.add('image-row');

        // 根据图片数量调整列数
        if (paragraphImages.length === 2) {
          imageRow.classList.add('two-columns');
        } else if (paragraphImages.length === 3) {
          imageRow.classList.add('three-columns');
        } else if (paragraphImages.length === 4) {
          imageRow.classList.add('two-rows');
        } else if (paragraphImages.length === 5) {
          imageRow.classList.add('three-two-columns');
        } else if (paragraphImages.length === 6) {
          imageRow.classList.add('three-columns');
        }

        // 为每张图片添加点击放大功能
        paragraphImages.forEach((img) => {
          const naturalWidth = img.naturalWidth || img.width;
          const naturalHeight = img.naturalHeight || img.height;

          // 只为大于200x200的图片添加放大功能
          if (naturalWidth > 200 && naturalHeight > 200) {
            img.style.cursor = 'zoom-in';
            img.addEventListener('click', () => {
              overlayImage.src = img.src;
              overlay.classList.add('active');
            });
          }

          // 移动图片到新容器
          imageRow.appendChild(img);
        });

        // 替换原段落内容为图片容器
        paragraph.innerHTML = '';
        paragraph.appendChild(imageRow);
      });

      // 处理不在p标签里的图片（直接放在文章中）
      images.forEach((img, index) => {
        const naturalWidth = img.naturalWidth || img.width;
        const naturalHeight = img.naturalHeight || img.height;

        // 只为大于200x200的图片添加放大功能
        if (naturalWidth > 200 && naturalHeight > 200) {
          img.style.cursor = 'zoom-in';
          img.addEventListener('click', () => {
            overlayImage.src = img.src;
            overlay.classList.add('active');
          });
        }

        console.log(`Processing image ${index + 1}: ${img.src}, Dimensions: ${naturalWidth}x${naturalHeight}`);
      });
    });
  </script>

这个方法查找的是id=post-content的部分内的图片，同时对连续多图情况进行了排列。弊端是加载稍慢，甚至偶尔需要刷新一次才能正常使用，但好处是…很粗暴。

简明装修笔记一则

侧边目录

字数显示与页脚统计

评论区样式修改

上一篇/下一篇文章

Collection页面

图片点击放大