雖然我沒有經歷過無名小站的年代，但很常看到有人說一定要有音樂撥放器。
所以我也叫AI做了一個，可以放我自己很喜歡的音樂跟大家分享。
我要不要把上面的暫停、音量調整全部移除，讓大家強制聽我的音樂，連暫停都不能按XD
Tags
第 3 頁
版面
我很喜歡wiwi.blog右側文章列表欄，又很喜歡stack的介面，所以我就都把它們縫在一起了。
此方法也是透過AI完成的，我本人能力真的不好沒辦法靠自己完成他。
講的比較簡略，如果有需要可以私信我可以跟你說明的更加詳細。
首先需要在hugo.toml加入組件
|
|
找出所有post且沒有隱藏的文章
|
|
生成文章列表，{{ .File.BaseFileName }}會根據我的檔名顯示，若想要用標題顯示可以直接改成{{ .Title }}
用檔名我才會有動力去整理文章，不然我原本的檔名都是{date}.md。
|
|
這邊要注意的是，當點擊的文章的時候，會阻止跳轉，然後會取得文章的ID，並找到對應的文章。
|
|
自動滾動並加上高亮
|
|
抄作業的同學這邊請
{{- $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>
新增了最近在幹嘛，有興趣的可以去看看，應該會每個月發一次(吧?)
作法跟JN這篇的不太一樣。
此做法透過AI來幫忙，可能不是最優解，若是有更好的方法可以私信來跟我說。
我是將 rss.xml 新增now進去rss中
|
|
接下來透過lastmod來判斷哪一篇文章是最新修改過的。
|
|
所以我的post default.md就會多了一個lastmod，如果想要讓他新增至rss的最上面就修改lastmod就好了。
|
|
但我還沒試過在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 -}}