Tutor on 森林游乐场

Blog装修其一

Tue, 10 Feb 2026 12:01:00 +0800

装修参考第三夏尔的装修笔记，并依靠 ai 的大力支持。

折叠功能

callout 样式与折叠

主要靠 vibe，参考 obsidian 的色系，并支持嵌套列表之类的功能。折腾半天最后通过下面的代码块加 quickadd 的捕获功能来同时兼容 obsidian-callout 折叠和博客折叠。

>[!note]- 
>{{< details title = "{{value:请输入标题}}" >}}
>{{value:输入内容}}
>{{< /details >}}

Note

hugo 官方提供展示短代码的方式，在两层大括号里使用 </* */> 包裹代码，被包裹的部分不会执行。

样式清单

点击展开

[!NOTE] / [!INFO] — 蓝色注释 / 信息

[!TIP] / [!ABSTRACT] — 青色提示 / 摘要

[!SUCCESS] / [!DONE] — 绿色成功 / 完成

[!WARNING] / [!CAUTION] — 橙色警告 / 注意

[!QUESTION] — 橙色问题

[!FAILURE] / [!DANGER] / [!BUG] — 红色失败 / 危险 / 错误

[!IMPORTANT] — 红色重要

[!EXAMPLE] — 紫色示例

[!QUOTE] — 灰色引用

普通折叠块

来自 Stackoverflow ，效果为简单的黑色箭头。

创建 \layouts\shortcodes\details.html

代码

<details {{ if .Get "open" }}open{{ end }}>
    <summary>{{ .Get "title" | default "点击展开" }}</summary>
    <div class="details-content">
        {{ .Inner | markdownify }}
    </div>
</details>

样式设置 assets/scss/custom.scss

代码

/* 简单的 details 美化 */
details {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--card-border); /* 适配 Stack 主题的边框颜色 */
    background-color: var(--card-background); /* 适配 Stack 主题的背景 */
    border-radius: var(--card-border-radius);
    
    summary {
        cursor: pointer;
        font-weight: bold;
        outline: none;
    }
    
    .details-content {
        margin-top: 1rem;
    }
}

使用方法如下

<details>
<summary>标题</summary>
内容
</details>

页面

在 content 文件夹中修改关于、主页和搜索页，配置图标。 content/home/_index.md

yaml

---
title: "主页"
slug: "home"
layout: "home-posts"
menu:
  main:
    identifier: home
    url: /home/
    weight: 10
    params:
      icon: bubble  
---

layouts/home/home-posts.html

yaml

{{ define "main" }}
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ $filtered := where $pages "Params.hidden" "!=" true }}
{{ $pag := .Paginate ($filtered) }}

<section class="article-list">
    {{ range $index, $element := $pag.Pages }}
    {{ partial "article-list/default" . }}
    {{ end }}
</section>

{{- partial "pagination.html" . -}}
{{- partial "footer/footer" . -}}
{{ end }}

{{ define "right-sidebar" }}
{{ partial "sidebar/right.html" (dict "Context" . "Scope" "homepage") }}
{{ end }}

content/search/index.md

yaml

---
title: "搜索"
slug: "search"
layout: "search"
type: "page"
outputs:
    - html
    - json
menu:
  main:
    identifier: search
    url: /search/
    weight: 40
    params:
      icon: search
---

图标可以在 Tabler Icons 中下，并放到主题文件夹的 assets/icons 下，就能在 yaml 中直接设置了。

页脚

建站计时&字数统计

样式和代码参考自[第三夏尔的装修博客][(https://rwtx.cc/04/2260/uncategorized/) ] 。

计时逻辑修改 layouts/partials/footer/custom.html。

Note

点击展开

<!-- Add blog running time -->
<script>
 let s1 = '2023-3-18'; //website start date
 s1 = new Date(s1.replace(/-/g, "/"));
 let s2 = new Date();

 // Calculate the difference
 let diffInMilliseconds = s2.getTime() - s1.getTime();
 let totalDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));

 // Create a new date object starting from the initial date
 let years = s2.getFullYear() - s1.getFullYear();
 let months = s2.getMonth() - s1.getMonth();
 let days = s2.getDate() - s1.getDate();

 // Adjust months and years if necessary
 if (days < 0) {
   months -= 1;
   let prevMonth = new Date(s2.getFullYear(), s2.getMonth(), 0); // Get the last day of the previous month
   days += prevMonth.getDate();
 }
 if (months < 0) {
   years -= 1;
   months += 12;
 }

 // Format the result
 let result = `${years}年${months}月${days}天`;
 document.getElementById('runningdays').innerHTML = result;
</script>

页脚内容修改 layouts/partials/footer/footer.html。发现这个文件会覆盖主题默认的内容，手动加了版权和主题信息。

Note

点击展开

<div class="footer-layout">
    <!-- Add blog running time -->
    <section class="running-time">
        本博客已稳定运行
        <span id="runningdays" class="running-days"></span>
    </section>


    <!-- Add copyright notice -->
    <section class="copyright-notice">
        © 2024 - 2026 新喀鸦006 All rights reserved. 禁止转载。如需引用，请注明文章链接。
    </section>

    <!-- Add total page and word count time -->
    <section class="totalcount">
        {{$scratch := newScratch}}
        {{ range (where .Site.Pages "Kind" "page" )}}
        {{$scratch.Add "total" .WordCount}}
        {{ end }}
        发表了{{ len (where .Site.RegularPages "Section" "post") }}篇文章 ·
        总计{{ div ($scratch.Get "total") 1000.0 | lang.FormatNumber 2 }}k字
    </section>

    <section class="footer-credits">
        使用 Hugo 构建
    </section>
    <section class="footer-credits">
        主题 Stack 由 Jimmy 设计
    </section>
</div>

样式修改 assets/scss/partials/footer.scss。

Note

点击展开

// 底部距离
main.main {
    padding-bottom: 4rem;
}

.footer-layout {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.running-time {
    color: var(--card-text-color-secondary);
    font-weight: normal;
    font-size: 14px;

    .running-days {
        font-weight: bold;
        color: var(--emphasize-text-color);
    }
}

.totalcount {
    color: var(--card-text-color-secondary);
    font-weight: normal;
    font-size: 14px;
}

.copyright-notice {
    font-weight: bold;
    color: #8fbc8f;
    font-size: 14px;
}

.footer-credits {
    color: #a0a0a0;
    font-size: 12px;
    font-weight: normal;
}

页脚分割符

在 assets/scss/partials/footer.scss 的 .running-time 类中添加了 ::before 伪元素实现的视觉分隔符。

Note

.running-time {
    color: var(--card-text-color-secondary);
    font-weight: normal;
    font-size: 14px;

    &::before {
        content: "";
        display: block;
        width: 50px;
        height: 3px;
        background: #B0B0B0;
        margin: 0 0 20px; // 左对齐，下边距 20px
    }

链接

外部链接显示图标

创建 layouts/_default/_markup/render-link.html 。

Note

点击展开

<a class="link" href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}
    {{- if strings.HasPrefix .Destination "http" }}
    <span style="white-space: nowrap;"><svg width=".7em"
        height=".7em" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
        <path d="m13 3l3.293 3.293l-7 7l1.414 1.414l7-7L21 11V3z" fill="currentColor" />
        <path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"
            fill="currentColor" />
    </svg></span>
    {{- end -}}
</a>

内部链接支持Obsidian 链接

格式为： [Link Text](Filename.md)

layouts/_default/_markup/render-link.html

Note

点击展开

{{- $dest := .Destination -}}
{{- $isRemote := or (strings.HasPrefix $dest "http") (strings.HasPrefix $dest "mailto") -}}
{{- if not $isRemote -}}
{{- $urlParts := split $dest "#" -}}
{{- $path := index $urlParts 0 -}}
{{- $anchor := "" -}}
{{- if gt (len $urlParts) 1 -}}
{{- $anchor = printf "#%s" (delimit (after 1 $urlParts) "#") -}}
{{- end -}}

{{- $page := .Page.GetPage $path -}}
{{- if $page -}}
{{- $dest = printf "%s%s" $page.RelPermalink $anchor -}}
{{- else -}}
{{- /* Attempt to find by filename (Obsidian style) */ -}}
{{- $filename := path.Base $path -}}
{{- $name := $filename | strings.TrimSuffix (path.Ext $filename) -}}

{{- range site.RegularPages -}}
{{- if or (eq .File.LogicalName $filename) (eq .File.ContentBaseName $name) -}}
{{- $dest = printf "%s%s" .RelPermalink $anchor -}}
{{- break -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- end -}}

<a class="link" href="{{ $dest | safeURL }}" {{ with .Title}} title="{{ . }}" {{ end }}{{ if strings.HasPrefix
    .Destination "http" }} target="_blank" rel="noopener" {{ end }}>{{ .Text | safeHTML }}
    {{- if strings.HasPrefix .Destination "http" }}
    <span style="white-space: nowrap;"><svg width=".7em" height=".7em" viewBox="0 0 21 21"
            xmlns="http://www.w3.org/2000/svg">
            <path d="m13 3l3.293 3.293l-7 7l1.414 1.414l7-7L21 11V3z" fill="currentColor" />
            <path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"
                fill="currentColor" />
        </svg></span>
    {{- end -}}
</a>

macOS 风代码块

修改主题文件夹下 assets/scss/partials/layout/article.scss 中的 .highlight 部分。

.highlight {
    background-color: var (--pre-background-color);
    padding: var (--card-padding);
    position: relative;
    border-radius: 10px;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: var (--shadow-l1) !important;
    ...}

在根目录创建 static/img/code-header.svg 。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  x="0px" y="0px" width="450px" height="130px">
    <ellipse cx="65" cy="65" rx="50" ry="52" stroke="rgb(220,60,54)" stroke-width="2" fill="rgb(237,108,96)"/>
    <ellipse cx="225" cy="65" rx="50" ry="52"  stroke="rgb(218,151,33)" stroke-width="2" fill="rgb(247,193,81)"/>
    <ellipse cx="385" cy="65" rx="50" ry="52"  stroke="rgb(27,161,37)" stroke-width="2" fill="rgb(100,200,86)"/>
</svg>

在根目录下的 assets/scss/custom.scss 添加代码块的样式：

// 为代码块顶部添加 macos 样式
.article-content {
    .highlight:before {
      content: "";
      display: block;
      background: url(/img/code-header.svg);
      height: 25px;
      width: 100%;
      background-size: 52px;
      background-repeat: no-repeat;
      margin-top: -10px;
      margin-bottom: 0;
    }
  }

首页标签云显示数目

layouts\partials\widget\categories.html

{{- $context := .Context -}}
{{- $limit := default 10 .Params.limit -}}
<section class="widget tagCloud">
    <div class="widget-icon">
        {{ partial "helper/icon" "categories" }}
    </div>
    <h2 class="widget-title section-title">{{ T "widget.categoriesCloud.title" }}</h2>

    <div class="tagCloud-tags">
        {{ range first $limit $context.Site.Taxonomies.categories.ByCount }}
        <a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}">
            {{ .Page.Title }}
            <span class="count">{{ .Count }}</span>
        </a>
        {{ end }}
    </div>
</section>

layouts/partials/widget/tag-cloud.html

{{- $context := .Context -}}
{{- $limit := default 10 .Params.limit -}}
<section class="widget tagCloud">
    <div class="widget-icon">
        {{ partial "helper/icon" "tag" }}
    </div>
    <h2 class="widget-title section-title">{{ T "widget.tagCloud.title" }}</h2>

    <div class="tagCloud-tags">
        {{ range first $limit $context.Site.Taxonomies.tags.ByCount }}
        <a href="{{ .Page.RelPermalink }}">
            {{ .Page.Title }}
            <span class="count">{{ .Count }}</span>
        </a>
        {{ end }}
    </div>
</section>

assets\scss\custom.scss

.tagCloud .tagCloud-tags a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .count {
        color: var(--card-text-color-tertiary);
        margin-left: 0.5rem;
    }
}

Neodb 短评卡片

hugo 版本为 v0.154.3, 参考这里中Hugo v0.123.0 及之后的版本。不知道为什么直接使用有一些问题，让 ai 修改了一下。

`1`	`{{< neodb-review "https://neodb.social/..." >}}`

注意获取的 token 只给可读权限。

layouts/shortcodes/neodb-review.html


  
    

    点击展开
    
        
  

  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
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105


{{ $dbUrl := .Get 0 }} {{ $apiUrl := "https://neodb.social/api/me/shelf/item/"
}} {{ $itemUuid := "" }}
{{ $authToken := site.Params.neodb_token }}

{{ if not $authToken }}
<p style="text-align: center; color: red;"><small>NeoDB API Token not found. Please set 'neodb_token' in your site
        configuration.</small></p>
{{ else }}

<!-- Extract item_uuid from the URL -->
{{ if (findRE `.*neodb\.social\/.*\/(.*)` $dbUrl) }}
{{ $itemUuid = replaceRE `.*neodb\.social\/.*\/(.*)` "$1" $dbUrl }}

<!-- Construct the API URL -->
{{ $dbApiUrl := print $apiUrl $itemUuid }}

<!-- Set up the Authorization header -->
{{ $opts := dict "headers" (dict "Authorization" (print "Bearer " $authToken)) }}

<!-- Fetch JSON from the API using resources.GetRemote -->
{{ $dbFetch := resources.GetRemote $dbApiUrl $opts | transform.Unmarshal }}

<!-- Determine shelf status -->
{{ $shelfType := $dbFetch.shelf_type }} {{ $category := $dbFetch.item.category }}
{{ $action := "" }} {{ $prefix := "" }} {{ $suffix := "" }} {{ $displayText := "" }}

<!-- Determine the action based on category -->
{{ if eq $category "book" }} {{ $action = "读" }} {{ else if or (eq $category "tv") (eq $category "movie") }} {{ $action
= "看" }} {{ else if or (eq $category "podcast") (eq $category "album") }} {{ $action = "听" }} {{ else if eq $category
"game" }} {{ $action = "玩" }} {{ end }}

<!-- Determine the prefix and suffix based on shelf type -->
{{ if eq $shelfType "wishlist" }} {{ $prefix = "想" }} {{ else if eq $shelfType "complete" }} {{ $suffix = "过" }} {{ else
if eq $shelfType "progress" }} {{ $prefix = "在" }} {{ else if eq $shelfType "dropped" }} {{ $prefix = "不" }} {{ $suffix
= "了" }} {{ end }}

<!-- Combine prefix, action, and suffix -->
{{ $displayText = print $prefix $action $suffix }}

<!-- Prep for star rating -->
{{ $fullStars := 0 }} {{ $starCount := 0 }} {{ $halfStar := 0 }} {{ $emptyStars := 5 }}
<!-- Calc star rating -->
{{ $rating := $dbFetch.rating_grade }}
<!-- Get the rating -->
{{ if $rating }} {{ $starCount = div (mul $rating 5) 10 }} {{ $fullStars = int $starCount }}
<!-- Full stars count -->

<!-- Determine if there is a half star -->
{{ if (mod $rating 2) }} {{ $halfStar = 1 }} {{ end }}

<!-- Calculate empty stars -->
{{ $emptyStars = sub 5 (add $fullStars $halfStar) }}
<!-- Empty stars count -->
{{ end }}

<!-- Check if data is retrieved -->
{{ if $dbFetch }}
<div class="db-card">
    <div class="db-card-subject">
        <div class="db-card-post">
            <img src="{{ $dbFetch.item.cover_image_url }}" alt="Cover Image" style="max-width: 100%; height: auto" />
        </div>
        <div class="db-card-content">
            <div class="db-card-title">
                <a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">{{ $dbFetch.item.title }}</a>
            </div>
            <div class="db-card-rating">
                {{ $dbFetch.created_time | time.Format "2006-01-02T15:04:05Z" | time.Format "2006 年 01 月 02 日" }} {{
                $displayText }}
                <!-- Add the rating as stars -->
                <div class="db-card-rating-stars">
                    <!-- Full stars -->
                    {{ if $fullStars }} {{ range $i := (seq 1 $fullStars) }}
                    <i class="fa-solid fa-star"></i>
                    {{ end }} {{ end }}

                    <!-- Half star -->
                    {{ if $halfStar }}
                    <i class="fa-regular fa-star-half-stroke"></i>
                    {{ end }}

                    <!-- Empty stars -->
                    {{ if $emptyStars }} {{ range $i := (seq 1 $emptyStars) }}
                    <i class="fa-regular fa-star"></i>
                    {{ end }} {{ end }}
                </div>
            </div>
            <div class="db-card-comment">
                {{ $dbFetch.comment_text | markdownify }}
            </div>
        </div>
        <div class="db-card-cate">{{ $dbFetch.item.category }}</div>
    </div>
</div>
{{ else }}
<p style="text-align: center">
    <small>Failed to fetch content, please check the API validity.</small>
</p>
{{ end }}

{{ else }}
<p style="text-align: center"><small>Invalid URL format.</small></p>
{{ end }}

{{ end }}

修改 hugo.toml 添加 token。




1
2


[params]
neodb_token = "你的token"


上面的代码使用到 Font Awesome
    。注册账号后 add a new kit - 填完信息后能看到如下格式的代码，粘贴在 layouts/partials/head/custom.html 内：


1
2


<!-- Font awesome -->
<script src="https://kit.fontawesome.com/xxxxx.js" crossorigin="anonymous"></script>



  
    
     assets/scss/custom.scss -自定义样式
  
  
    

    点击展开
    
        
  

 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92


// Neodb card style
.db-card {
    margin: 2.5rem 2.5rem;
    background: var(--color-codebg);
    border-radius: 7px;
    box-shadow: 0 6px 10px 0 #00000053;
}

.db-card-subject {
    display: flex;
    align-items: flex-start;
    line-height: 1.6;
    padding: 12px;
    position: relative;
}

.dark .db-card {
    background: var(--color-codebg);
}

.db-card-content {
    flex: 1 1 auto;
    overflow: auto;
    margin-top: 8px;
}

.db-card-post {
    width: 100px;
    margin-right: 15px;
    margin-top: 20px;
    display: flex;
    flex: 0 0 auto;
}

.db-card-title {
    margin-bottom: 3px;
    font-size: 1.6rem;
    color: var(--card-text-color-main);
    font-weight: bold;
}

.db-card-title a {
    text-decoration: none!important;
}

.db-card-rating {
    font-size: calc(var(--article-font-size) * 0.9);
}

.db-card-comment {
    font-size: calc(var(--article-font-size) * 0.9);
    margin-top: 10px;
    margin-bottom: 15px;
    overflow: auto;
    max-height: 150px!important;
    color: var(--card-text-color-main);
}

.db-card-cate {
    position: absolute;
    top: 0;
    right: 0;
    background: #8aa2d3;
    padding: 1px 8px;
    font-size: small;
    font-style: italic;
    border-radius: 0 8px 0 8px;
    text-transform: capitalize;
}

 .db-card-post img {
    width: 100px!important;
    height: 150px!important;
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover;
}

@media (max-width: 600px) {
    .db-card {
        margin: 0.8rem 0.5rem;
    }
    .db-card-title {
        font-size: calc(var(--article-font-size) * 0.75);
    }
    .db-card-rating {
      font-size: calc(var(--article-font-size) * 0.7);
    }
    .db-card-comment {
      font-size: calc(var(--article-font-size) * 0.7);
    }
}



Blog新增书影游页
Mon, 26 Jan 2026 10:52:00 +0800
数据同步选用方案B，单独数据仓库。
然后是前端界面。顶部tag：最近 / 文 / 影 / 听/ 游，Tab 内支持排序与筛选（最近、评分、完成时间），最近tag显示过去几个月的混合流。
本笔记是和 AI 交流得出的方案，可以先聊好需求，再最小化实践。

不知道为什么数据仓库没有活动但这个页面的数据却在更新（2026.4.3），可能是因为我用了 cloudfare?
展示样式
Tabs

最近：显示过去 N 天（默认 90）的混合流（book+movie+tv+podcast+game）
文：book
影：movie + tv（卡片角标区分）
听：podcast
游：game

排序

最近：created_time desc
评分：rating desc（null 放最后）

筛选（建议最小可用集）

时间范围（仅“最近”Tab）：30/90/180 天
子类型（仅“影”Tab）：电影/剧集
仅有短评：开关
标签：下拉多选（从 index 里聚合 tags）

Drawer（不跳页 + 支持可分享 URL）
实现“打开抽屉但不刷新页面”的同时，把状态写进 URL：

/media/?tab=ying&id=<uuid>&sort=recent&days=90

用 history.pushState，关闭抽屉时移除 id。

抽屉展示：

你的评分 + 你的短评（来自 index）
“在 NeoDB 打开”链接

数据仓库
新建一个github repo neodb-media-data
获取 Neodb Token
    
点击头像-设置，下滑到底部，点击查看已授权的应用程序
    ，创建新的Personal Token 并记录。
在数据仓库的 Settings → Secrets and variables → Actions 的 Repository secrets 创建：

Name：NEODB_TOKEN
Secret：你的 token

在Settings → Pages → Build and deployment → Source：选择 GitHub Actions
下一步用最小 Workflow podcast complete 输出 index.json，看是否能成功读取数据。
Workflow 逻辑—— 参考AsyncX 博客
    
每天跑一次 + 支持手动触发：

分别拉：book / movie / tv / podcast / game 的 complete 列表（分页拉完）
生成/更新 index.json
找出 index 里新出现的 uuid（或 detail 缺失的 uuid）
对这些 uuid 调用条目详情接口，写入 detail/{type}/{uuid}.json
若 index.json 或 detail 有变化才 commit

创建 .github/workflows/neodb-sync-and-pages.yml

  
    
    Note
  
  
    

    点击展开
    
        
  

 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97


name: Sync NeoDB Podcast (complete)

on:
  workflow_dispatch:
  schedule:
    - cron: "23 2 * * *" # 每天 UTC 02:23 跑一次

permissions:
  contents: write

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Python
        uses: actions/setup-python@v5
        with:
          python-version: "3.11"

      - name: Install deps
        run: |
          python -m pip install --upgrade pip
          pip install requests

      - name: Fetch NeoDB shelf (podcast complete) -> index.json
        env:
          NEODB_TOKEN: ${{ secrets.NEODBTOKEN }}
          NEODB_BASE: https://neodb.social
        run: |
          python - <<'PY'
          import os, json, time
          import requests
          from datetime import datetime, timezone

          base = os.getenv("NEODB_BASE", "https://neodb.social").rstrip("/")
          token = os.environ["NEODB_TOKEN"]

          # 抓 podcast + complete
          url_tpl = f"{base}/api/me/shelf/progress?category=podcast&page={{page}}"

          headers = {
              "Authorization": f"Bearer {token}",
              "Accept": "application/json",
              "User-Agent": "neodb-sync-github-actions"
          }

          items = []
          page = 1
          while True:
              url = url_tpl.format(page=page)
              r = requests.get(url, headers=headers, timeout=30)
              if r.status_code != 200:
                  raise SystemExit(f"Request failed: {r.status_code} {r.text[:2000]}")
              data = r.json()

              # NeoDB 常见返回：{"data":[...], "count":..., ...}
              page_items = data.get("data") or []
              if not page_items:
                  break

              items.extend(page_items)
              page += 1
              time.sleep(0.2)  # 轻微限速，避免打太快

          out = {
              "generated_at": datetime.now(timezone.utc).isoformat(),
              "source": {
                  "base": base,
                  "shelf": "complete",
                  "category": "podcast",
              },
              "count": len(items),
              "items": items,
          }

          with open("index.json", "w", encoding="utf-8") as f:
              json.dump(out, f, ensure_ascii=False, indent=2)

          print(f"Wrote index.json with {len(items)} items")
          PY

      - name: Commit & push if changed
        run: |
          if git diff --quiet -- index.json; then
            echo "No changes in index.json"
            exit 0
          fi

          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"

          git add index.json
          git commit -m "chore: sync neodb podcast complete"
          git push




    


  
做完这一步，可以把 index.json 的公开地址发给 AI，让它给出之前讨论好方案的完整版。
Hugo 仓库
本地测试
先在本地修改到满意, 最后的版本是 AI 写的也没细看，有些 bug 但暂时没管，推到线上和本地效果一致
新增页面  content/media/index.md


1
2
3
4


---
 title: "影音" 
 layout: "media"
---


新增 layout  layouts/_default/media.html


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{{ define "main" }}
<h1>{{ .Title }}</h1>

<div id="media-app">
  <p>Loading media data…</p>
</div>

<script>
  window.NEODB_DATA_URL = "https://yohakuo.github.io/neodb-media-data/index.json";
</script>
<script src="/js/neodb-media.js"></script>
{{ end }}


新建 JS  static/js/neodb-media.js


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


(async function () {
  const root = document.getElementById("media-app");
  const url = window.NEODB_DATA_URL;

  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error(res.status);
    const data = await res.json();

    root.innerHTML = `
      <p>Items: ${data.count}</p>
      <ul>
        ${data.items.slice(0, 10).map(it => `
          <li>
            ${it.item?.display_title || "Untitled"}
            (${it._category}, ${it._shelf})
          </li>
        `).join("")}
      </ul>
    `;
  } catch (e) {
    root.innerHTML = `<pre>Failed to load data: ${e}</pre>`;
  }
})();





自动化工作流聚合信息初尝试（n8n,telegram）
Fri, 15 Aug 2025 19:51:00 +0800
参考
    
本文在 简单工作流的搭建 搭建了最简单的工作流（存在缺陷）。如果想要动手尝试，先到快速启动 下载必要引擎，然后可以直接跳到 使用已有的工作流。
n8n 版本： 1.106.3
快速启动
下载 Docker Desktop
    
测试模式，不要关闭终端


1


docker run -it --rm --name n8n -p 5678:5678 -e "HTTP_PROXY=http://127.0.0.1:7890" -e "HTTPS_PROXY=http://127.0.0.1:7890" -v ~/.n8n:/home/node/.n8n n8nio/n8n


稳定版


1


docker run -d --name n8n -p 5678:5678 -e "HTTP_PROXY=http://127.0.0.1:7890" -e "HTTPS_PROXY=http://127.0.0.1:7890" -v ~/.n8n:/home/node/.n8n -v ~/.n8n_database:/database n8nio/n8n


如果想稳定代理的话应该考虑在本地存储代理信息，这样删容器代理不受影响。
然后初始化 n8n 。访问 http://localhost:5678 进行注册，需要邮箱验证。
简单工作流的搭建
创建 Telegram Bot 并连接到 n8n
这个部分的群组可以不创建，我目前把这个群组作为 log。
创建一个 Telegram Bot

打开 Telegram 客户端，在搜索框里搜索 @BotFather (注意核对官方认证的蓝色√图标)，然后点进去开始聊天。
发送 /newbot 给 BotFather。
给机器人起名字以及用户名 (username，后面查找机器人用)，这个必须以 bot 结尾。
创建成功后，BotFather 会给你一长串API Token。请立即复制并保存好这个 Token。

创建一个用于接收信息的频道 (Channel)

在 Telegram 里，创建一个新的频道。给它起个名字。
重要：将频道类型设置为私有。
然后把刚刚创建的机器人添加到这个频道作为管理员，设置权限。

完成到这里可以跳到 使用已有的工作流
创建并获取群组的 Chat ID（选做）

将你刚刚创建的机器人临时添加到一个普通的群组里，并且打开权限，然后在这个群组里随便发一条消息。
打开浏览器，访问以下网址 :
https://api.telegram.org/bot{YOUR_BOT_TOKEN}/getUpdates
你会看到一些 JSON 格式的文字。找到 chat 部分，里面有一个 id，它通常是一个以 -100 开头的数字，请复制并保存好它。

在 n8n 中配置 Telegram（选做）

打开 n8n 界面 (http://localhost:5678)。
点击 “Add workflow” 创建一个新工作流。
点击屏幕中央的 + 号，在搜索框里输入 Telegram，然后选择在 action 里面找到 send message。
在右侧的配置栏中：

Credential for Telegram API: 点击 “Create New”。

Credential Name: 随便起个名字。
Access Token: 粘贴你从 BotFather 那里得到的 API Token。
点击 “Save”。


Chat ID: 粘贴你刚刚获取的以 -100 开头的频道 Chat ID。
Text: 输入 Hello from n8n!。


点击节点下方的 “Execute node” 按钮。

添加第一个信息源 - RSS（选做）
从最简单的 RSS 开始，订阅一个你喜欢的博客。
1. 找到 RSS 链接
2. 在 n8n 中配置 RSS 工作流

点击 + 号，添加一个 Schedule 节点。在弹出的配置中，可以设置每小时 (Every Hour)、每天 (Every Day) 等。
点击 Schedule 节点右侧的 + 号上，在弹出的搜索框里输入 RSS，选择 RSS Read  节点，配置 URL 即可。


  
    
    Note
  
  
    这里可能会遇到网站有安全设置，可以试试这个 RSS 转换
    ，登录之后把博客主页地址输入，生成 RSS

  

RSS Read 连接到我们之前创建的 Telegram 节点。
然后需要修改 Telegram 节点的 Text 内容，让它发送 RSS 的标题和链接。

在 Text 输入框右边，点击 “Add Expression”。
在表达式输入框里输入：





1
2
3


标题：{{ $json.title }}

链接：{{ $json.link }}



返回主界面点击右下角的 “Execute workflow” 按钮来测试整个流程。运行成功你会在 telegram 群聊看到推送的 10 条新消息（默认情况）。

这个基础简单的工作流如下图。功能是每 5 分钟自动检查指定网站是否有新文章发布，并将所有新文章的标题和链接，逐条发送到指定 Telegram 频道。如果重复执行会发现每次都会发送 10 条信息，如果在推送前进行比对可以在 RSS 后加一个 function 模块。

  
    
  
  


可以重复这个流程来订阅其它 RSS ，但不要忘记以上步骤是在一个测试群聊里进行的，如果想要把信息送到频道，需要把上面配置的 Chat ID 修改为频道 id，这里使用一个简单的方法获得 id：

在 Telegram 里，搜索并关注一个叫做 @userinfobot 的机器人，或点击链接
    。
进入接收消息的那个频道，并转发任意一条消息，发送给刚刚那个 @userinfobot。
@userinfobot 会立刻回复你一条信息，找到 Id 后面跟着的那个以 -100 开头的数字，即你频道的唯一 ID。


  
    
    Note
  
  
    有好奇心的朋友可能会用这个机器人来试一试之前那个群聊的 id，你会发现这个得到的 id 并不是-100 开头的那个 id 了。
这是因为 Telegram 建群时默认的类型是普通群组（功能有限），而-100 开头的是拥有更强大的功能的超级群组。为了让 n8n 就能稳定地发送消息， Chat ID 需要用 -100 开头的。私人频道可以满足个人信息聚合的要求。如果想把信息发到一个群里和朋友分享，可以自行搜索手动将那个群升级。

  
使用已有的工作流
当然，如果也可以直接使用别人的成果– reorx的工作流合集
    ，博主有简单说明逻辑。
以 RSS 的工作流为例，先进入仓库
    ，复制 json 文件。回到 n8n 后台新建工作流，直接粘贴。然后修改 RSS 的链接，以及 telegram 的 chatid 。最后点击执行工作流测试一下是否连通。如果没问题的话，会在频道收到一条最新的推文。
chatid 的获取

在 Telegram 里，搜索并关注一个叫做 @userinfobot 的机器人，或点击链接
    。
进入接收消息的那个频道，并转发任意一条消息，发送给刚刚那个 @userinfobot。
@userinfobot 会立刻回复你一条信息，找到 Id 后面跟着的那个以 -100 开头的数字，即你频道的唯一 ID。

进阶玩法-订阅多个 RSS
从头搭建一个工作流来处理多个 RSS 源。
Code 节点（订阅管理）


 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


const myRssFeeds = [
  { name: "douchi", url: "https://rss.app/feeds/hZVUbnIx3yBAbKMU.xml" },
  { name: "yukieyun", url: "https://yukieyun.net/index.xml" },
  { name: "thirdshire", url: "https://thirdshire.com/index.xml" },
  { name: "yitaoli", url: "https://yitaoli2023.github.io/yitaoli/index.xml" },
  { name: "bamboobone9", url: "https://bamboobone9.com/index.xml" },
  { name: "pursuitus", url: "https://blog.pursuitus.com/feed" },
  { name: "wraith615", url: "https://blog.wraith615.xyz/rss.xml" },
  { name: "gigigatgat", url: "https://www.gigigatgat.ca/index.xml" },
  { name: "ignativssss", url: "https://ignativssss.github.io//index.xml" },
  { name: "asyncx", url: "https://blog.asyncx.top/zh.xml" },
  { name: "birds", url: "https://moresci.sale/@birds.rss" },
  { name: "shyrz", url: "https://shyrz.me/rss/" },
  { name: "douchiBook", url: "https://bamboobone9.com/index.xml" },
  { name: "ruanyifeng", url: "https://feeds.feedburner.com/ruanyifeng" },
  { name: "decohack", url: "https://decohack.com/feed/" }
 
];

return myRssFeeds.map(feed => ({
  json: {
    feedName: feed.name,
    feedUrl: feed.url
  }
}));


RSS Read 节点
Feed URL ： {{ $json.feedUrl }}
Code 节点（剪切）
只保留最新 3（n） 条，不确定是否能提高效率。


1
2
3
4
5
6
7
8
9


const items = $input.all();

items.sort((a, b) => {
  const dateA = new Date(a.json.pubDate || 0).getTime();
  const dateB = new Date(b.json.pubDate || 0).getTime();
  return dateB - dateA;
});

return items.slice(0, 3);


Edit Fields (Set) 节点

点击 Add Value (添加值)。
Name (名称): 输入 feedName
Value (值): 输入下面的表达式。



1


{{ $('list').item.json.feedName }}


并打开最下面的一个开关– Include Other Input Fields。
在 RSS Read 抓取完文章后，Set 节点会把 feedName 附加到每一篇文章数据上。
Code 节点（精选最新）
在所有新文章里，每个来源只挑出最新的一篇。


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


{% raw %}
const items = $input.all();
const latestByFeed = {}; // 用对象保存每个源的最新文章

for (const item of items) {
  const feed = item.json.feedName || 'unknown';
  const pubDate = item.json.pubDate ? new Date(item.json.pubDate).getTime() : 0;

  if (!latestByFeed[feed]) {
    latestByFeed[feed] = item;
  } else {
    const existingDate = latestByFeed[feed].json.pubDate ? new Date(latestByFeed[feed].json.pubDate).getTime() : 0;
    if (pubDate > existingDate) {
      latestByFeed[feed] = item;
    }
  }
}

// 把对象里的结果转成数组返回
return Object.values(latestByFeed);
{% endraw %}


Remove Duplicates 节点
防止文章重复。
operation：Remove Items Processed in Previous Executions
value ： {{ $json.guid || $json.link }} 
Send a text message（Telegram）


1
2
3


📝{{$json["title"]}} #blog 

{{$json["link"]}}


解析模式为 HTML。
工作流问题

  第三方服务不能成功

本地代理设置
报错 The service refused the connection - perhaps it is offline
检查容器代理情况


1


docker inspect n8n | Select-String -Pattern "PROXY"


输出是走代理的，核心问题是 127.0.0.1:7890 在容器里访问不到宿主机代理，最后修改了一下启动命令可以成功。


1


docker run -d --name n8n -p 5678:5678 -e "HTTP_PROXY=http://host.docker.internal:7890" -e "HTTPS_PROXY=http://host.docker.internal:7890" -v ~/.n8n:/home/node/.n8n -v ~/.n8n_database:/database n8nio/n8n


为了不再出这个问题，删了容器重新在本地直接存下配置，"C:\n8n-data\docker-compose.yml"


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


version: "3.8" 
services:
  n8n:
    image: n8nio/n8n
    container_name: n8n
    ports:
      - "5678:5678"
    environment:
      # 代理配置（写死）
      HTTP_PROXY: http://host.docker.internal:7890
      HTTPS_PROXY: http://host.docker.internal:7890
      NO_PROXY: localhost,127.0.0.1
    volumes:
      # 数据卷（写死路径，防止丢配置）
      - ./n8n_data:/home/node/.n8n
      - ./n8n_database:/database
    restart: unless-stopped


然后进入文件夹创建数据卷


1


docker compose up -d



启动
docker compose up -d
停止
docker compose down
查看日志
docker compose logs -f
更新
docker-compose pull
docker-compose down
docker-compose up -d

Tutor on 森林游乐场

Blog装修其一

折叠功能

callout 样式与折叠

普通折叠块

页面

页脚

建站计时&字数统计

页脚分割符

链接

外部链接显示图标

内部链接支持Obsidian 链接

macOS 风代码块

首页标签云显示数目

Neodb 短评卡片

Blog新增书影游页

展示样式

数据仓库

Hugo 仓库

本地测试

自动化工作流聚合信息初尝试（n8n,telegram）

快速启动

简单工作流的搭建

创建 Telegram Bot 并连接到 n8n

添加第一个信息源 - RSS（选做）

使用已有的工作流

进阶玩法-订阅多个 RSS

`Code` 节点（订阅管理）

`RSS Read` 节点

`Code` 节点（剪切）

`Edit Fields (Set)` 节点

`Code` 节点（精选最新）

`Remove Duplicates` 节点

`Send a text message`（Telegram）

工作流问题

本地代理设置