Add Astro Obsidian notes blog with board layout.
Scaffold a static notes blog with posts/notes collections, wikilinks, vault sync, interactive home gate, and multi-column content-filled layouts across list and article pages.
This commit is contained in:
secret-deus
+28
@@ -0,0 +1,28 @@
|
|||||||
|
# build output
|
||||||
|
dist/
|
||||||
|
# generated types
|
||||||
|
.astro/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# OS / IDE
|
||||||
|
.DS_Store
|
||||||
|
.idea/
|
||||||
|
.vscode/
|
||||||
|
|
||||||
|
# local browser / screenshot artifacts
|
||||||
|
.playwright-mcp/
|
||||||
|
home-*.png
|
||||||
|
posts-board.png
|
||||||
|
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
# Notebook —— Obsidian 笔记博客（Astro）
|
||||||
|
|
||||||
|
用 **Obsidian** 写作，用 **Astro** 生成静态站点的个人笔记博客。
|
||||||
|
|
||||||
|
- 文章（时间线）+ 笔记（常青 / 双链）
|
||||||
|
- 支持 `[[wikilink]]`、标签、RSS、sitemap
|
||||||
|
- 一键从 Vault 同步公开笔记
|
||||||
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
浏览器打开终端提示的地址（一般是 `http://localhost:4321`）。
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build # 产出到 dist/
|
||||||
|
npm run preview # 预览构建结果
|
||||||
|
```
|
||||||
|
|
||||||
|
## 内容放哪
|
||||||
|
|
||||||
|
| 路径 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| `src/content/posts/` | 正式文章（需 `title` + `pubDate`） |
|
||||||
|
| `src/content/notes/` | 笔记（可从 Obsidian 同步） |
|
||||||
|
| `public/assets/` | 图片等静态资源 |
|
||||||
|
| `src/consts.ts` | 站名、作者、默认 Vault 路径 |
|
||||||
|
|
||||||
|
### 文章示例 frontmatter
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
title: 标题
|
||||||
|
description: 摘要
|
||||||
|
pubDate: 2026-07-11
|
||||||
|
tags: [博客]
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
### 笔记示例 frontmatter
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
title: 标题
|
||||||
|
tags: [笔记]
|
||||||
|
publish: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
`publish: false` 或 `draft: true` 不会上线。
|
||||||
|
|
||||||
|
## 从 Obsidian 同步
|
||||||
|
|
||||||
|
默认库路径：`C:/Users/admin/Documents/Obsidian Vault`
|
||||||
|
（可在 `src/consts.ts` 或环境变量 `OBSIDIAN_VAULT` 修改）
|
||||||
|
|
||||||
|
```powershell
|
||||||
|
npm run sync:vault
|
||||||
|
# 或
|
||||||
|
$env:OBSIDIAN_VAULT="D:\path\to\vault"
|
||||||
|
npm run sync:vault
|
||||||
|
# 只预览不同步
|
||||||
|
npm run sync:vault -- --dry-run
|
||||||
|
```
|
||||||
|
|
||||||
|
会跳过 `.obsidian`、`private`、`templates` 等目录，以及 `publish: false` 的笔记。
|
||||||
|
|
||||||
|
## 双链
|
||||||
|
|
||||||
|
笔记正文中的 `[[写作约定]]` 会链到 `/notes/写作约定/`。
|
||||||
|
文件名与双链目标保持一致即可（中文文件名可用）。
|
||||||
|
|
||||||
|
## 自定义
|
||||||
|
|
||||||
|
- **站名 / 文案**：`src/consts.ts`
|
||||||
|
- **配色 / 字体**：`src/styles/global.css`
|
||||||
|
- **导航**：`src/components/Header.astro`
|
||||||
|
- **布局**：`src/layouts/`
|
||||||
|
- **Obsidian 语法插件**：`src/plugins/remark-obsidian.mjs`
|
||||||
|
|
||||||
|
Astro 本身可继续加 React/Vue、Tailwind、部署适配器等，自由度很高。
|
||||||
|
|
||||||
|
## 部署
|
||||||
|
|
||||||
|
构建产物在 `dist/`，可丢到：
|
||||||
|
|
||||||
|
- GitHub Pages / Cloudflare Pages / Netlify / 任意静态托管
|
||||||
|
- 改 `astro.config.mjs` 里的 `site` 为你的域名
|
||||||
|
|
||||||
|
## 命令
|
||||||
|
|
||||||
|
| 命令 | 作用 |
|
||||||
|
|------|------|
|
||||||
|
| `npm run dev` | 本地开发 |
|
||||||
|
| `npm run build` | 生产构建 |
|
||||||
|
| `npm run preview` | 预览构建 |
|
||||||
|
| `npm run sync:vault` | 从 Obsidian 同步笔记 |
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
// @ts-check
|
||||||
|
|
||||||
|
import mdx from '@astrojs/mdx';
|
||||||
|
import sitemap from '@astrojs/sitemap';
|
||||||
|
import { unified } from '@astrojs/markdown-remark';
|
||||||
|
import { defineConfig, fontProviders } from 'astro/config';
|
||||||
|
import { remarkObsidian } from './src/plugins/remark-obsidian.mjs';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
// Astro 7 默认 Sätteri 不跑 remark 插件；笔记博客需要 [[wikilink]]，改用 unified
|
||||||
|
export default defineConfig({
|
||||||
|
site: 'https://example.com',
|
||||||
|
integrations: [mdx(), sitemap()],
|
||||||
|
markdown: {
|
||||||
|
processor: unified({
|
||||||
|
remarkPlugins: [remarkObsidian],
|
||||||
|
shikiConfig: {
|
||||||
|
themes: {
|
||||||
|
light: 'github-light',
|
||||||
|
dark: 'github-dark',
|
||||||
|
},
|
||||||
|
defaultColor: false,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
fonts: [
|
||||||
|
{
|
||||||
|
provider: fontProviders.local(),
|
||||||
|
name: 'Atkinson',
|
||||||
|
cssVariable: '--font-atkinson',
|
||||||
|
fallbacks: [
|
||||||
|
'"Segoe UI"',
|
||||||
|
'"PingFang SC"',
|
||||||
|
'"Hiragino Sans GB"',
|
||||||
|
'"Microsoft YaHei"',
|
||||||
|
'sans-serif',
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
variants: [
|
||||||
|
{
|
||||||
|
src: ['./src/assets/fonts/atkinson-regular.woff'],
|
||||||
|
weight: 400,
|
||||||
|
style: 'normal',
|
||||||
|
display: 'swap',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: ['./src/assets/fonts/atkinson-bold.woff'],
|
||||||
|
weight: 700,
|
||||||
|
style: 'normal',
|
||||||
|
display: 'swap',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
Generated
+6299
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "notebook",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=22.12.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro",
|
||||||
|
"sync:vault": "node scripts/sync-vault.mjs"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/mdx": "^7.0.2",
|
||||||
|
"@astrojs/rss": "^4.0.19",
|
||||||
|
"@astrojs/sitemap": "^3.7.3",
|
||||||
|
"astro": "^7.0.7",
|
||||||
|
"sharp": "^0.35.0",
|
||||||
|
"unist-util-visit": "^5.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 655 B |
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||||
|
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||||
|
<style>
|
||||||
|
path { fill: #000; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
path { fill: #FFF; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 749 B |
@@ -0,0 +1,154 @@
|
|||||||
|
/**
|
||||||
|
* 从 Obsidian Vault 同步公开笔记到 src/content/notes
|
||||||
|
*
|
||||||
|
* 用法:
|
||||||
|
* npm run sync:vault
|
||||||
|
* OBSIDIAN_VAULT="D:/notes" npm run sync:vault
|
||||||
|
* node scripts/sync-vault.mjs --dry-run
|
||||||
|
*/
|
||||||
|
import fs from 'node:fs';
|
||||||
|
import path from 'node:path';
|
||||||
|
import { fileURLToPath } from 'node:url';
|
||||||
|
|
||||||
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||||
|
const root = path.resolve(__dirname, '..');
|
||||||
|
const dryRun = process.argv.includes('--dry-run');
|
||||||
|
|
||||||
|
const DEFAULT_VAULT = 'C:/Users/admin/Documents/Obsidian Vault';
|
||||||
|
const vault = process.env.OBSIDIAN_VAULT || DEFAULT_VAULT;
|
||||||
|
const notesOut = path.join(root, 'src/content/notes');
|
||||||
|
const assetsOut = path.join(root, 'public/assets');
|
||||||
|
|
||||||
|
const IGNORE_DIR = new Set([
|
||||||
|
'.obsidian',
|
||||||
|
'.git',
|
||||||
|
'.trash',
|
||||||
|
'node_modules',
|
||||||
|
'private',
|
||||||
|
'templates',
|
||||||
|
'template',
|
||||||
|
'attachments-private',
|
||||||
|
]);
|
||||||
|
|
||||||
|
const IMAGE_EXT = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.pdf']);
|
||||||
|
|
||||||
|
function ensureDir(dir) {
|
||||||
|
if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
function walk(dir, base = dir, files = []) {
|
||||||
|
if (!fs.existsSync(dir)) return files;
|
||||||
|
for (const name of fs.readdirSync(dir)) {
|
||||||
|
if (name.startsWith('.') && name !== '.') continue;
|
||||||
|
const full = path.join(dir, name);
|
||||||
|
const rel = path.relative(base, full);
|
||||||
|
const stat = fs.statSync(full);
|
||||||
|
if (stat.isDirectory()) {
|
||||||
|
if (IGNORE_DIR.has(name.toLowerCase())) continue;
|
||||||
|
walk(full, base, files);
|
||||||
|
} else {
|
||||||
|
files.push({ full, rel });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return files;
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseFrontmatter(raw) {
|
||||||
|
if (!raw.startsWith('---')) return { data: {}, body: raw };
|
||||||
|
const end = raw.indexOf('\n---', 3);
|
||||||
|
if (end === -1) return { data: {}, body: raw };
|
||||||
|
const fm = raw.slice(3, end).trim();
|
||||||
|
const body = raw.slice(end + 4).replace(/^\r?\n/, '');
|
||||||
|
const data = {};
|
||||||
|
for (const line of fm.split(/\r?\n/)) {
|
||||||
|
const m = line.match(/^([A-Za-z0-9_-]+):\s*(.*)$/);
|
||||||
|
if (!m) continue;
|
||||||
|
const key = m[1];
|
||||||
|
let val = m[2].trim();
|
||||||
|
if (val === 'true') val = true;
|
||||||
|
else if (val === 'false') val = false;
|
||||||
|
else if (
|
||||||
|
(val.startsWith('"') && val.endsWith('"')) ||
|
||||||
|
(val.startsWith("'") && val.endsWith("'"))
|
||||||
|
) {
|
||||||
|
val = val.slice(1, -1);
|
||||||
|
}
|
||||||
|
data[key] = val;
|
||||||
|
}
|
||||||
|
return { data, body, fm };
|
||||||
|
}
|
||||||
|
|
||||||
|
function shouldPublish(data) {
|
||||||
|
if (data.publish === false) return false;
|
||||||
|
if (data.draft === true) return false;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ensureTitle(raw, filename) {
|
||||||
|
const { data, body, fm } = parseFrontmatter(raw);
|
||||||
|
if (data.title) return raw;
|
||||||
|
const title = path.basename(filename, path.extname(filename));
|
||||||
|
if (raw.startsWith('---') && fm !== undefined) {
|
||||||
|
return `---\n${fm}\ntitle: ${JSON.stringify(title)}\n---\n${body}`;
|
||||||
|
}
|
||||||
|
return `---\ntitle: ${JSON.stringify(title)}\npublish: true\n---\n\n${raw}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function main() {
|
||||||
|
console.log(`Vault: ${vault}`);
|
||||||
|
console.log(`Out: ${notesOut}`);
|
||||||
|
if (!fs.existsSync(vault)) {
|
||||||
|
console.error('Vault 路径不存在。请设置 OBSIDIAN_VAULT 或修改 scripts/sync-vault.mjs / src/consts.ts');
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
ensureDir(notesOut);
|
||||||
|
ensureDir(assetsOut);
|
||||||
|
|
||||||
|
const files = walk(vault);
|
||||||
|
let mdCount = 0;
|
||||||
|
let assetCount = 0;
|
||||||
|
let skipCount = 0;
|
||||||
|
|
||||||
|
for (const { full, rel } of files) {
|
||||||
|
const ext = path.extname(full).toLowerCase();
|
||||||
|
const relPosix = rel.split(path.sep).join('/');
|
||||||
|
|
||||||
|
if (IMAGE_EXT.has(ext)) {
|
||||||
|
const dest = path.join(assetsOut, path.basename(full));
|
||||||
|
if (!dryRun) fs.copyFileSync(full, dest);
|
||||||
|
assetCount++;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ext !== '.md' && ext !== '.mdx') continue;
|
||||||
|
|
||||||
|
const raw = fs.readFileSync(full, 'utf8');
|
||||||
|
const { data } = parseFrontmatter(raw);
|
||||||
|
if (!shouldPublish(data)) {
|
||||||
|
skipCount++;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 输出扁平或保留相对路径：保留相对路径更利于子目录笔记
|
||||||
|
const destRel = relPosix.replace(/\.mdx?$/i, '') + path.extname(full);
|
||||||
|
const dest = path.join(notesOut, destRel);
|
||||||
|
const content = ensureTitle(raw, full);
|
||||||
|
|
||||||
|
if (dryRun) {
|
||||||
|
console.log(` + ${destRel}`);
|
||||||
|
} else {
|
||||||
|
ensureDir(path.dirname(dest));
|
||||||
|
fs.writeFileSync(dest, content, 'utf8');
|
||||||
|
}
|
||||||
|
mdCount++;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
dryRun
|
||||||
|
? `[dry-run] 将同步 ${mdCount} 篇笔记, ${assetCount} 个资源, 跳过 ${skipCount}`
|
||||||
|
: `完成：同步 ${mdCount} 篇笔记, ${assetCount} 个资源, 跳过 ${skipCount}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
main();
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
import '../styles/global.css';
|
||||||
|
import '../styles/board.css';
|
||||||
|
import type { ImageMetadata } from 'astro';
|
||||||
|
import { Font } from 'astro:assets';
|
||||||
|
import { SITE_TITLE } from '../consts';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
image?: ImageMetadata;
|
||||||
|
}
|
||||||
|
|
||||||
|
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||||
|
const { title, description, image } = Astro.props;
|
||||||
|
const fullTitle =
|
||||||
|
title === SITE_TITLE || title.endsWith(` · ${SITE_TITLE}`)
|
||||||
|
? title
|
||||||
|
: `${title} · ${SITE_TITLE}`;
|
||||||
|
---
|
||||||
|
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||||
|
<link
|
||||||
|
rel="alternate"
|
||||||
|
type="application/rss+xml"
|
||||||
|
title={SITE_TITLE}
|
||||||
|
href={new URL('rss.xml', Astro.site)}
|
||||||
|
/>
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
|
||||||
|
<Font cssVariable="--font-atkinson" preload />
|
||||||
|
|
||||||
|
<link rel="canonical" href={canonicalURL} />
|
||||||
|
|
||||||
|
<title>{fullTitle}</title>
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content={Astro.url} />
|
||||||
|
<meta property="og:title" content={fullTitle} />
|
||||||
|
<meta property="og:description" content={description} />
|
||||||
|
{image && <meta property="og:image" content={new URL(image.src, Astro.url)} />}
|
||||||
|
|
||||||
|
<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
|
||||||
|
<meta name="twitter:title" content={fullTitle} />
|
||||||
|
<meta name="twitter:description" content={description} />
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
---
|
||||||
|
import type { NoteEntry, PostEntry } from '../lib/content';
|
||||||
|
import { entryHref, entryTitle } from '../lib/content';
|
||||||
|
import FormattedDate from './FormattedDate.astro';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
entries: Array<PostEntry | NoteEntry>;
|
||||||
|
empty?: string;
|
||||||
|
showKind?: boolean;
|
||||||
|
clamp?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
entries,
|
||||||
|
empty = '暂无内容',
|
||||||
|
showKind = false,
|
||||||
|
clamp,
|
||||||
|
} = Astro.props;
|
||||||
|
|
||||||
|
const list = typeof clamp === 'number' ? entries.slice(0, clamp) : entries;
|
||||||
|
---
|
||||||
|
|
||||||
|
{
|
||||||
|
list.length === 0 ? (
|
||||||
|
<p class="empty-hint">{empty}</p>
|
||||||
|
) : (
|
||||||
|
<ul class="dense-list">
|
||||||
|
{list.map((entry) => {
|
||||||
|
const date =
|
||||||
|
entry.collection === 'posts'
|
||||||
|
? entry.data.pubDate
|
||||||
|
: (entry.data.updatedDate ?? entry.data.pubDate);
|
||||||
|
const desc = entry.data.description;
|
||||||
|
const tags = entry.data.tags ?? [];
|
||||||
|
const kind = entry.collection === 'posts' ? '文章' : '笔记';
|
||||||
|
return (
|
||||||
|
<li>
|
||||||
|
<a class="dense-item" href={entryHref(entry)}>
|
||||||
|
<div class="dense-main">
|
||||||
|
<span class="dense-title">
|
||||||
|
{showKind && (
|
||||||
|
<span
|
||||||
|
class:list={['kind-dot', { note: entry.collection === 'notes' }]}
|
||||||
|
title={kind}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{entryTitle(entry)}
|
||||||
|
</span>
|
||||||
|
{desc && <span class="dense-desc">{desc}</span>}
|
||||||
|
</div>
|
||||||
|
<div class="dense-meta">
|
||||||
|
{date && <FormattedDate date={date} />}
|
||||||
|
{tags[0] && <span class="dense-tag">#{tags[0]}</span>}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
import type { NoteEntry, PostEntry } from '../lib/content';
|
||||||
|
import { entryHref, entryTitle } from '../lib/content';
|
||||||
|
import FormattedDate from './FormattedDate.astro';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
entry: PostEntry | NoteEntry;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { entry } = Astro.props;
|
||||||
|
const title = entryTitle(entry);
|
||||||
|
const href = entryHref(entry);
|
||||||
|
const description =
|
||||||
|
entry.data.description ||
|
||||||
|
(entry.collection === 'notes' ? '常青笔记' : '');
|
||||||
|
const date =
|
||||||
|
entry.collection === 'posts'
|
||||||
|
? entry.data.pubDate
|
||||||
|
: (entry.data.updatedDate ?? entry.data.pubDate);
|
||||||
|
const kind = entry.collection === 'posts' ? '文章' : '笔记';
|
||||||
|
const tags = entry.data.tags ?? [];
|
||||||
|
---
|
||||||
|
|
||||||
|
<a class="card" href={href}>
|
||||||
|
<div class="top meta">
|
||||||
|
<span>{kind}</span>
|
||||||
|
{date && <FormattedDate date={date} />}
|
||||||
|
</div>
|
||||||
|
<h3>{title}</h3>
|
||||||
|
{description && <p>{description}</p>}
|
||||||
|
{
|
||||||
|
tags.length > 0 && (
|
||||||
|
<div class="tag-row">
|
||||||
|
{tags.slice(0, 4).map((tag) => (
|
||||||
|
<span class="tag">#{tag}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 0.45rem;
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
---
|
||||||
|
import { SITE_AUTHOR, SITE_TITLE } from '../consts';
|
||||||
|
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
---
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
© {year}
|
||||||
|
{SITE_AUTHOR} · {SITE_TITLE}
|
||||||
|
</p>
|
||||||
|
<p class="meta">用 Obsidian 写笔记，用 Astro 建站。</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid rgb(var(--line));
|
||||||
|
padding: 1.75rem 1rem 2.75rem;
|
||||||
|
text-align: center;
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
font-size: 0.85em;
|
||||||
|
animation: fade-up var(--dur-slow) var(--ease-out) 120ms both;
|
||||||
|
}
|
||||||
|
footer p {
|
||||||
|
margin: 0.2rem 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
date: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { date } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<time datetime={date.toISOString()}>
|
||||||
|
{
|
||||||
|
date.toLocaleDateString('zh-CN', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</time>
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
---
|
||||||
|
import { SITE_TITLE } from '../consts';
|
||||||
|
import HeaderLink from './HeaderLink.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<a class="brand" href="/">{SITE_TITLE}</a>
|
||||||
|
<div class="links">
|
||||||
|
<HeaderLink href="/">首页</HeaderLink>
|
||||||
|
<HeaderLink href="/posts/">文章</HeaderLink>
|
||||||
|
<HeaderLink href="/notes/">笔记</HeaderLink>
|
||||||
|
<HeaderLink href="/tags/">标签</HeaderLink>
|
||||||
|
<HeaderLink href="/about/">关于</HeaderLink>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 20;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
background: rgba(var(--surface), 0.86);
|
||||||
|
border-bottom: 1px solid rgb(var(--line));
|
||||||
|
transition: box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
width: var(--wide);
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--page-pad-x);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
min-height: 3.1rem;
|
||||||
|
}
|
||||||
|
.brand {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.98em;
|
||||||
|
color: rgb(var(--ink));
|
||||||
|
text-decoration: none;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
transition:
|
||||||
|
color var(--dur-fast) var(--ease-out),
|
||||||
|
transform var(--dur-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
.brand:hover {
|
||||||
|
color: var(--accent);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.links :global(a) {
|
||||||
|
position: relative;
|
||||||
|
padding: 0.4rem 0.55rem;
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
transition:
|
||||||
|
color var(--dur-fast) var(--ease-out),
|
||||||
|
background var(--dur-fast) var(--ease-out),
|
||||||
|
transform var(--dur-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
.links :global(a::after) {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0.55rem;
|
||||||
|
right: 0.55rem;
|
||||||
|
bottom: 0.2rem;
|
||||||
|
height: 1.5px;
|
||||||
|
border-radius: 1px;
|
||||||
|
background: var(--accent);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: left center;
|
||||||
|
transition: transform var(--dur) var(--ease-out);
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
.links :global(a:hover) {
|
||||||
|
color: rgb(var(--ink));
|
||||||
|
background: rgb(var(--code-bg));
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
.links :global(a:hover::after),
|
||||||
|
.links :global(a.active::after) {
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
.links :global(a.active) {
|
||||||
|
color: var(--accent-dark);
|
||||||
|
font-weight: 700;
|
||||||
|
background: var(--accent-soft);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
---
|
||||||
|
import type { HTMLAttributes } from 'astro/types';
|
||||||
|
|
||||||
|
type Props = HTMLAttributes<'a'>;
|
||||||
|
|
||||||
|
const { href, class: className, ...props } = Astro.props;
|
||||||
|
const path = Astro.url.pathname;
|
||||||
|
const hrefStr = typeof href === 'string' ? href : '';
|
||||||
|
const isHome = hrefStr === '/';
|
||||||
|
const isActive = isHome
|
||||||
|
? path === '/' || path === ''
|
||||||
|
: path === hrefStr || path === hrefStr.replace(/\/$/, '') || path.startsWith(hrefStr);
|
||||||
|
---
|
||||||
|
|
||||||
|
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
||||||
|
<slot />
|
||||||
|
</a>
|
||||||
@@ -0,0 +1,164 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* 全站通用侧栏：快捷入口 + 统计 + 标签 + 另一类内容列表
|
||||||
|
*/
|
||||||
|
import type { NoteEntry, PostEntry } from '../lib/content';
|
||||||
|
import { getPublishedNotes, getPublishedPosts, getTagMap } from '../lib/content';
|
||||||
|
import DenseEntryList from './DenseEntryList.astro';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
/** 当前频道，用于高亮快捷入口 */
|
||||||
|
active?: 'home' | 'posts' | 'notes' | 'tags' | 'about';
|
||||||
|
/** 侧栏「相关列表」标题 */
|
||||||
|
listTitle?: string;
|
||||||
|
listHref?: string;
|
||||||
|
listEntries?: Array<PostEntry | NoteEntry>;
|
||||||
|
listEmpty?: string;
|
||||||
|
showKind?: boolean;
|
||||||
|
/** 额外说明文案 */
|
||||||
|
tips?: string[];
|
||||||
|
tipsTitle?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
active,
|
||||||
|
listTitle = '最近更新',
|
||||||
|
listHref,
|
||||||
|
listEntries,
|
||||||
|
listEmpty = '暂无内容',
|
||||||
|
showKind = true,
|
||||||
|
tips,
|
||||||
|
tipsTitle = '说明',
|
||||||
|
} = Astro.props;
|
||||||
|
|
||||||
|
const [posts, notes, tagMap] = await Promise.all([
|
||||||
|
getPublishedPosts(),
|
||||||
|
getPublishedNotes(),
|
||||||
|
getTagMap(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const tags = [...tagMap.entries()]
|
||||||
|
.sort((a, b) => b[1].length - a[1].length)
|
||||||
|
.slice(0, 10);
|
||||||
|
|
||||||
|
const fallbackList =
|
||||||
|
listEntries ??
|
||||||
|
(active === 'posts'
|
||||||
|
? notes.slice(0, 8)
|
||||||
|
: active === 'notes'
|
||||||
|
? posts.slice(0, 8)
|
||||||
|
: [...posts, ...notes]
|
||||||
|
.sort((a, b) => {
|
||||||
|
const da =
|
||||||
|
a.collection === 'posts'
|
||||||
|
? a.data.pubDate
|
||||||
|
: (a.data.updatedDate ?? a.data.pubDate ?? new Date(0));
|
||||||
|
const db =
|
||||||
|
b.collection === 'posts'
|
||||||
|
? b.data.pubDate
|
||||||
|
: (b.data.updatedDate ?? b.data.pubDate ?? new Date(0));
|
||||||
|
return db.valueOf() - da.valueOf();
|
||||||
|
})
|
||||||
|
.slice(0, 8));
|
||||||
|
|
||||||
|
const resolvedListTitle =
|
||||||
|
listTitle ||
|
||||||
|
(active === 'posts' ? '最近笔记' : active === 'notes' ? '最近文章' : '最近更新');
|
||||||
|
|
||||||
|
const resolvedListHref =
|
||||||
|
listHref || (active === 'posts' ? '/notes/' : active === 'notes' ? '/posts/' : '/');
|
||||||
|
---
|
||||||
|
|
||||||
|
<aside class="board-side">
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>快捷入口</h2>
|
||||||
|
</div>
|
||||||
|
<nav class="quick-nav" aria-label="站内导航">
|
||||||
|
<a href="/" class:list={[{ active: active === 'home' }]}>
|
||||||
|
<span>首页</span><em>⌂</em>
|
||||||
|
</a>
|
||||||
|
<a href="/posts/" class:list={[{ active: active === 'posts' }]}>
|
||||||
|
<span>文章</span><em>{posts.length}</em>
|
||||||
|
</a>
|
||||||
|
<a href="/notes/" class:list={[{ active: active === 'notes' }]}>
|
||||||
|
<span>笔记</span><em>{notes.length}</em>
|
||||||
|
</a>
|
||||||
|
<a href="/tags/" class:list={[{ active: active === 'tags' }]}>
|
||||||
|
<span>标签</span><em>{tagMap.size}</em>
|
||||||
|
</a>
|
||||||
|
<a href="/about/" class:list={[{ active: active === 'about' }]}>
|
||||||
|
<span>关于</span><em>→</em>
|
||||||
|
</a>
|
||||||
|
<a href="/rss.xml">
|
||||||
|
<span>RSS</span><em>xml</em>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>内容概况</h2>
|
||||||
|
</div>
|
||||||
|
<div class="metric-grid">
|
||||||
|
<div class="metric">
|
||||||
|
<strong>{posts.length}</strong>
|
||||||
|
<span>文章</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric">
|
||||||
|
<strong>{notes.length}</strong>
|
||||||
|
<span>笔记</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric">
|
||||||
|
<strong>{tagMap.size}</strong>
|
||||||
|
<span>标签</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric">
|
||||||
|
<strong>{posts.length + notes.length}</strong>
|
||||||
|
<span>合计</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>{resolvedListTitle}</h2>
|
||||||
|
{resolvedListHref && <a href={resolvedListHref}>全部 →</a>}
|
||||||
|
</div>
|
||||||
|
<DenseEntryList entries={fallbackList} empty={listEmpty} showKind={showKind} />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{
|
||||||
|
tags.length > 0 && (
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>热门标签</h2>
|
||||||
|
<a href="/tags/">全部 →</a>
|
||||||
|
</div>
|
||||||
|
<div class="tag-cloud">
|
||||||
|
{tags.map(([tag, items]) => (
|
||||||
|
<a class="tag" href={`/tags/${encodeURIComponent(tag)}/`}>
|
||||||
|
#{tag}
|
||||||
|
<span class="count">{items.length}</span>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
tips && tips.length > 0 && (
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>{tipsTitle}</h2>
|
||||||
|
</div>
|
||||||
|
<ul class="bullet-list">
|
||||||
|
{tips.map((t) => (
|
||||||
|
<li set:html={t} />
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</aside>
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
/** 站点全局配置 —— 改这里就能换站名、域名、作者信息 */
|
||||||
|
export const SITE_TITLE = 'Notebook';
|
||||||
|
export const SITE_DESCRIPTION = '用 Obsidian 写作，用 Astro 发布的个人笔记博客。';
|
||||||
|
export const SITE_AUTHOR = '你的名字';
|
||||||
|
|
||||||
|
/** 部署域名，构建 RSS / sitemap 会用到（不要带 https://） */
|
||||||
|
export const SITE_URL = 'https://example.com';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obsidian 库路径（给 scripts/sync-vault.mjs 用）
|
||||||
|
* 也可用环境变量 OBSIDIAN_VAULT 覆盖
|
||||||
|
*/
|
||||||
|
export const DEFAULT_VAULT_PATH = 'C:/Users/admin/Documents/Obsidian Vault';
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import { defineCollection } from 'astro:content';
|
||||||
|
import { glob } from 'astro/loaders';
|
||||||
|
import { z } from 'astro/zod';
|
||||||
|
|
||||||
|
const tags = z.array(z.string()).default([]);
|
||||||
|
|
||||||
|
/** 正式博文：偏时间线、可带封面 */
|
||||||
|
const posts = defineCollection({
|
||||||
|
loader: glob({ base: './src/content/posts', pattern: '**/*.{md,mdx}' }),
|
||||||
|
schema: ({ image }) =>
|
||||||
|
z.object({
|
||||||
|
title: z.string(),
|
||||||
|
description: z.string().default(''),
|
||||||
|
pubDate: z.coerce.date(),
|
||||||
|
updatedDate: z.coerce.date().optional(),
|
||||||
|
heroImage: z.optional(image()),
|
||||||
|
tags,
|
||||||
|
draft: z.boolean().default(false),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 常青笔记 / Obsidian 笔记
|
||||||
|
* frontmatter 尽量宽松，方便直接从 Vault 拷过来
|
||||||
|
*/
|
||||||
|
const notes = defineCollection({
|
||||||
|
loader: glob({ base: './src/content/notes', pattern: '**/*.{md,mdx}' }),
|
||||||
|
schema: z.object({
|
||||||
|
title: z.string().optional(),
|
||||||
|
description: z.string().optional(),
|
||||||
|
pubDate: z.coerce.date().optional(),
|
||||||
|
updatedDate: z.coerce.date().optional(),
|
||||||
|
tags,
|
||||||
|
/** Obsidian / 同步脚本可用 publish: false 排除私密笔记 */
|
||||||
|
publish: z.boolean().default(true),
|
||||||
|
draft: z.boolean().default(false),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const collections = { posts, notes };
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
---
|
||||||
|
title: Obsidian 与本站
|
||||||
|
description: Vault 如何接到这个 Astro 项目。
|
||||||
|
tags:
|
||||||
|
- Obsidian
|
||||||
|
- 工作流
|
||||||
|
publish: true
|
||||||
|
pubDate: 2026-07-11
|
||||||
|
---
|
||||||
|
|
||||||
|
## 默认库路径
|
||||||
|
|
||||||
|
见 `src/consts.ts` 里的 `DEFAULT_VAULT_PATH`，当前指向：
|
||||||
|
|
||||||
|
`C:/Users/admin/Documents/Obsidian Vault`
|
||||||
|
|
||||||
|
也可用环境变量覆盖：
|
||||||
|
|
||||||
|
```powershell
|
||||||
|
$env:OBSIDIAN_VAULT="D:\path\to\vault"
|
||||||
|
npm run sync:vault
|
||||||
|
```
|
||||||
|
|
||||||
|
## 同步规则（sync-vault）
|
||||||
|
|
||||||
|
脚本会：
|
||||||
|
|
||||||
|
1. 扫描 Vault 下的 `.md`
|
||||||
|
2. 跳过 `.obsidian`、以 `.` 开头的目录、`private` / `templates` 等
|
||||||
|
3. 若 frontmatter 含 `publish: false` 或 `draft: true` 则跳过
|
||||||
|
4. 拷贝到 `src/content/notes/`，并尽量补全缺失的 `title`
|
||||||
|
|
||||||
|
## 图片
|
||||||
|
|
||||||
|
把图片放到 Vault 的可同步位置后，同步脚本会把常见图片拷到 `public/assets/`。
|
||||||
|
|
||||||
|
正文里可用：
|
||||||
|
|
||||||
|
```md
|
||||||
|
![[photo.png]]
|
||||||
|
```
|
||||||
|
|
||||||
|
或标准 Markdown：
|
||||||
|
|
||||||
|
```md
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## 相关
|
||||||
|
|
||||||
|
- [[写作约定]]
|
||||||
|
- [示例文章](/posts/hello-notebook/)
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
---
|
||||||
|
title: 写作约定
|
||||||
|
description: 本站笔记与文章的约定，方便长期维护。
|
||||||
|
tags:
|
||||||
|
- 元笔记
|
||||||
|
- 开始
|
||||||
|
publish: true
|
||||||
|
pubDate: 2026-07-11
|
||||||
|
---
|
||||||
|
|
||||||
|
## Frontmatter
|
||||||
|
|
||||||
|
最少只需要：
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
title: 标题
|
||||||
|
publish: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
常用字段：
|
||||||
|
|
||||||
|
- `title`：标题（可省略，默认用文件名）
|
||||||
|
- `description`：摘要
|
||||||
|
- `tags`：标签数组
|
||||||
|
- `pubDate` / `updatedDate`：日期
|
||||||
|
- `draft: true`：草稿，不构建
|
||||||
|
- `publish: false`：不同步/不公开
|
||||||
|
|
||||||
|
## 双链
|
||||||
|
|
||||||
|
Obsidian 风格：
|
||||||
|
|
||||||
|
- `[[写作约定]]` → 链到 `/notes/写作约定/`
|
||||||
|
- `[[写作约定|点这里]]` → 自定义显示文字
|
||||||
|
|
||||||
|
指向文章时，建议用标准 Markdown：
|
||||||
|
|
||||||
|
`[欢迎文](/posts/hello-notebook/)`
|
||||||
|
|
||||||
|
## 私密内容
|
||||||
|
|
||||||
|
私密笔记二选一：
|
||||||
|
|
||||||
|
1. frontmatter 写 `publish: false`
|
||||||
|
2. 放在同步脚本忽略的目录（如 `private/`）
|
||||||
+249
@@ -0,0 +1,249 @@
|
|||||||
|
---
|
||||||
|
title: "在 RTX 5090 32GB 上用 Docker Compose + llama.cpp 运行 MiroThinker-v1.5-30B Q5_K_M GGUF 的部署与调优"
|
||||||
|
publish: true
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
- 硬件平台：
|
||||||
|
- 显卡：5090 32GB
|
||||||
|
- CPU：intel
|
||||||
|
- 系统：ZimaOS xxx
|
||||||
|
|
||||||
|
## 一、前置准备
|
||||||
|
### 1、基础镜像准备
|
||||||
|
|
||||||
|
```Dockerfile
|
||||||
|
FROM pytorch/pytorch:2.8.0-cuda12.8-cudnn9-devel
|
||||||
|
|
||||||
|
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||||
|
git cmake build-essential ca-certificates \
|
||||||
|
libcurl4-openssl-dev \
|
||||||
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
|
WORKDIR /opt
|
||||||
|
|
||||||
|
# build llama.cpp
|
||||||
|
RUN git clone --depth=1 https://github.com/ggml-org/llama.cpp.git \
|
||||||
|
&& cd llama.cpp \
|
||||||
|
&& cmake -B build -DGGML_CUDA=ON -DCMAKE_CUDA_ARCHITECTURES=120 \
|
||||||
|
&& cmake --build build --config Release -j \
|
||||||
|
&& install -m 0755 /opt/llama.cpp/build/bin/llama-server /usr/local/bin/llama-server \
|
||||||
|
&& install -m 0755 /opt/llama.cpp/build/bin/llama-cli /usr/local/bin/llama-cli
|
||||||
|
|
||||||
|
# 约定：API 端口（你要 7070 就保留）
|
||||||
|
EXPOSE 7070
|
||||||
|
|
||||||
|
ENV MODEL_DIR=/models
|
||||||
|
ENV HOST=0.0.0.0
|
||||||
|
ENV PORT=7070
|
||||||
|
ENV CTX=8192
|
||||||
|
ENV NGL=99
|
||||||
|
ENV MODEL_FILE="MiroThinker-v1.5-30B.Q4_K_M.gguf"
|
||||||
|
|
||||||
|
# 用 CMD 明确执行，避免 ENTRYPOINT 乱拼
|
||||||
|
CMD ["bash", "-lc", "\
|
||||||
|
set -euo pipefail; \
|
||||||
|
echo '[env]'; echo \"MODEL_DIR=${MODEL_DIR}\"; echo \"MODEL_FILE=${MODEL_FILE}\"; echo \"HOST=${HOST}\"; echo \"PORT=${PORT}\"; echo \"CTX=${CTX}\"; echo \"NGL=${NGL}\"; \
|
||||||
|
echo '[models]'; ls -lah \"${MODEL_DIR}\" || true; \
|
||||||
|
MODEL_PATH=\"${MODEL_DIR}/${MODEL_FILE}\"; \
|
||||||
|
if [ -z \"${MODEL_FILE}\" ]; then echo 'ERROR: MODEL_FILE is empty'; exit 2; fi; \
|
||||||
|
if [ ! -f \"${MODEL_PATH}\" ]; then echo \"ERROR: model not found: ${MODEL_PATH}\"; exit 2; fi; \
|
||||||
|
echo \"[start] llama-server -m ${MODEL_PATH}\"; \
|
||||||
|
exec llama-server -m \"${MODEL_PATH}\" --host \"${HOST}\" --port \"${PORT}\" -c \"${CTX}\" -ngl \"${NGL}\" \
|
||||||
|
"]
|
||||||
|
```
|
||||||
|
|
||||||
|
将上面的文件存储为Dockerfile，放到xxx路径下
|
||||||
|
然后
|
||||||
|
```bash
|
||||||
|
docker build -t llama-cpp:cuda12.8 .
|
||||||
|
```
|
||||||
|
### 2、模型下载
|
||||||
|
|
||||||
|
依据本例中的硬件平台，选择MiroThinker-v1.5-30B Q5_K_M GGUF作为本次部署的模型，
|
||||||
|
#### 方法：huggingface-cli（推荐）
|
||||||
|
|
||||||
|
##### 1️⃣ 安装工具
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pip install -U huggingface_hub
|
||||||
|
```
|
||||||
|
|
||||||
|
##### 2️⃣ 登录（可选，但建议）
|
||||||
|
|
||||||
|
```bash
|
||||||
|
huggingface-cli login
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
##### 3️⃣ 下载模型（示例）
|
||||||
|
|
||||||
|
👉 假设模型在类似 repo（示例）：
|
||||||
|
|
||||||
|
bartowski/MiroThinker-30B-GGUF
|
||||||
|
|
||||||
|
执行：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
huggingface-cli download bartowski/MiroThinker-30B-GGUF \
|
||||||
|
MiroThinker-30B.Q5_K_M.gguf \
|
||||||
|
--local-dir ./models
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3、docker compose文件准备
|
||||||
|
```yaml
|
||||||
|
services:
|
||||||
|
miro-api:
|
||||||
|
image: llama-cpp:cuda12.8
|
||||||
|
container_name: miro-api
|
||||||
|
restart: unless-stopped
|
||||||
|
|
||||||
|
# 端口：llama-server 默认 8080
|
||||||
|
ports:
|
||||||
|
- "7070:7070"
|
||||||
|
|
||||||
|
# 模型不进镜像：只挂载（只读）
|
||||||
|
volumes:
|
||||||
|
- ./models:/models:ro
|
||||||
|
|
||||||
|
environment:
|
||||||
|
# 必填：模型文件名（位于 /models 下）
|
||||||
|
MODEL_FILE: "MiroThinker-v1.5-30B.Q4_K_M.gguf"
|
||||||
|
|
||||||
|
# 可选：server 监听
|
||||||
|
#HOST: "0.0.0.0"
|
||||||
|
#PORT: "8080"
|
||||||
|
|
||||||
|
# 可选：推理参数（按需改）
|
||||||
|
#CTX: "8192"
|
||||||
|
#NGL: "99"
|
||||||
|
|
||||||
|
# Docker Compose v2 支持该写法来申请 GPU
|
||||||
|
# 如果你的环境不支持，请看下面“GPU 兼容写法”
|
||||||
|
deploy:
|
||||||
|
resources:
|
||||||
|
reservations:
|
||||||
|
devices:
|
||||||
|
- driver: nvidia
|
||||||
|
count: all
|
||||||
|
capabilities: ["gpu"]
|
||||||
|
|
||||||
|
# （可选）共享内存，避免某些场景下内存不足
|
||||||
|
shm_size: "8gb"
|
||||||
|
```
|
||||||
|
|
||||||
|
将上面文件写入xxxxxxx路径后
|
||||||
|
|
||||||
|
执行
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker compose up
|
||||||
|
```
|
||||||
|
|
||||||
|
## 4、调用测试
|
||||||
|
|
||||||
|
终端运行
|
||||||
|
|
||||||
|
```
|
||||||
|
curl http://ip:7070/v1/chat/completions \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-d '{
|
||||||
|
"model": "mirothinker",
|
||||||
|
"messages": [
|
||||||
|
{"role": "user", "content": "用简单的话解释量子力学"}
|
||||||
|
],
|
||||||
|
"temperature": 0.7
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
看到回复即算调用成功
|
||||||
|
|
||||||
|
## 5、使用miroflow
|
||||||
|
|
||||||
|
还是以上述平台为例，我们使用mirothinker模型，运行一个简单的miroflow demo
|
||||||
|
|
||||||
|
首先
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/MiroMindAI/MiroFlow
|
||||||
|
cd MiroFlow
|
||||||
|
|
||||||
|
pip install uv
|
||||||
|
uv sync
|
||||||
|
```
|
||||||
|
### 2、接入本地llama.cpp
|
||||||
|
|
||||||
|
修改config
|
||||||
|
|
||||||
|
config/agent_quickstart.yaml
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
defaults:
|
||||||
|
- benchmark: example_dataset
|
||||||
|
- override hydra/job_logging: none
|
||||||
|
- _self_
|
||||||
|
|
||||||
|
# 避免 benchmark 里 openai_api_key 是 ???（虽然 trace_single_task 一般用不到，但写上更稳）
|
||||||
|
benchmark:
|
||||||
|
openai_api_key: "dummy"
|
||||||
|
|
||||||
|
main_agent:
|
||||||
|
prompt_class: MainAgentPromptBoxedAnswer
|
||||||
|
|
||||||
|
llm:
|
||||||
|
provider_class: "GPTOpenAIClient"
|
||||||
|
model_name: "MiroThinker-v1.5-30B.Q5_K_M.gguf" # 需与 /v1/models 返回的 id 一致
|
||||||
|
async_client: true
|
||||||
|
|
||||||
|
temperature: 0.2
|
||||||
|
top_p: 0.95
|
||||||
|
min_p: 0.0
|
||||||
|
top_k: -1
|
||||||
|
max_tokens: 512
|
||||||
|
|
||||||
|
openai_api_key: "dummy"
|
||||||
|
openai_base_url: "http://localhost:7070/v1"
|
||||||
|
|
||||||
|
keep_tool_result: -1
|
||||||
|
oai_tool_thinking: false
|
||||||
|
|
||||||
|
# 关键：先把工具全部关掉（避免 SERPER_API_KEY / JINA_API_KEY / E2B_API_KEY 等依赖）
|
||||||
|
tool_config: []
|
||||||
|
|
||||||
|
max_turns: 1
|
||||||
|
max_tool_calls_per_turn: 0
|
||||||
|
|
||||||
|
input_process:
|
||||||
|
hint_generation: false
|
||||||
|
hint_llm_base_url: "http://localhost:7070/v1"
|
||||||
|
|
||||||
|
output_process:
|
||||||
|
final_answer_extraction: false
|
||||||
|
final_answer_llm_base_url: "http://localhost:7070/v1"
|
||||||
|
|
||||||
|
# 这两个字段你当前版本的 orchestrator 会读，必须保留
|
||||||
|
openai_api_key: "dummy"
|
||||||
|
add_message_id: false
|
||||||
|
keep_tool_result: -1
|
||||||
|
chinese_context: "false"
|
||||||
|
|
||||||
|
sub_agents: null
|
||||||
|
|
||||||
|
output_dir: logs/
|
||||||
|
data_dir: data/
|
||||||
|
```
|
||||||
|
|
||||||
|
```bash
|
||||||
|
uv run main.py trace \
|
||||||
|
--config_file_name=agent_quickstart \
|
||||||
|
--task="请分析以下Python代码并指出bug：
|
||||||
|
def add(a,b):
|
||||||
|
return a-b"
|
||||||
|
```
|
||||||
|
预期结果如下：
|
||||||
|
```bash
|
||||||
|
root@ZimaOS:~/github.com/MiroFlow ➜ # uv run main.py trace --config_file_name=demo --task="分析下面的python代码: def add(a,b): return a-b"
|
||||||
|
|
||||||
|
The function subtracts b from a (misnamed as add), boxed_answer = The function subtracts b from a (misnamed as add)
|
||||||
|
```
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
title: "欢迎"
|
||||||
|
publish: true
|
||||||
|
---
|
||||||
|
|
||||||
|
这是你的新*仓库*。
|
||||||
|
|
||||||
|
写点笔记，[[创建链接]]，或者试一试[导入器](https://help.obsidian.md/Plugins/Importer)插件!
|
||||||
|
|
||||||
|
当你准备好了，就将该笔记文件删除，使这个仓库为你所用。
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
---
|
||||||
|
title: 欢迎来到我的笔记博客
|
||||||
|
description: 用 Astro 搭的 Obsidian 笔记博客骨架，说明内容怎么组织。
|
||||||
|
pubDate: 2026-07-11
|
||||||
|
tags:
|
||||||
|
- 博客
|
||||||
|
- 开始
|
||||||
|
---
|
||||||
|
|
||||||
|
这是一篇**正式文章**示例。
|
||||||
|
|
||||||
|
## 两套内容
|
||||||
|
|
||||||
|
| 类型 | 目录 | 适合 |
|
||||||
|
|------|------|------|
|
||||||
|
| 文章 | `src/content/posts/` | 有日期的长文、教程、周记 |
|
||||||
|
| 笔记 | `src/content/notes/` | 常青笔记、卡片、概念页 |
|
||||||
|
|
||||||
|
## 写作流程
|
||||||
|
|
||||||
|
1. 在 Obsidian 里写
|
||||||
|
2. 公开笔记加 frontmatter（见下方）
|
||||||
|
3. `npm run sync:vault` 同步
|
||||||
|
4. `npm run dev` 预览
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
title: 笔记标题
|
||||||
|
tags: [技术, 笔记]
|
||||||
|
publish: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
笔记之间可以用双链互相引用，例如：[[写作约定]]、[[Obsidian 与本站]]。
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
---
|
||||||
|
import BaseHead from '../components/BaseHead.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
import Header from '../components/Header.astro';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
/** 宽内容区（列表/看板页） */
|
||||||
|
wide?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, description = '', wide = false } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<BaseHead title={title} description={description} />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
<main class:list={[{ wide, boarded: wide }]}>
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main.boarded {
|
||||||
|
width: min(1180px, 100%);
|
||||||
|
max-width: 100%;
|
||||||
|
padding-left: var(--page-pad-x);
|
||||||
|
padding-right: var(--page-pad-x);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,222 @@
|
|||||||
|
---
|
||||||
|
import type { ImageMetadata } from 'astro';
|
||||||
|
import { Image } from 'astro:assets';
|
||||||
|
import type { NoteEntry, PostEntry } from '../lib/content';
|
||||||
|
import BaseLayout from './BaseLayout.astro';
|
||||||
|
import FormattedDate from '../components/FormattedDate.astro';
|
||||||
|
import DenseEntryList from '../components/DenseEntryList.astro';
|
||||||
|
import { getPublishedNotes, getPublishedPosts, getTagMap } from '../lib/content';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
pubDate?: Date;
|
||||||
|
updatedDate?: Date;
|
||||||
|
heroImage?: ImageMetadata;
|
||||||
|
tags?: string[];
|
||||||
|
kind?: 'post' | 'note';
|
||||||
|
/** 当前条目 id，用于排除自身 */
|
||||||
|
currentId?: string;
|
||||||
|
related?: Array<PostEntry | NoteEntry>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
title,
|
||||||
|
description = '',
|
||||||
|
pubDate,
|
||||||
|
updatedDate,
|
||||||
|
heroImage,
|
||||||
|
tags = [],
|
||||||
|
kind = 'post',
|
||||||
|
currentId,
|
||||||
|
related,
|
||||||
|
} = Astro.props;
|
||||||
|
|
||||||
|
const [posts, notes, tagMap] = await Promise.all([
|
||||||
|
getPublishedPosts(),
|
||||||
|
getPublishedNotes(),
|
||||||
|
getTagMap(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const pool = kind === 'post' ? posts : notes;
|
||||||
|
const others = pool.filter((e) => e.id !== currentId);
|
||||||
|
|
||||||
|
const relatedResolved =
|
||||||
|
related ??
|
||||||
|
(() => {
|
||||||
|
if (!tags.length) return others.slice(0, 6);
|
||||||
|
const scored = others
|
||||||
|
.map((e) => {
|
||||||
|
const et = new Set(e.data.tags ?? []);
|
||||||
|
const score = tags.reduce((n, t) => n + (et.has(t) ? 1 : 0), 0);
|
||||||
|
return { e, score };
|
||||||
|
})
|
||||||
|
.filter((x) => x.score > 0)
|
||||||
|
.sort((a, b) => b.score - a.score)
|
||||||
|
.map((x) => x.e);
|
||||||
|
return (scored.length ? scored : others).slice(0, 6);
|
||||||
|
})();
|
||||||
|
|
||||||
|
const otherKindList = (kind === 'post' ? notes : posts).slice(0, 6);
|
||||||
|
const topTags = [...tagMap.entries()]
|
||||||
|
.sort((a, b) => b[1].length - a[1].length)
|
||||||
|
.slice(0, 8);
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title={title} description={description} wide>
|
||||||
|
<div class="prose-board">
|
||||||
|
<article class="article">
|
||||||
|
{
|
||||||
|
heroImage && (
|
||||||
|
<div class="hero-image">
|
||||||
|
<Image width={1020} height={510} src={heroImage} alt="" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<header class="article-head">
|
||||||
|
<p class="kind meta">{kind === 'post' ? '文章' : '笔记'}</p>
|
||||||
|
<h1>{title}</h1>
|
||||||
|
{
|
||||||
|
(pubDate || updatedDate) && (
|
||||||
|
<p class="meta">
|
||||||
|
{pubDate && <FormattedDate date={pubDate} />}
|
||||||
|
{updatedDate && (
|
||||||
|
<>
|
||||||
|
{pubDate ? ' · ' : ''}
|
||||||
|
更新于 <FormattedDate date={updatedDate} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
tags.length > 0 && (
|
||||||
|
<div class="tag-row">
|
||||||
|
{tags.map((tag) => (
|
||||||
|
<a class="tag" href={`/tags/${encodeURIComponent(tag)}/`}>
|
||||||
|
#{tag}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</header>
|
||||||
|
<div class="prose">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<aside class="board-side">
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>本页</h2>
|
||||||
|
</div>
|
||||||
|
<ul class="bullet-list">
|
||||||
|
<li>类型：{kind === 'post' ? '文章' : '笔记'}</li>
|
||||||
|
{pubDate && (
|
||||||
|
<li>
|
||||||
|
发布：
|
||||||
|
<FormattedDate date={pubDate} />
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
{updatedDate && (
|
||||||
|
<li>
|
||||||
|
更新：
|
||||||
|
<FormattedDate date={updatedDate} />
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
<li>
|
||||||
|
返回
|
||||||
|
<a href={kind === 'post' ? '/posts/' : '/notes/'}>
|
||||||
|
{kind === 'post' ? '文章列表' : '笔记列表'}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{
|
||||||
|
tags.length > 0 && (
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>标签</h2>
|
||||||
|
</div>
|
||||||
|
<div class="tag-cloud">
|
||||||
|
{tags.map((tag) => (
|
||||||
|
<a class="tag" href={`/tags/${encodeURIComponent(tag)}/`}>
|
||||||
|
#{tag}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>{kind === 'post' ? '相关文章' : '相关笔记'}</h2>
|
||||||
|
<a href={kind === 'post' ? '/posts/' : '/notes/'}>全部 →</a>
|
||||||
|
</div>
|
||||||
|
<DenseEntryList entries={relatedResolved} empty="暂无相关内容" showKind={false} />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>{kind === 'post' ? '最近笔记' : '最近文章'}</h2>
|
||||||
|
<a href={kind === 'post' ? '/notes/' : '/posts/'}>全部 →</a>
|
||||||
|
</div>
|
||||||
|
<DenseEntryList entries={otherKindList} empty="暂无" showKind={false} />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{
|
||||||
|
topTags.length > 0 && (
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>热门标签</h2>
|
||||||
|
<a href="/tags/">全部 →</a>
|
||||||
|
</div>
|
||||||
|
<div class="tag-cloud">
|
||||||
|
{topTags.map(([tag, items]) => (
|
||||||
|
<a class="tag" href={`/tags/${encodeURIComponent(tag)}/`}>
|
||||||
|
#{tag}
|
||||||
|
<span class="count">{items.length}</span>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.article-head {
|
||||||
|
margin-bottom: 1.4rem;
|
||||||
|
padding-bottom: 0.95rem;
|
||||||
|
border-bottom: 1px solid rgb(var(--line));
|
||||||
|
animation: fade-up var(--dur-slow) var(--ease-out) both;
|
||||||
|
}
|
||||||
|
.article-head h1 {
|
||||||
|
margin-bottom: 0.35em;
|
||||||
|
}
|
||||||
|
.kind {
|
||||||
|
margin: 0 0 0.4rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
.hero-image {
|
||||||
|
margin: 0 0 1.1rem;
|
||||||
|
animation: soft-scale var(--dur-slow) var(--ease-out) both;
|
||||||
|
}
|
||||||
|
.hero-image :global(img) {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.prose {
|
||||||
|
animation: fade-up var(--dur-slow) var(--ease-out) 80ms both;
|
||||||
|
}
|
||||||
|
.prose :global(> *:first-child) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
import { getCollection, type CollectionEntry } from 'astro:content';
|
||||||
|
|
||||||
|
export type PostEntry = CollectionEntry<'posts'>;
|
||||||
|
export type NoteEntry = CollectionEntry<'notes'>;
|
||||||
|
|
||||||
|
/** 已发布、非草稿的文章（按日期新→旧） */
|
||||||
|
export async function getPublishedPosts(): Promise<PostEntry[]> {
|
||||||
|
const posts = await getCollection('posts', ({ data }) => !data.draft);
|
||||||
|
return posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 已发布、非草稿的笔记 */
|
||||||
|
export async function getPublishedNotes(): Promise<NoteEntry[]> {
|
||||||
|
const notes = await getCollection('notes', ({ data }) => !data.draft && data.publish !== false);
|
||||||
|
return notes.sort((a, b) => {
|
||||||
|
const da = a.data.updatedDate ?? a.data.pubDate ?? new Date(0);
|
||||||
|
const db = b.data.updatedDate ?? b.data.pubDate ?? new Date(0);
|
||||||
|
return db.valueOf() - da.valueOf();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 汇总标签 → 条目列表 */
|
||||||
|
export async function getTagMap(): Promise<Map<string, Array<PostEntry | NoteEntry>>> {
|
||||||
|
const [posts, notes] = await Promise.all([getPublishedPosts(), getPublishedNotes()]);
|
||||||
|
const map = new Map<string, Array<PostEntry | NoteEntry>>();
|
||||||
|
|
||||||
|
for (const entry of [...posts, ...notes]) {
|
||||||
|
for (const tag of entry.data.tags ?? []) {
|
||||||
|
const list = map.get(tag) ?? [];
|
||||||
|
list.push(entry);
|
||||||
|
map.set(tag, list);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return map;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function entryHref(entry: PostEntry | NoteEntry): string {
|
||||||
|
if (entry.collection === 'posts') return `/posts/${entry.id}/`;
|
||||||
|
return `/notes/${entry.id}/`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function entryTitle(entry: PostEntry | NoteEntry): string {
|
||||||
|
if (entry.data.title) return entry.data.title;
|
||||||
|
const base = entry.id.split('/').pop() ?? entry.id;
|
||||||
|
return base;
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
/** 把笔记标题 / 文件名收成 URL 友好的 id（保留中文） */
|
||||||
|
export function toNoteSlug(input: string): string {
|
||||||
|
return input
|
||||||
|
.trim()
|
||||||
|
.replace(/\\/g, '/')
|
||||||
|
.replace(/\.mdx?$/i, '')
|
||||||
|
.replace(/^\/+|\/+$/g, '')
|
||||||
|
.replace(/\s+/g, '-')
|
||||||
|
.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 从 content collection id 得到展示标题 */
|
||||||
|
export function titleFromId(id: string): string {
|
||||||
|
const base = id.split('/').pop() ?? id;
|
||||||
|
return base.replace(/-/g, ' ');
|
||||||
|
}
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
import SiteAside from '../components/SiteAside.astro';
|
||||||
|
import { SITE_AUTHOR, SITE_DESCRIPTION, SITE_TITLE } from '../consts';
|
||||||
|
import { getPublishedNotes, getPublishedPosts } from '../lib/content';
|
||||||
|
|
||||||
|
const posts = await getPublishedPosts();
|
||||||
|
const notes = await getPublishedNotes();
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title={`关于 · ${SITE_TITLE}`} description={SITE_DESCRIPTION} wide>
|
||||||
|
<div class="page-board">
|
||||||
|
<div class="board-main">
|
||||||
|
<section class="panel page-title-block">
|
||||||
|
<h1>关于</h1>
|
||||||
|
<p class="lede">{SITE_DESCRIPTION}</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>这个站</h2>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
这里是 <strong>{SITE_AUTHOR}</strong> 的笔记博客：在 <strong>Obsidian</strong> 里写，用
|
||||||
|
<strong>Astro</strong> 静态生成后发布。
|
||||||
|
</p>
|
||||||
|
<p class="meta">
|
||||||
|
当前已发布：文章 {posts.length} · 笔记 {notes.length}
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>内容结构</h2>
|
||||||
|
</div>
|
||||||
|
<ul class="bullet-list">
|
||||||
|
<li>
|
||||||
|
<strong>文章</strong>（<code>src/content/posts/</code>）：有日期的长文、教程
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>笔记</strong>（<code>src/content/notes/</code>）：常青笔记，支持
|
||||||
|
<code>[[双链]]</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>标签</strong>：frontmatter 里的 <code>tags</code> 自动聚合
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>和 Obsidian 怎么配合</h2>
|
||||||
|
</div>
|
||||||
|
<ol class="bullet-list numbered">
|
||||||
|
<li>在库里正常写 Markdown</li>
|
||||||
|
<li>需要上线的笔记加上 <code>publish: true</code></li>
|
||||||
|
<li>运行 <code>npm run sync:vault</code> 同步到本站</li>
|
||||||
|
<li><code>npm run dev</code> 预览，<code>npm run build</code> 构建</li>
|
||||||
|
</ol>
|
||||||
|
<p class="meta" style="margin-top: 0.75rem">
|
||||||
|
站名、作者、库路径在 <code>src/consts.ts</code> 修改。
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SiteAside
|
||||||
|
active="about"
|
||||||
|
listTitle="最近内容"
|
||||||
|
listHref="/"
|
||||||
|
showKind={true}
|
||||||
|
tipsTitle="技术栈"
|
||||||
|
tips={['Astro 静态站点', 'Obsidian wikilink 插件', 'Git 友好 Markdown']}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.numbered {
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
.board-main p {
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,31 @@
|
|||||||
|
---
|
||||||
|
import { type CollectionEntry, render } from 'astro:content';
|
||||||
|
import ProseLayout from '../../layouts/ProseLayout.astro';
|
||||||
|
import { getPublishedNotes } from '../../lib/content';
|
||||||
|
import { titleFromId } from '../../lib/slug';
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const notes = await getPublishedNotes();
|
||||||
|
return notes.map((note) => ({
|
||||||
|
params: { slug: note.id },
|
||||||
|
props: note,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = CollectionEntry<'notes'>;
|
||||||
|
const note = Astro.props;
|
||||||
|
const { Content } = await render(note);
|
||||||
|
const title = note.data.title || titleFromId(note.id);
|
||||||
|
---
|
||||||
|
|
||||||
|
<ProseLayout
|
||||||
|
title={title}
|
||||||
|
description={note.data.description || title}
|
||||||
|
pubDate={note.data.pubDate}
|
||||||
|
updatedDate={note.data.updatedDate}
|
||||||
|
tags={note.data.tags}
|
||||||
|
kind="note"
|
||||||
|
currentId={note.id}
|
||||||
|
>
|
||||||
|
<Content />
|
||||||
|
</ProseLayout>
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
|
import DenseEntryList from '../../components/DenseEntryList.astro';
|
||||||
|
import SiteAside from '../../components/SiteAside.astro';
|
||||||
|
import { SITE_TITLE } from '../../consts';
|
||||||
|
import { getPublishedNotes, getPublishedPosts } from '../../lib/content';
|
||||||
|
|
||||||
|
const notes = await getPublishedNotes();
|
||||||
|
const posts = await getPublishedPosts();
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title={`笔记 · ${SITE_TITLE}`} description="来自 Obsidian 的常青笔记" wide>
|
||||||
|
<div class="page-board">
|
||||||
|
<div class="board-main">
|
||||||
|
<section class="panel page-title-block">
|
||||||
|
<h1>笔记</h1>
|
||||||
|
<p class="lede">
|
||||||
|
常青笔记，支持 <code>[[双链]]</code>。共 <strong>{notes.length}</strong> 篇。可用
|
||||||
|
<code>npm run sync:vault</code> 从 Obsidian 同步。
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>全部笔记</h2>
|
||||||
|
<span class="meta">{notes.length} 篇</span>
|
||||||
|
</div>
|
||||||
|
<DenseEntryList
|
||||||
|
entries={notes}
|
||||||
|
empty="还没有笔记。运行 npm run sync:vault 或手动添加 Markdown。"
|
||||||
|
showKind={false}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SiteAside
|
||||||
|
active="notes"
|
||||||
|
listTitle="最近文章"
|
||||||
|
listHref="/posts/"
|
||||||
|
listEntries={posts}
|
||||||
|
listEmpty="暂无文章"
|
||||||
|
showKind={false}
|
||||||
|
tipsTitle="同步提示"
|
||||||
|
tips={[
|
||||||
|
'公开笔记加 <code>publish: true</code>',
|
||||||
|
'私密笔记 <code>publish: false</code> 或放 private/',
|
||||||
|
'文件名尽量与 <code>[[双链]]</code> 目标一致',
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</BaseLayout>
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
---
|
||||||
|
import { type CollectionEntry, render } from 'astro:content';
|
||||||
|
import ProseLayout from '../../layouts/ProseLayout.astro';
|
||||||
|
import { getPublishedPosts } from '../../lib/content';
|
||||||
|
import { titleFromId } from '../../lib/slug';
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const posts = await getPublishedPosts();
|
||||||
|
return posts.map((post) => ({
|
||||||
|
params: { slug: post.id },
|
||||||
|
props: post,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = CollectionEntry<'posts'>;
|
||||||
|
const post = Astro.props;
|
||||||
|
const { Content } = await render(post);
|
||||||
|
const title = post.data.title || titleFromId(post.id);
|
||||||
|
---
|
||||||
|
|
||||||
|
<ProseLayout
|
||||||
|
title={title}
|
||||||
|
description={post.data.description}
|
||||||
|
pubDate={post.data.pubDate}
|
||||||
|
updatedDate={post.data.updatedDate}
|
||||||
|
heroImage={post.data.heroImage}
|
||||||
|
tags={post.data.tags}
|
||||||
|
kind="post"
|
||||||
|
currentId={post.id}
|
||||||
|
>
|
||||||
|
<Content />
|
||||||
|
</ProseLayout>
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
|
import DenseEntryList from '../../components/DenseEntryList.astro';
|
||||||
|
import SiteAside from '../../components/SiteAside.astro';
|
||||||
|
import { SITE_TITLE } from '../../consts';
|
||||||
|
import { getPublishedNotes, getPublishedPosts } from '../../lib/content';
|
||||||
|
|
||||||
|
const posts = await getPublishedPosts();
|
||||||
|
const notes = await getPublishedNotes();
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title={`文章 · ${SITE_TITLE}`} description="按时间排序的博文列表" wide>
|
||||||
|
<div class="page-board">
|
||||||
|
<div class="board-main">
|
||||||
|
<section class="panel page-title-block">
|
||||||
|
<h1>文章</h1>
|
||||||
|
<p class="lede">
|
||||||
|
正式长文与教程，按发布日期排序。共 <strong>{posts.length}</strong> 篇。
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>全部文章</h2>
|
||||||
|
<span class="meta">{posts.length} 篇</span>
|
||||||
|
</div>
|
||||||
|
<DenseEntryList
|
||||||
|
entries={posts}
|
||||||
|
empty="还没有文章。在 src/content/posts/ 新建 Markdown 即可。"
|
||||||
|
showKind={false}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SiteAside
|
||||||
|
active="posts"
|
||||||
|
listTitle="最近笔记"
|
||||||
|
listHref="/notes/"
|
||||||
|
listEntries={notes}
|
||||||
|
listEmpty="暂无笔记"
|
||||||
|
showKind={false}
|
||||||
|
tipsTitle="写作提示"
|
||||||
|
tips={[
|
||||||
|
'文章适合完整叙述、教程与周记',
|
||||||
|
'frontmatter 需要 <code>title</code> 与 <code>pubDate</code>',
|
||||||
|
'草稿用 <code>draft: true</code> 隐藏',
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</BaseLayout>
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
import rss from '@astrojs/rss';
|
||||||
|
import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
|
||||||
|
|
||||||
|
export async function GET(context) {
|
||||||
|
const posts = (await getCollection('posts', ({ data }) => !data.draft)).sort(
|
||||||
|
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
||||||
|
);
|
||||||
|
|
||||||
|
return rss({
|
||||||
|
title: SITE_TITLE,
|
||||||
|
description: SITE_DESCRIPTION,
|
||||||
|
site: context.site,
|
||||||
|
items: posts.map((post) => ({
|
||||||
|
title: post.data.title,
|
||||||
|
description: post.data.description,
|
||||||
|
pubDate: post.data.pubDate,
|
||||||
|
link: `/posts/${post.id}/`,
|
||||||
|
})),
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
|
import DenseEntryList from '../../components/DenseEntryList.astro';
|
||||||
|
import SiteAside from '../../components/SiteAside.astro';
|
||||||
|
import { SITE_TITLE } from '../../consts';
|
||||||
|
import { getPublishedNotes, getPublishedPosts, getTagMap } from '../../lib/content';
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const tagMap = await getTagMap();
|
||||||
|
return [...tagMap.entries()].map(([tag, entries]) => ({
|
||||||
|
params: { tag },
|
||||||
|
props: { tag, entries },
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
const { tag, entries } = Astro.props;
|
||||||
|
const posts = await getPublishedPosts();
|
||||||
|
const notes = await getPublishedNotes();
|
||||||
|
const otherTags = [...(await getTagMap()).entries()]
|
||||||
|
.filter(([t]) => t !== tag)
|
||||||
|
.sort((a, b) => b[1].length - a[1].length)
|
||||||
|
.slice(0, 8);
|
||||||
|
|
||||||
|
const postsInTag = entries.filter((e) => e.collection === 'posts');
|
||||||
|
const notesInTag = entries.filter((e) => e.collection === 'notes');
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title={`#${tag} · ${SITE_TITLE}`} description={`标签：${tag}`} wide>
|
||||||
|
<div class="page-board">
|
||||||
|
<div class="board-main">
|
||||||
|
<section class="panel page-title-block">
|
||||||
|
<p class="meta"><a href="/tags/">← 全部标签</a></p>
|
||||||
|
<h1>#{tag}</h1>
|
||||||
|
<p class="lede">
|
||||||
|
共 <strong>{entries.length}</strong> 篇（文章 {postsInTag.length} · 笔记 {notesInTag.length}）
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{
|
||||||
|
postsInTag.length > 0 && (
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>文章</h2>
|
||||||
|
<span class="meta">{postsInTag.length}</span>
|
||||||
|
</div>
|
||||||
|
<DenseEntryList entries={postsInTag} showKind={false} />
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
notesInTag.length > 0 && (
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>笔记</h2>
|
||||||
|
<span class="meta">{notesInTag.length}</span>
|
||||||
|
</div>
|
||||||
|
<DenseEntryList entries={notesInTag} showKind={false} />
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
entries.length === 0 && (
|
||||||
|
<section class="panel">
|
||||||
|
<p class="empty-hint">该标签下暂无内容。</p>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="board-side">
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>其他标签</h2>
|
||||||
|
<a href="/tags/">全部 →</a>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
otherTags.length === 0 ? (
|
||||||
|
<p class="empty-hint">暂无</p>
|
||||||
|
) : (
|
||||||
|
<div class="tag-cloud">
|
||||||
|
{otherTags.map(([t, items]) => (
|
||||||
|
<a class="tag" href={`/tags/${encodeURIComponent(t)}/`}>
|
||||||
|
#{t}
|
||||||
|
<span class="count">{items.length}</span>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>快捷入口</h2>
|
||||||
|
</div>
|
||||||
|
<nav class="quick-nav">
|
||||||
|
<a href="/posts/"><span>文章</span><em>{posts.length}</em></a>
|
||||||
|
<a href="/notes/"><span>笔记</span><em>{notes.length}</em></a>
|
||||||
|
<a href="/tags/"><span>标签</span><em>→</em></a>
|
||||||
|
<a href="/"><span>首页</span><em>⌂</em></a>
|
||||||
|
</nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>站内最近</h2>
|
||||||
|
</div>
|
||||||
|
<DenseEntryList
|
||||||
|
entries={[...posts, ...notes].slice(0, 6)}
|
||||||
|
showKind={true}
|
||||||
|
empty="暂无"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</BaseLayout>
|
||||||
@@ -0,0 +1,123 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
|
import DenseEntryList from '../../components/DenseEntryList.astro';
|
||||||
|
import SiteAside from '../../components/SiteAside.astro';
|
||||||
|
import { SITE_TITLE } from '../../consts';
|
||||||
|
import { getPublishedNotes, getPublishedPosts, getTagMap } from '../../lib/content';
|
||||||
|
|
||||||
|
const tagMap = await getTagMap();
|
||||||
|
const tags = [...tagMap.entries()].sort((a, b) => {
|
||||||
|
const byCount = b[1].length - a[1].length;
|
||||||
|
return byCount !== 0 ? byCount : a[0].localeCompare(b[0], 'zh-CN');
|
||||||
|
});
|
||||||
|
const posts = await getPublishedPosts();
|
||||||
|
const notes = await getPublishedNotes();
|
||||||
|
const recent = [...posts, ...notes].slice(0, 8);
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title={`标签 · ${SITE_TITLE}`} description="按标签浏览" wide>
|
||||||
|
<div class="page-board">
|
||||||
|
<div class="board-main">
|
||||||
|
<section class="panel page-title-block">
|
||||||
|
<h1>标签</h1>
|
||||||
|
<p class="lede">
|
||||||
|
从 frontmatter 的 <code>tags</code> 汇总。共 <strong>{tags.length}</strong> 个标签。
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>全部标签</h2>
|
||||||
|
<span class="meta">{tags.length} 个</span>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
tags.length === 0 ? (
|
||||||
|
<p class="empty-hint">
|
||||||
|
还没有标签。在 frontmatter 里写 <code>tags: [笔记]</code> 即可。
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<ul class="tag-table">
|
||||||
|
{tags.map(([tag, items]) => (
|
||||||
|
<li>
|
||||||
|
<a class="tag-row-item" href={`/tags/${encodeURIComponent(tag)}/`}>
|
||||||
|
<span class="tag-name">#{tag}</span>
|
||||||
|
<span class="tag-count">{items.length} 篇</span>
|
||||||
|
<span class="tag-preview meta">
|
||||||
|
{items
|
||||||
|
.slice(0, 3)
|
||||||
|
.map((e) => e.data.title || e.id)
|
||||||
|
.join(' · ')}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SiteAside
|
||||||
|
active="tags"
|
||||||
|
listTitle="最近内容"
|
||||||
|
listHref="/"
|
||||||
|
listEntries={recent}
|
||||||
|
showKind={true}
|
||||||
|
tipsTitle="怎么打标签"
|
||||||
|
tips={[
|
||||||
|
'YAML：<code>tags: [技术, 笔记]</code>',
|
||||||
|
'同标签文章与笔记会归在一起',
|
||||||
|
'标签页可做主题合集入口',
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tag-table {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.tag-table > li + li {
|
||||||
|
border-top: 1px solid rgb(var(--line));
|
||||||
|
}
|
||||||
|
.tag-row-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(5rem, 8rem) 3.5rem minmax(0, 1fr);
|
||||||
|
gap: 0.65rem;
|
||||||
|
align-items: baseline;
|
||||||
|
padding: 0.62rem 0.15rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.tag-row-item:hover {
|
||||||
|
background: var(--accent-soft);
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.tag-name {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
.tag-count {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.tag-preview {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.tag-row-item {
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
}
|
||||||
|
.tag-preview {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
/**
|
||||||
|
* 轻量 Obsidian Markdown 兼容：
|
||||||
|
* - [[笔记]] / [[笔记|显示名]] → 站内链接
|
||||||
|
* - ![[image.png]] → 图片
|
||||||
|
* - #tag（行内，避免标题）可选保留为纯文本（标签页走 frontmatter）
|
||||||
|
*
|
||||||
|
* 链接策略：优先当笔记 /notes/{slug}/，也兼容 /posts/{slug}/
|
||||||
|
* 文件名与 wikilink 目标保持一致即可（中文文件名 OK）。
|
||||||
|
*/
|
||||||
|
import { visit } from 'unist-util-visit';
|
||||||
|
|
||||||
|
const WIKI_RE = /(!)?\[\[([^\]|#]+)(?:#([^\]|]+))?(?:\|([^\]]+))?\]\]/g;
|
||||||
|
|
||||||
|
function toSlug(raw) {
|
||||||
|
// 与 Astro content id 对齐：空白 → -，ASCII 小写（中文不变）
|
||||||
|
return String(raw)
|
||||||
|
.trim()
|
||||||
|
.replace(/\\/g, '/')
|
||||||
|
.replace(/\.mdx?$/i, '')
|
||||||
|
.replace(/^\/+|\/+$/g, '')
|
||||||
|
.replace(/\s+/g, '-')
|
||||||
|
.toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
function guessHref(target) {
|
||||||
|
const slug = toSlug(target);
|
||||||
|
// 资源文件走 /assets 或原路径
|
||||||
|
if (/\.(png|jpe?g|gif|webp|svg|pdf|mp4|mp3)$/i.test(slug)) {
|
||||||
|
return `/assets/${slug.split('/').pop()}`;
|
||||||
|
}
|
||||||
|
// 默认进 notes；posts 同名时请在正文里用标准 Markdown 链到 /posts/...
|
||||||
|
return `/notes/${encodeURI(slug)}/`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function splitTextNode(value) {
|
||||||
|
const nodes = [];
|
||||||
|
let last = 0;
|
||||||
|
let match;
|
||||||
|
const re = new RegExp(WIKI_RE.source, 'g');
|
||||||
|
|
||||||
|
while ((match = re.exec(value)) !== null) {
|
||||||
|
const [full, bang, target, heading, alias] = match;
|
||||||
|
if (match.index > last) {
|
||||||
|
nodes.push({ type: 'text', value: value.slice(last, match.index) });
|
||||||
|
}
|
||||||
|
|
||||||
|
const display = (alias || target).trim();
|
||||||
|
const href = guessHref(target) + (heading ? `#${encodeURIComponent(heading)}` : '');
|
||||||
|
|
||||||
|
if (bang) {
|
||||||
|
nodes.push({
|
||||||
|
type: 'image',
|
||||||
|
url: href.startsWith('/assets/') ? href : guessHref(target),
|
||||||
|
alt: display,
|
||||||
|
title: null,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
nodes.push({
|
||||||
|
type: 'link',
|
||||||
|
url: href,
|
||||||
|
title: null,
|
||||||
|
children: [{ type: 'text', value: display }],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
last = match.index + full.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (last < value.length) {
|
||||||
|
nodes.push({ type: 'text', value: value.slice(last) });
|
||||||
|
}
|
||||||
|
|
||||||
|
return nodes.length ? nodes : [{ type: 'text', value }];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function remarkObsidian() {
|
||||||
|
return (tree) => {
|
||||||
|
visit(tree, 'text', (node, index, parent) => {
|
||||||
|
if (!parent || typeof index !== 'number') return;
|
||||||
|
if (!node.value || !node.value.includes('[[')) return;
|
||||||
|
// 跳过代码
|
||||||
|
if (parent.type === 'code' || parent.type === 'inlineCode') return;
|
||||||
|
|
||||||
|
const replacement = splitTextNode(node.value);
|
||||||
|
parent.children.splice(index, 1, ...replacement);
|
||||||
|
return index + replacement.length;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,289 @@
|
|||||||
|
/* 全站信息板：用侧栏模块填内容，不是拉宽留白 */
|
||||||
|
|
||||||
|
.page-board {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
|
||||||
|
gap: 0.9rem;
|
||||||
|
align-items: start;
|
||||||
|
width: min(1180px, 100%);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-board.with-left {
|
||||||
|
grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) minmax(240px, 300px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-board .board-main,
|
||||||
|
.page-board .board-side,
|
||||||
|
.page-board .board-left {
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
border: 1px solid rgb(var(--line));
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: rgb(var(--surface-elevated));
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
padding: 0.85rem 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head h2,
|
||||||
|
.panel-head h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head a,
|
||||||
|
.text-link {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head a:hover,
|
||||||
|
.text-link:hover {
|
||||||
|
color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title-block h1 {
|
||||||
|
margin: 0 0 0.35rem;
|
||||||
|
font-size: clamp(1.35rem, 2.5vw, 1.7rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title-block .lede {
|
||||||
|
margin: 0;
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric {
|
||||||
|
padding: 0.5rem 0.55rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgb(var(--code-bg));
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: var(--accent-dark);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric span {
|
||||||
|
font-size: 0.74rem;
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-nav a {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.45rem 0.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: rgb(var(--ink));
|
||||||
|
font-size: 0.88rem;
|
||||||
|
transition: background var(--dur-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-nav a:hover,
|
||||||
|
.quick-nav a.active {
|
||||||
|
background: var(--accent-soft);
|
||||||
|
color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-nav em {
|
||||||
|
font-style: normal;
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 密集行列表 */
|
||||||
|
.dense-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dense-list > li + li {
|
||||||
|
border-top: 1px solid rgb(var(--line));
|
||||||
|
}
|
||||||
|
|
||||||
|
.dense-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
gap: 0.5rem 0.75rem;
|
||||||
|
align-items: start;
|
||||||
|
padding: 0.58rem 0.1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: background var(--dur-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dense-item:hover {
|
||||||
|
background: var(--accent-soft);
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dense-main {
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dense-title {
|
||||||
|
font-size: 0.92rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dense-item:hover .dense-title {
|
||||||
|
color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dense-desc {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
line-height: 1.4;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dense-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 0.12rem;
|
||||||
|
font-size: 0.74rem;
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dense-tag {
|
||||||
|
color: var(--accent-dark);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kind-dot {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.45rem;
|
||||||
|
height: 0.45rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent);
|
||||||
|
margin-right: 0.35rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kind-dot.note {
|
||||||
|
background: color-mix(in srgb, var(--accent) 55%, #888);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-cloud {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-cloud .count {
|
||||||
|
margin-left: 0.25em;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bullet-list {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 1.1rem;
|
||||||
|
font-size: 0.86rem;
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
}
|
||||||
|
|
||||||
|
.bullet-list li {
|
||||||
|
margin: 0.28rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-hint {
|
||||||
|
margin: 0.2rem 0;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 正文页：主栏阅读 + 右侧信息 */
|
||||||
|
.prose-board {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: start;
|
||||||
|
width: min(1120px, 100%);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-board .article {
|
||||||
|
min-width: 0;
|
||||||
|
max-width: 46rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-board .board-side {
|
||||||
|
position: sticky;
|
||||||
|
top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
.page-board,
|
||||||
|
.page-board.with-left,
|
||||||
|
.prose-board {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-board .board-side {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-board .article {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.dense-item {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dense-meta {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.45rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,483 @@
|
|||||||
|
/*
|
||||||
|
笔记博客视觉：纸感底、单一强调色、偏阅读密度
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--accent: #1f6b5a;
|
||||||
|
--accent-soft: rgba(31, 107, 90, 0.12);
|
||||||
|
--accent-dark: #0f3d34;
|
||||||
|
--ink: 28, 30, 32;
|
||||||
|
--muted: 96, 102, 110;
|
||||||
|
--line: 222, 224, 228;
|
||||||
|
--surface: 252, 251, 248;
|
||||||
|
--surface-elevated: 255, 255, 255;
|
||||||
|
--code-bg: 242, 241, 237;
|
||||||
|
--shadow: 0 1px 2px rgba(var(--ink), 0.04), 0 8px 24px rgba(var(--ink), 0.05);
|
||||||
|
--shadow-lift: 0 4px 12px rgba(var(--ink), 0.07), 0 14px 32px rgba(var(--ink), 0.08);
|
||||||
|
--radius: 10px;
|
||||||
|
/* 阅读正文略宽一点；列表/首页用更宽壳，减少大屏两侧空旷 */
|
||||||
|
--content: 46rem;
|
||||||
|
--wide: min(72rem, calc(100vw - 3rem));
|
||||||
|
--page-pad-x: clamp(1rem, 3vw, 2rem);
|
||||||
|
|
||||||
|
/* 动效节奏：短、稳、不抢戏 */
|
||||||
|
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
--dur-fast: 150ms;
|
||||||
|
--dur: 220ms;
|
||||||
|
--dur-slow: 420ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--accent: #5dbea8;
|
||||||
|
--accent-soft: rgba(93, 190, 168, 0.14);
|
||||||
|
--accent-dark: #9ad9c9;
|
||||||
|
--ink: 236, 236, 232;
|
||||||
|
--muted: 160, 164, 170;
|
||||||
|
--line: 52, 56, 62;
|
||||||
|
--surface: 18, 20, 22;
|
||||||
|
--surface-elevated: 26, 28, 31;
|
||||||
|
--code-bg: 34, 37, 42;
|
||||||
|
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||||
|
--shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.35), 0 16px 36px rgba(0, 0, 0, 0.28);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family:
|
||||||
|
var(--font-atkinson),
|
||||||
|
'Segoe UI',
|
||||||
|
'PingFang SC',
|
||||||
|
'Hiragino Sans GB',
|
||||||
|
'Microsoft YaHei',
|
||||||
|
sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: rgb(var(--surface));
|
||||||
|
color: rgb(var(--ink));
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.7;
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
width: var(--content);
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem var(--page-pad-x) 3.5rem;
|
||||||
|
/* 页面进入 */
|
||||||
|
animation: page-in var(--dur-slow) var(--ease-out) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
main.wide {
|
||||||
|
width: var(--wide);
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes page-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(8px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-up {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes soft-scale {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin: 0 0 0.55em;
|
||||||
|
line-height: 1.28;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
text-wrap: balance;
|
||||||
|
color: rgb(var(--ink));
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(1.45rem, 3.2vw, 1.85rem);
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.28rem;
|
||||||
|
margin-top: 1.75em;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1.08rem;
|
||||||
|
margin-top: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 0.95em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration-thickness: 1px;
|
||||||
|
text-underline-offset: 0.18em;
|
||||||
|
transition:
|
||||||
|
color var(--dur-fast) var(--ease-out),
|
||||||
|
text-underline-offset var(--dur-fast) var(--ease-out),
|
||||||
|
opacity var(--dur-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--accent-dark);
|
||||||
|
text-underline-offset: 0.28em;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong,
|
||||||
|
b {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: 1.3em;
|
||||||
|
margin: 0 0 0.95em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0.2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose img:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-lift);
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid rgb(var(--line));
|
||||||
|
margin: 1.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
|
||||||
|
font-size: 0.88em;
|
||||||
|
padding: 0.1em 0.35em;
|
||||||
|
background: rgb(var(--code-bg));
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
padding: 0.95rem 1.05rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow-x: auto;
|
||||||
|
background: rgb(var(--code-bg));
|
||||||
|
border: 1px solid rgb(var(--line));
|
||||||
|
margin: 0 0 1.2em;
|
||||||
|
font-size: 0.84em;
|
||||||
|
line-height: 1.55;
|
||||||
|
transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
pre:hover {
|
||||||
|
border-color: color-mix(in srgb, var(--accent) 35%, rgb(var(--line)));
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
all: unset;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1.2em;
|
||||||
|
padding: 0.15em 0 0.15em 0.9em;
|
||||||
|
border-left: 3px solid var(--accent);
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
transition: background var(--dur) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 0 0 1.2em;
|
||||||
|
font-size: 0.92em;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid rgb(var(--line));
|
||||||
|
padding: 0.45em 0.65em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: rgb(var(--code-bg));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Obsidian callout 粗支持：> [!note] */
|
||||||
|
blockquote:has(> p:first-child) {
|
||||||
|
background: var(--accent-soft);
|
||||||
|
border-radius: 0 var(--radius) var(--radius) 0;
|
||||||
|
padding: 0.75em 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose :where(h2, h3, h4) {
|
||||||
|
scroll-margin-top: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 正文链接：底线生长感 */
|
||||||
|
.prose a {
|
||||||
|
background-image: linear-gradient(currentColor, currentColor);
|
||||||
|
background-position: 0 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 0% 1px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition:
|
||||||
|
background-size var(--dur) var(--ease-out),
|
||||||
|
color var(--dur-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose a:hover {
|
||||||
|
background-size: 100% 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.1em 0.5em;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--accent-soft);
|
||||||
|
color: var(--accent-dark);
|
||||||
|
font-size: 0.8em;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1.45;
|
||||||
|
transition:
|
||||||
|
background var(--dur-fast) var(--ease-out),
|
||||||
|
transform var(--dur-fast) var(--ease-out),
|
||||||
|
box-shadow var(--dur-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag:hover {
|
||||||
|
background: rgba(31, 107, 90, 0.22);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 8px rgba(31, 107, 90, 0.12);
|
||||||
|
color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
font-size: 0.88em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-list > li {
|
||||||
|
animation: fade-up var(--dur-slow) var(--ease-out) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表错峰入场，最多 8 项 */
|
||||||
|
.card-list > li:nth-child(1) {
|
||||||
|
animation-delay: 40ms;
|
||||||
|
}
|
||||||
|
.card-list > li:nth-child(2) {
|
||||||
|
animation-delay: 80ms;
|
||||||
|
}
|
||||||
|
.card-list > li:nth-child(3) {
|
||||||
|
animation-delay: 120ms;
|
||||||
|
}
|
||||||
|
.card-list > li:nth-child(4) {
|
||||||
|
animation-delay: 160ms;
|
||||||
|
}
|
||||||
|
.card-list > li:nth-child(5) {
|
||||||
|
animation-delay: 200ms;
|
||||||
|
}
|
||||||
|
.card-list > li:nth-child(6) {
|
||||||
|
animation-delay: 240ms;
|
||||||
|
}
|
||||||
|
.card-list > li:nth-child(7) {
|
||||||
|
animation-delay: 280ms;
|
||||||
|
}
|
||||||
|
.card-list > li:nth-child(8) {
|
||||||
|
animation-delay: 320ms;
|
||||||
|
}
|
||||||
|
.card-list > li:nth-child(n + 9) {
|
||||||
|
animation-delay: 360ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: block;
|
||||||
|
padding: 0.95rem 1.05rem;
|
||||||
|
border: 1px solid rgb(var(--line));
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: rgb(var(--surface-elevated));
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
transition:
|
||||||
|
border-color var(--dur) var(--ease-out),
|
||||||
|
transform var(--dur) var(--ease-out),
|
||||||
|
box-shadow var(--dur) var(--ease-out),
|
||||||
|
background var(--dur) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
border-color: color-mix(in srgb, var(--accent) 55%, rgb(var(--line)));
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: var(--shadow-lift);
|
||||||
|
color: inherit;
|
||||||
|
background: color-mix(in srgb, rgb(var(--surface-elevated)) 92%, var(--accent-soft));
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:active {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
transition-duration: var(--dur-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h3 {
|
||||||
|
margin: 0 0 0.3em;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: color var(--dur-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover h3 {
|
||||||
|
color: var(--accent-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card p {
|
||||||
|
margin: 0;
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.35rem;
|
||||||
|
margin-top: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
margin: 2.1rem 0 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head a {
|
||||||
|
font-size: 0.88em;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.15em;
|
||||||
|
transition: transform var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head a:hover {
|
||||||
|
transform: translateX(3px);
|
||||||
|
gap: 0.35em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding: 0.35rem 0 0.15rem;
|
||||||
|
animation: fade-up var(--dur-slow) var(--ease-out) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
font-size: 0.98em;
|
||||||
|
max-width: 34rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章页标题区 */
|
||||||
|
.article {
|
||||||
|
animation: soft-scale var(--dur-slow) var(--ease-out) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
position: absolute !important;
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
clip-path: inset(50%);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
body {
|
||||||
|
font-size: 14.5px;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
padding: 1.35rem 0 2.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 减少动效偏好 */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
html {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"include": [".astro/types.d.ts", "**/*"],
|
||||||
|
"exclude": ["dist"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"strictNullChecks": true
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user