網站調整

針對網站呈現做了一些調整，把這些記錄下來

code 摺疊

\layouts\partials\footer\custom.html 檔案新增，對高度500px 以上的程式碼摺疊

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // 尋找文章內容中的程式碼高亮區塊
    const codeBlocks = document.querySelectorAll('.article-content .highlight');

    codeBlocks.forEach(block => {
      // 設定限制高度（例如高度超過 100px 才折疊）
      if (block.offsetHeight > 500) {
        block.classList.add('code-collapsed');

        // 建立折疊/展開按鈕
        const btn = document.createElement('button');
        btn.className = 'code-toggle-btn';
        btn.innerText = 'Expand';

        btn.addEventListener('click', () => {
          if (block.classList.contains('code-collapsed')) {
            block.classList.remove('code-collapsed');
            btn.innerText = 'Fold';
          } else {
            block.classList.add('code-collapsed');
            btn.innerText = 'Expand';
            block.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
          }
        });

        block.appendChild(btn);
      }
    });
  });
</script>

\assets\scss\custom.scss 檔案新增，摺疊成高度300px ，自訂按鈕樣式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.article-content .highlight {
  position: relative;
  transition: max-height 0.3s ease;

  /* 折疊狀態時限制高度並遮罩 */
  &.code-collapsed {
    max-height: 300px;  /* 限制高度 */
    overflow: hidden;   /* 超出高度內容隱藏 */

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: linear-gradient(to bottom, rgba(0,0,0,0), var(--card-background));
      pointer-events: none;
    }
  }

  /* 按鈕樣式 */
  .code-toggle-btn {
    position: absolute;
    bottom: 10px;
    right: 12px;
    z-index: 10;
    padding: 4px 12px;
    font-size: 1.4rem;
    border-radius: 6px;
    border: 1px solid var(--card-border-color, #ccc);
    background: var(--card-background);
    color: var(--body-color);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    &:hover {
      background: var(--accent-color, #4f46e5);
      color: #fff;
    }
  }
}

內文圖片

\assets\scss\custom.scss 檔案新增，改善hugo stack造成文章置頂圖片被剪裁的情況

1
2
3
4
5
6
7
8
/* 調整文章頂部圖片、主頁封面 */
.article-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: 100% !important; /* !important 表示優先覆蓋 */
  object-fit: contain !important; /* contain 表示縮放到包含在容器內 */
  object-position: center !important;
}

Reference

Learn Sass In 20 Minutes