主题开发指南

src/themes/
├── registry.ts     ← 主题注册表（新主题在这里加一行；ThemeModule 接口也在这里）
├── wechat.ts / wechat.css
├── journal.ts / journal.css
├── paper.ts / paper.css
├── minimal.ts / minimal.css
├── midnight.ts / midnight.css
├── bitcoin.ts / bitcoin.css
└── rednote.ts / rednote.css

import type {
  HomeData, WeiboData, LinksData, PostData, AboutData, PageData, ArchivesData, GuestbookData,
  MemberData, RankData,
} from './registry'
import {
  esc, fmtDate, likesBtn, pagerHtml,
  friendLinkCards, friendLinkApply, siteNav, weiboCards, weiboPager,
  archiveListHtml,
} from '../render'
import css from './mytheme.css'

const id = 'mytheme'

// 入参类型全部来自 registry 的命名类型（HomeData / WeiboData / …，字段含义以 registry.ts 注释为准），
// 七套官方主题（wechat.ts 最完整）是现成参照。这里示范最常用的 home()：
export function home(d: HomeData): string {
  return `<div class="my-page">
    ${siteNav({ cls: 'my-snav', categories: d.categories, tags: d.tags, pages: d.pages, active: d.navActive })}
    ${d.posts.map(p => `
      <a class="my-item" href="/post/${esc(p.slug)}">
        <h2>${esc(p.title)}</h2>
        <p>${esc(p.summary)}</p>
        <time>${fmtDate(p.published_at)}</time>
      </a>`).join('')}
    ${pagerHtml({ page: d.page, totalPages: d.totalPages, base: '/?' })}
  </div>`
}

export function weibo(d: WeiboData): string {
  // 卡片/翻页复用 render.ts 的 weiboCards / weiboPager（语义化 .wb-* class，样式由你的 CSS 塑形）
  return `<div class="my-page">
    <h1>微博</h1>
    ${weiboCards({ settings: d.settings, items: d.items, avatarHtml: '', allowComments: d.allowComments, adminName: d.adminName })}
    ${weiboPager(d.page, d.totalPages)}
  </div>`
}

export function links(d: LinksData): string {
  // 卡片与「申请收录」表单复用 friendLinkCards / friendLinkApply（语义化 .fl-* class）
  return `<div class="my-page">
    <h1>友情链接</h1>
    ${friendLinkCards(d.items)}
    ${friendLinkApply()}
  </div>`
}

export function post(d: PostData): string {
  return `<div class="my-article">
    <h1>${esc(d.post.title)}</h1>
    <div class="rich">${d.post.contentHtml}</div>
    ${likesBtn(d.post.slug, d.post.likes)}
    ${d.comments.html}
  </div>`
}

export function about(d: AboutData): string {
  return `<div class="my-about"><h1>关于我</h1><div class="rich">${d.contentHtml}</div></div>`
}

export function page(d: PageData): string {
  // 独立页面与 about 同构；漏实现时 pages.ts 有通用兜底（仅正文壳）
  return `<div class="my-page"><h1>${esc(d.title)}</h1><div class="rich">${d.contentHtml}</div></div>`
}

export function archives(d: ArchivesData): string {
  // 归档列表复用 render.ts 的 archiveListHtml（语义化 .ar-* class，样式由你的 CSS 塑形）
  return `<div class="my-page">
    <h1>文章归档</h1>
    ${archiveListHtml(d.groups)}
  </div>`
}

export function guestbook(d: GuestbookData): string {
  // 留言墙 + 表单由 pages 层用 commentsHtml({ guestbook: true }) 拼好，直接输出
  return `<div class="my-page">
    <h1>留言板</h1>
    ${d.html}
  </div>`
}

export { id, css }

import * as mytheme from './mytheme'

export const THEMES: Record<string, ThemeModule> = {
  // …已有主题
  mytheme: { ...mytheme, id: 'mytheme', name: '我的主题', description: '一句话描述',
    // 可选：后台「皮肤」卡片预览色板 [背景, 强调条, 卡面, 卡面2, 卡面3]
    colors: ['#faf8f4', '#b23a29', '#ffffff', '#f2ede4', '#f7f3ec'],
  },
}