feat: 新增动态页

README.en.md

@@ -187,6 +187,7 @@ src/
 │   ├── backgroundWallpaper.ts    # Background wallpaper configuration
 │   ├── commentConfig.ts          # Comment system configuration
 │   ├── coverImageConfig.ts       # Cover image configuration
+│   ├── dynamicConfig.ts          # Moments page configuration
 │   ├── effectsConfig.ts          # Animation effects config (sakura, etc.)
 │   ├── expressiveCodeConfig.ts   # Code highlighting configuration
 │   ├── fontConfig.ts             # Font configuration
@@ -222,6 +223,24 @@ comment: true    # Enable comments
 ---
 ```
 
+## Moments
+
+Moment files are stored in `src/content/dynamic/`, with one Markdown file per moment. Create one with:
+
+```bash
+pnpm new-d The weather is lovely today
+```
+
+`pnpm new-dynamic <content>` is the equivalent full command. The filename and `published` value use the timezone configured in `src/config/siteConfig.ts`:
+
+```yaml
+---
+published: 2026-07-15 16:15:29
+---
+
+Moment content supports Markdown.
+```
+
 ## 📖 Markdown Extensions
 
 In addition to the default [GitHub Flavored Markdown](https://github.github.com/gfm/) support in Astro, there are some additional Markdown features:
@@ -243,6 +262,8 @@ All commands need to be executed in the project root directory:
 | `pnpm check`               | Check for errors in code                            |
 | `pnpm format`              | Format your code using Biome                        |
 | `pnpm new-post <filename>` | Create new article                                  |
+| `pnpm new-d <content>`     | Create a new moment                                 |
+| `pnpm new-dynamic <content>` | Create a new moment (full command)                |
 | `pnpm astro ...`           | Execute `astro add`, `astro check` and other commands |
 | `pnpm astro --help`        | Display Astro CLI help                              |
 

README.md

@@ -190,6 +190,7 @@ src/
 │   ├── backgroundWallpaper.ts    # 背景壁纸配置
 │   ├── commentConfig.ts          # 评论系统配置
 │   ├── coverImageConfig.ts       # 封面图配置
+│   ├── dynamicConfig.ts          # 动态页面配置
 │   ├── effectsConfig.ts          # 动画特效配置（樱花等）
 │   ├── expressiveCodeConfig.ts   # 代码高亮配置
 │   ├── fontConfig.ts             # 字体配置
@@ -224,6 +225,24 @@ comment: true    # 是否允许评论
 ---
 ```
 
+## 动态
+
+动态文件保存在 `src/content/dynamic/` 中，一个 Markdown 文件对应一条动态。可以使用快捷命令创建：
+
+```bash
+pnpm new-d 今天心情不错，出去吃了一顿火锅
+```
+
+`pnpm new-dynamic <content>` 也可以使用，和 `new-d` 完全等价。生成的文件名和 `published` 时间会使用 `src/config/siteConfig.ts` 中配置的时区：
+
+```yaml
+---
+published: 2026-07-15 16:15:29
+---
+
+动态内容可以使用 Markdown 语法。
+```
+
 ## 🧩 Markdown 扩展语法
 
 除了 Astro 默认支持的 [GitHub Flavored Markdown](https://github.github.com/gfm/) 之外，还包含了一些额外的 Markdown 功能：
@@ -245,6 +264,8 @@ comment: true    # 是否允许评论
 | `pnpm check`               | 检查代码中的错误                       |
 | `pnpm format`              | 使用 Biome 格式化您的代码              |
 | `pnpm new-post <filename>` | 创建新文章                             |
+| `pnpm new-d <content>`     | 创建一条动态                           |
+| `pnpm new-dynamic <content>` | 创建一条动态（完整命令）              |
 | `pnpm astro ...`           | 执行 `astro add`, `astro check` 等指令 |
 | `pnpm astro --help`        | 显示 Astro CLI 帮助                    |
 

docs/README.ja.md

@@ -188,6 +188,7 @@ src/
 │   ├── backgroundWallpaper.ts    # 背景壁紙設定
 │   ├── commentConfig.ts          # コメントシステム設定
 │   ├── coverImageConfig.ts       # カバー画像設定
+│   ├── dynamicConfig.ts          # モーメントページ設定
 │   ├── effectsConfig.ts          # アニメーションエフェクト設定（桜など）
 │   ├── expressiveCodeConfig.ts   # コードハイライト設定
 │   ├── fontConfig.ts             # フォント設定
@@ -222,6 +223,24 @@ comment: true    # コメントを有効化
 ---
 ```
 
+## モーメント
+
+モーメントは `src/content/dynamic/` に保存され、1つの Markdown ファイルが1件のモーメントに対応します。次のコマンドで作成できます：
+
+```bash
+pnpm new-d 今日はとても良い天気です
+```
+
+`pnpm new-dynamic <content>` も同じ機能の完全なコマンドです。ファイル名と `published` は `src/config/siteConfig.ts` で設定したタイムゾーンを使用します：
+
+```yaml
+---
+published: 2026-07-15 16:15:29
+---
+
+本文では Markdown を使用できます。
+```
+
 ## 🧩 Markdown拡張
 
 Astro がデフォルトで対応している[GitHub Flavored Markdown](https://github.github.com/gfm/)に加えて、いくつかの追加の Markdown 機能があります：
@@ -243,6 +262,8 @@ Astro がデフォルトで対応している[GitHub Flavored Markdown](https://
 | `pnpm check`               | コード内のエラーをチェック                      |
 | `pnpm format`              | Biome を使用してコードをフォーマット            |
 | `pnpm new-post <filename>` | 新しい記事を作成                                |
+| `pnpm new-d <content>`     | 新しいモーメントを作成                          |
+| `pnpm new-dynamic <content>` | 新しいモーメントを作成（完全なコマンド）      |
 | `pnpm astro ...`           | `astro add`、`astro check` などのコマンドを実行 |
 | `pnpm astro --help`        | Astro CLI ヘルプを表示                          |
 

docs/README.ru.md

@@ -189,6 +189,7 @@ src/
 │   ├── backgroundWallpaper.ts    # Конфигурация фоновых обоев
 │   ├── commentConfig.ts          # Конфигурация системы комментариев
 │   ├── coverImageConfig.ts       # Конфигурация обложек статей
+│   ├── dynamicConfig.ts          # Конфигурация страницы публикаций
 │   ├── effectsConfig.ts          # Конфигурация анимационных эффектов (сакура и др.)
 │   ├── expressiveCodeConfig.ts   # Конфигурация подсветки кода
 │   ├── fontConfig.ts             # Конфигурация шрифтов
@@ -224,6 +225,24 @@ comment: true    # Включить комментарии
 ---
 ```
 
+## Публикации
+
+Публикации хранятся в `src/content/dynamic/`: один Markdown-файл соответствует одной публикации. Создать публикацию можно командой:
+
+```bash
+pnpm new-d Сегодня прекрасная погода
+```
+
+`pnpm new-dynamic <content>` — эквивалентная полная команда. Имя файла и значение `published` используют часовой пояс из `src/config/siteConfig.ts`:
+
+```yaml
+---
+published: 2026-07-15 16:15:29
+---
+
+В содержимом можно использовать Markdown.
+```
+
 ## 📖 Расширения Markdown
 
 Помимо поддержки [GitHub Flavored Markdown](https://github.github.com/gfm/) по умолчанию в Astro, есть несколько дополнительных функций Markdown:
@@ -245,6 +264,8 @@ comment: true    # Включить комментарии
 | `pnpm check`               | Проверить код на наличие ошибок                           |
 | `pnpm format`              | Отформатировать код с помощью Biome                       |
 | `pnpm new-post <filename>` | Создать новую статью                                      |
+| `pnpm new-d <content>`     | Создать новую публикацию                                  |
+| `pnpm new-dynamic <content>` | Создать новую публикацию (полная команда)               |
 | `pnpm astro ...`           | Выполнить `astro add`, `astro check` и другие команды     |
 | `pnpm astro --help`        | Показать справку Astro CLI                                |
 

docs/README.zh-TW.md

@@ -191,6 +191,7 @@ src/
 │   ├── backgroundWallpaper.ts    # 背景桌布配置
 │   ├── commentConfig.ts          # 留言系統配置
 │   ├── coverImageConfig.ts       # 封面圖配置
+│   ├── dynamicConfig.ts          # 動態頁面配置
 │   ├── effectsConfig.ts          # 動畫特效配置（櫻花等）
 │   ├── expressiveCodeConfig.ts   # 程式碼高亮配置
 │   ├── fontConfig.ts             # 字型配置
@@ -225,6 +226,24 @@ pinned: false    # 置頂
 comment: true    # 是否允許留言
 ---
 ```
+## 動態
+
+動態檔案存放於 `src/content/dynamic/`，每個 Markdown 檔案代表一則動態。可使用快捷命令建立：
+
+```bash
+pnpm new-d 今天天氣真不錯
+```
+
+`pnpm new-dynamic <content>` 是功能相同的完整命令。檔名與 `published` 時間會使用 `src/config/siteConfig.ts` 中設定的時區：
+
+```yaml
+---
+published: 2026-07-15 16:15:29
+---
+
+動態內容支援 Markdown 語法。
+```
+
 ## 🧩 Markdown 擴充語法
 
 除了 Astro 預設支援的 [GitHub Flavored Markdown](https://github.github.com/gfm/) 之外，還包含了一些額外的 Markdown 功能：
@@ -245,6 +264,8 @@ comment: true    # 是否允許留言
 | `pnpm check`               | 檢查程式碼中的錯誤                     |
 | `pnpm format`              | 使用 Biome 格式化您的程式碼            |
 | `pnpm new-post <filename>` | 建立新文章                             |
+| `pnpm new-d <content>`     | 建立一則動態                           |
+| `pnpm new-dynamic <content>` | 建立一則動態（完整命令）             |
 | `pnpm astro ...`           | 執行 `astro add`, `astro check` 等指令 |
 | `pnpm astro --help`        | 顯示 Astro CLI 說明                    |
 

package.json

@@ -10,6 +10,8 @@
     "preview": "astro preview",
     "astro": "astro",
     "type-check": "tsc --noEmit --isolatedDeclarations",
+    "new-dynamic": "node scripts/new-dynamic.js",
+    "new-d": "node scripts/new-dynamic.js",
     "new-post": "node scripts/new-post.js",
     "format": "biome format --write ./src",
     "lint": "biome check --write ./src",

scripts/new-dynamic.js

@@ -0,0 +1,59 @@
+/* Create a timestamped dynamic markdown file from command-line text. */
+
+import fs from "node:fs";
+import path from "node:path";
+
+const content = process.argv.slice(2).join(" ").trim();
+
+if (!content) {
+	console.error(
+		"Error: No dynamic content provided\nUsage: pnpm new-dynamic <content>",
+	);
+	process.exit(1);
+}
+
+const now = new Date();
+const pad = (value) => String(value).padStart(2, "0");
+const siteConfigSource = fs.readFileSync(
+	path.resolve("src/config/siteConfig.ts"),
+	"utf8",
+);
+const timezone =
+	siteConfigSource.match(/^\s*timezone:\s*"([^"]+)"/m)?.[1] ||
+	"Asia/Shanghai";
+const dateParts = new Intl.DateTimeFormat("en-CA", {
+	timeZone: timezone,
+	year: "numeric",
+	month: "2-digit",
+	day: "2-digit",
+	hour: "2-digit",
+	minute: "2-digit",
+	second: "2-digit",
+	hourCycle: "h23",
+})
+	.formatToParts(now)
+	.reduce((parts, part) => {
+		if (part.type !== "literal") parts[part.type] = part.value;
+		return parts;
+	}, {});
+const year = dateParts.year;
+const month = dateParts.month;
+const day = dateParts.day;
+const hours = dateParts.hour;
+const minutes = dateParts.minute;
+const seconds = dateParts.second;
+const timestamp = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+const fileName = `${year}-${month}-${day}-${hours}${minutes}${seconds}.md`;
+const targetDir = path.resolve("src/content/dynamic");
+const fullPath = path.join(targetDir, fileName);
+
+fs.mkdirSync(targetDir, { recursive: true });
+
+if (fs.existsSync(fullPath)) {
+	console.error(`Error: File ${fullPath} already exists`);
+	process.exit(1);
+}
+
+fs.writeFileSync(fullPath, `---\npublished: ${timestamp}\n---\n\n${content}\n`);
+
+console.log(`Dynamic ${fullPath} created`);

src/components/README.md

@@ -1,5 +1,14 @@
 # 📦 Components 组件目录
 
+## 动态组件
+
+- `widget/Dynamic.astro`：显示最新动态的侧边栏组件。
+- `pages/dynamic/DynamicFeed.svelte`：负责动态 JSON 加载、搜索、年份筛选和分页。
+- `pages/dynamic/DynamicGallery.astro`：动态图片网格、轮播和灯箱。
+- `pages/dynamic/DynamicInlineComments.astro`：单条动态的按需评论区。
+- `pages/dynamic/DynamicItem.astro`：动态条目的服务端渲染组件。
+- `pages/dynamic/DynamicItemTemplate.astro`：动态条目的客户端渲染模板。
+
 Firefly 项目中所有可复用组件的集中管理。组件按照功能和职责进行分类，提供清晰的架构和易于维护的代码组织。
 
 ## 📁 目录结构

src/components/comment/Artalk.astro

@@ -26,6 +26,8 @@ const config = {
     <!-- 脚本逻辑 -->
     <script type="module" is:inline define:vars={{config}}>
         import Artalk from 'https://unpkg.com/artalk/dist/Artalk.mjs';
+        const requestedPath = new URLSearchParams(window.location.search).get("path");
+        if (requestedPath) config.pageKey = requestedPath;
 
         // 初始化 Artalk
         const artalk = Artalk.init(config);
@@ -47,4 +49,4 @@ const config = {
             attributeFilter: ['class'],
         });
     </script>
-</div>
+</div>

src/components/comment/Disqus.astro

@@ -18,6 +18,11 @@ const shortname = commentConfig.disqus.shortname;
 <div id="disqus_thread"></div>
 
 <script is:inline define:vars={{ shortname, identifier, url, title }}>
+  const requestedPath = new URLSearchParams(window.location.search).get("path")
+  if (requestedPath) {
+    identifier = requestedPath.replace(/^\/+|\/+$/g, "")
+    url = new URL(requestedPath, window.location.origin).href
+  }
   // @ts-ignore
   window.disqus_config = function () {
     this.page.url = url
@@ -34,4 +39,4 @@ const shortname = commentConfig.disqus.shortname;
   })()
 </script>
 <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-<style is:global></style>
+<style is:global></style>

src/components/comment/Giscus.astro

@@ -10,8 +10,6 @@ const lightTheme = "light";
 const darkTheme = "dark";
 ---
 
-<script is:inline type="module" src="https://esm.sh/giscus"></script>
-
 <!-- 
   Giscus 官方Web Component用法，兼容Astro静态输出，无需import包，无需NPM依赖！
   参考：https://giscus.app/ 详情配置说明
@@ -33,10 +31,18 @@ const darkTheme = "dark";
 />
 
 <script is:inline define:vars={{ lightTheme, darkTheme }}>
+  const requestedPath = new URLSearchParams(window.location.search).get("path");
+  const widget = document.querySelector("giscus-widget");
+  if (requestedPath && widget) {
+    widget.setAttribute("mapping", "specific");
+    widget.setAttribute("term", requestedPath);
+  }
+
+  import("https://esm.sh/giscus");
+
   function updateGiscusTheme() {
     const isDark = document.documentElement.classList.contains('dark');
     const theme = isDark ? darkTheme : lightTheme;
-    const widget = document.querySelector('giscus-widget');
     if (widget) {
       widget.setAttribute('theme', theme);
     }

src/components/comment/Twikoo.astro

@@ -24,6 +24,8 @@ const config = {
 <script is:inline define:vars={{ config }}>
   // 获取当前页面路径
   function getCurrentPath() {
+    const requestedPath = new URLSearchParams(window.location.search).get("path");
+    if (requestedPath) return requestedPath;
     const pathname = window.location.pathname;
     return pathname.endsWith("/") && pathname.length > 1
       ? pathname.slice(0, -1)

src/components/comment/Waline.astro

@@ -20,6 +20,8 @@ const config = {
   <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
   <script type="module" is:inline define:vars={{ config }}>
     import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
+    const requestedPath = new URLSearchParams(window.location.search).get("path");
+    if (requestedPath) config.path = requestedPath;
     init(config);
   </script>
-</div>
+</div>