第 8 頁

Blog

留言板開張!!

上個月的我因為害怕不敢開留言板，但現在也算發的蠻習慣了，應該也不像之前這麼在意了(嗎?

所以就把這個留言板打開了，非常感謝JN的教學文，加上AI幫忙根本不需要動任何腦。

Blog越來越完善了，我對於現在的頁面、排版、功能很滿意欸，現在就只剩下內容了，加油!!!

Blog

毫無內容可言

發現大家的更新頻率，好像除了WIWI以外，大部分都是兩三天更新一篇。

那我這邊就是量大管飽，沒有什麼內容，就是想到就發一篇。

現在感覺發的越來越自然了，不太會在意內容的品質。

(我有嘗試過寫認真一點的文，但我自己看不下去，文筆真的好差，需要多多練習)

我不太奢望有人會把我的內容加入到RSS中，因為我創建的本質是來抒發心情的。

路過這邊的人可以把我當作一個跟你交心的朋友，看一個屁話很多、想法很多的一個人在發瘋。

如果想跟我聊聊也可以唷，真的不是因為沒朋友才這麼說的…….嗚嗚嗚

Blog

推坑後記

在上一篇推坑，當初想的文章覺得肯定會寫得很好，但實際想文章發現我的國文造詣真的好爛喔XDD

有很多我想表達的但是我沒辦法用文字描述出來，看起來要多學學國文了。

我因為這個題目真的想了好多的提案，以下是我廢除的提案，但是這些也是我非常推薦的，如果我之後想不到東西可以寫再來補上。

動漫

海盜戰記 (文戲好看程度 » 打戲)
地 (以很有意思的觀點來敘述)

歌曲

discord-disco-Toaka
怪獸-魚韻
ハレの日に-汐れいら

物品類

電子閱讀器 (大家應該都有)
電動刮鬍刀

Blog

文章導覽

我很喜歡wiwi.blog右側文章列表欄，又很喜歡stack的介面，所以我就都把它們縫在一起了。

此方法也是透過AI完成的，我本人能力真的不好沒辦法靠自己完成他。

講的比較簡略，如果有需要可以私信我可以跟你說明的更加詳細。

首先需要在hugo.toml加入組件

1
2
3
4


  [params.widgets]
    homepage = [
      { type = "article-nav", params = {limit = 2000} }
    ]

找出所有post且沒有隱藏的文章

1
2
3


{{ $pages := where $context.Site.RegularPages "Type" "post" }}
{{ $notHidden := where $context.Site.RegularPages "Params.hidden" "!=" true }}
{{ $filtered := ($pages | intersect $notHidden) }}

生成文章列表，{{ .File.BaseFileName }}會根據我的檔名顯示，若想要用標題顯示可以直接改成{{ .Title }}

用檔名我才會有動力去整理文章，不然我原本的檔名都是{date}.md。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<div class="widget-article-nav--list">
    {{ range first $limit $filtered }}
        <div class="article-nav-item">
            <a href="/#article-{{ .File.BaseFileName }}" 
               class="article-nav-link" 
               data-article-id="article-{{ .File.BaseFileName }}">
                {{ .File.BaseFileName }}
            </a>
        </div>
    {{ end }}
</div>

這邊要注意的是，當點擊的文章的時候，會阻止跳轉，然後會取得文章的ID，並找到對應的文章。

1
2
3
4
5
6


        link.addEventListener('click', function(e) {
            e.preventDefault();  // 阻止預設跳轉
            const articleId = this.getAttribute('data-article-id');
            const targetElement = document.getElementById(articleId);
        }
        ...

自動滾動並加上高亮

1
2


  targetElement.scrollIntoView({ behavior: 'smooth' });
  targetElement.classList.add('highlighted');

抄作業的同學這邊請


    {{- $context := .Context -}}
    {{- $limit := default 10 .Params.limit -}}
<section class="widget article-nav">
    <h3 class="widget-title section-title">文章導覽</h3>

    {{ $pages := where $context.Site.RegularPages "Type" "post" }}
    {{ $notHidden := where $context.Site.RegularPages "Params.hidden" "!=" true }}
    {{ $filtered := ($pages | intersect $notHidden) }}
    
    <div class="widget-article-nav--list">
        {{ range first $limit $filtered }}
            <div class="article-nav-item">
                <a href="/#article-{{ .File.BaseFileName }}" class="article-nav-link" data-article-id="article-{{ .File.BaseFileName }}">
                    {{ .File.BaseFileName }}
                </a>
            </div>
        {{ end }}
    </div>
    
    <!-- 其他代碼保持不變 -->
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const navLinks = document.querySelectorAll('.article-nav-link');
            
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const articleId = this.getAttribute('data-article-id');
                    const targetElement = document.getElementById(articleId);
                    
                    if (targetElement) {
                        // 如果在同一頁面
                        if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
                            targetElement.scrollIntoView({ 
                                behavior: 'smooth',
                                block: 'start'
                            });
                            
                            // 添加高亮效果
                            document.querySelectorAll('article[id^="article-"]').forEach(article => {
                                article.classList.remove('highlighted');
                            });
                            targetElement.classList.add('highlighted');
                            
                            // 3秒後移除高亮
                            setTimeout(() => {
                                targetElement.classList.remove('highlighted');
                            }, 3000);
                        } 
                    }
                });
            });
            
            // 如果 URL 中有 hash，在頁面載入時自動滾動
            if (window.location.hash && window.location.hash.startsWith('#article-')) {
                const targetId = window.location.hash.substring(1);
                const targetElement = document.getElementById(targetId);
                if (targetElement) {
                    setTimeout(() => {
                        targetElement.scrollIntoView({ 
                            behavior: 'smooth',
                            block: 'start'
                        });
                        targetElement.classList.add('highlighted');
                        setTimeout(() => {
                            targetElement.classList.remove('highlighted');
                        }, 3000);
                    }, 100);
                }
            }
        });
    </script>
</section>

Blog

now 的另一種設置方式

新增了最近在幹嘛，有興趣的可以去看看，應該會每個月發一次(吧?)

作法跟JN這篇的不太一樣。

此做法透過AI來幫忙，可能不是最優解，若是有更好的方法可以私信來跟我說。

我是將 rss.xml 新增now進去rss中

1
2
3
4


{{- if or $.IsHome $.IsSection -}}
    {{/* 首頁或分區:包含 post 和 now 頁面 */}}
    {{- $posts := where .Site.RegularPages "Type" "==" "post" -}}
    {{- $nowPage := .Site.GetPage "/now" -}}

接下來透過lastmod來判斷哪一篇文章是最新修改過的。

1
2


{{/* 按最後修改時間排序,最新的在前 */}}
{{- $pages = $pages.ByLastmod.Reverse -}}

所以我的post default.md就會多了一個lastmod，如果想要讓他新增至rss的最上面就修改lastmod就好了。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


---
title:
date: {{ .Date }}
lastmod: {{ .Date }}
draft: false
categories:
  - blog
tags:
  - 
---

但我還沒試過在FreshRSS會是什麼樣子，我等等來測試一下。(測試成功!!!)

接下來給一些懶的搞的人抄作業(我也是喜歡抄作業的人，所以我懂)

直接在layouts\_default\rss.xml上半部分貼上就好囉，下面是一樣的


{{- $pctx := . -}}
{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
{{- $pages := slice -}}
{{- if or $.IsHome $.IsSection -}}
    {{/* 首頁或分區:包含 post 和 now 頁面 */}}
    {{- $posts := where .Site.RegularPages "Type" "==" "post" -}}
    {{- $nowPage := .Site.GetPage "/now" -}}
    {{- if $nowPage -}}
        {{- $pages = union $posts (slice $nowPage) -}}
    {{- else -}}
        {{- $pages = $posts -}}
    {{- end -}}
{{- else -}}
    {{- $pages = $pctx.Pages -}}
{{- end -}}
{{- $pages := where $pages "Params.hidden" "!=" true -}}
{{/* 按最後修改時間排序,最新的在前 */}}
{{- $pages = $pages.ByLastmod.Reverse -}}
{{- $limit := .Site.Config.Services.RSS.Limit -}}
{{- if ge $limit 1 -}}
    {{- $pages = $pages | first $limit -}}
{{- end -}}

Blog

動態與文章

有些人會將一些想法放在動態牆上，這樣不會被RSS推播，可以保持界面整潔度，有比較嚴謹的文章才會弄成一篇文章。

原本我也有這個打算，但是想到我目前還沒有太有深度的文章就先算了XDD

我目前光是回顧並打成一篇通順的文章可能就要花費我一個早上，要像各位大神們可以總結出一個結論還是有點難。

現在的我大概只知道我這樣想是錯的，持續下去說不定可以越來越熟練。

這篇小廢文大概花了10分鐘才想好XDD

Blog

達成第2頁成就

我把stack的換頁設定提高到2000頁了。

這樣我只要持續5.48年就可以看到我的第2頁，這時候右邊的文章列就會失效。

為了要看到第二頁我要努力發廢文(?

Blog

終於變成自己開心的樣子

終於改好了介面，看起來就是左抄一個右抄一個哈哈

看到有喜歡的就叫AI來幫我實現了，後面有想改的再來慢慢實現。