# Asky for Astro

把原 WordPress 主题 [Asky](https://github.com/saresam/Asky) 移植到 [Astro](https://astro.build/)，保留 100% 原始视觉样式，并提供一个独立的 TypeScript 配置文件 `asky.config.ts` 同步原主题的所有设置项。

> 作者署名：原 WP 主题来自 keith / 路易 / Fuzzz / saresam，Astro 移植版本仅做框架适配，样式 0 改动。

---

## 目录结构

```
asky/
├── asky.config.ts          ← 主题配置（核心：所有 WP 选项都在这）
├── astro.config.mjs        ← Astro 框架配置
├── package.json
├── tsconfig.json
├── public/                 ← 原主题资源（一字未改）
│   ├── style.css           ← 原 WP 主题 style.css 直接拷贝
│   ├── images/             ← 原主题 images/
│   ├── inc/                ← 原主题 inc/（字体 / iconfont 等）
│   └── js/                 ← 原主题 js/（jQuery / app.js / 进度条等）
└── src/
    ├── lib/
    │   └── options.ts      ← akinaOption() 等价的取值函数
    ├── layouts/
    │   └── BaseLayout.astro
    ├── components/         ← Header / Footer / Imgbox / Feature / 等
    ├── content/
    │   ├── config.ts       ← 内容集合定义
    │   └── posts/          ← Markdown 文章
    └── pages/
        ├── index.astro
        ├── posts/[slug].astro
        ├── 404.astro
        ├── search.astro
        └── archive.astro
```

---

## 安装与运行

```bash
npm install
npm run dev          # 启动开发服务器  http://localhost:4321
npm run build        # 构建到 dist/
npm run preview      # 本地预览构建结果
```

---

## 同步原 WordPress 主题设置

打开 `asky.config.ts`，里面的字段名与原 `options.php` 中每一项的 `id` **完全一致**，因此把 WP 后台「主题选项」里的值原样填到这里即可：

| 原 WP 选项 | asky.config.ts 字段 | 默认值 |
|---|---|---|
| 主题风格颜色 | `theme_skin` | `#FE9600` |
| 个人头像 | `focus_logo` | `/images/avatar.jpg` |
| 博主描述 | `admin_des` | `我们的征途是是星辰大海` |
| 首页文章风格 | `post_list_style` | `imageflow` |
| 分页模式 | `pagenav_style` | `ajax` |
| 自动加载下一页 | `auto_load_post` | `3600` |
| 公告 | `head_notice` / `notice_title` | `false` / `欢迎来到我的小站` |
| 背景图 API | `bgapi` | `https://www.loliapi.com/acg/` |
| 背景图 1~5 | `focus_img_1` ~ `focus_img_5` | `''` |
| 波浪动画 | `waveloop` | `false` |
| 聚焦图 1~3 | `feature1_img/title/link` ... | `/images/temp.jpg` |
| 社交（微博/QQ/GitHub …） | `sina` / `qq` / `github` ... | `''` |
| 蜂窝动效 | `canvas_nest` | `false` |
| 跳动小鱼动效 | `flying_fish` | `false` |

完整字段列表见 `asky.config.ts` 的 `AskyConfig` 接口。

### 在组件 / 页面中使用

```astro
---
import { askyOption, isOptionOn, bloginfo } from '~/lib/options';

const skin = askyOption('theme_skin');
const showLike = askyOption('post_like') === 'yes';
const showFish = isOptionOn('flying_fish');
const siteName = bloginfo('name');
---
```

`askyOption(id, fallback)` 等价于原主题里的 PHP 函数 `akina_option($id, $fallback)`；
`isOptionOn(id)` 用来判断 checkbox 类型（`true`/`'1'`/`1` 都视作开启）。

---

## 关于样式

- `public/style.css` 是从 `F:/Download/Asky/style.css` **原样**拷贝（128 KB / 5958 行）；
- 所有图片、字体、图标都在 `public/images/`、`public/inc/fonts/`，路径与原 WP 主题保持一致；
- 因此 CSS 中相对路径（如 `url(images/earth.jpg)`、`url('inc/fonts/iconfont.woff2')`）无需修改即可正常解析；
- 主题色通过 `theme_skin` 注入 CSS 变量 `--theme-skin`，不会覆写 `style.css`。

如果想做局部调整，请使用 `asky.config.ts` 中的 `site_custom_style`：

```ts
site_custom_style: `
  .site-header { background: rgba(0,0,0,.3); }
`
```

---

## 写文章

在 `src/content/posts/` 中新建 `.md`：

```markdown
---
title: "我的新文章"
date: 2026-05-20
description: "副标题 / 摘要"
thumbnail: "/images/foo.jpg"
sticky: false
tags: ["Astro"]
categories: ["默认分类"]
author: "Admin"
---

正文 Markdown ...
```

---

## 评论系统（Twikoo）

评论使用 [Twikoo](https://twikoo.js.org/) 作为后端，前端**不引入官方 UI / CSS**，而是直接 `fetch` 调用云函数，列表项 HTML 结构与原 WP 主题 `akina_comment_format` 完全一致——主题原本的 `.comment-arrow / .main.shadow / .commeta / .body / .arrow-left` 等 CSS 全部命中。

### 启用步骤

1. 按 [Twikoo 文档](https://twikoo.js.org/quick-start.html) 部署一份云函数（推荐 Vercel 或 CloudBase，免费）。
2. 把得到的部署 URL 填到 `asky.config.ts`：

   ```ts
   twikoo: {
     envId: 'https://your-app.vercel.app/',  // 云函数地址
     region: '',                              // 仅腾讯云填 'ap-shanghai'
     avatarUrl: 'https://cravatar.cn/avatar/',
     showUa: true                             // 显示 UA 图标（OS / 浏览器）
   }
   ```

3. 留空 `envId` 时评论区显示「请在 asky.config.ts 中配置 twikoo.envId」。

### 已支持

- 加载评论列表（含嵌套回复）
- 提交评论 / 回复
- 点赞 / 取消点赞
- UA 图标（复用 `/images/ua/*.png`）
- 实时更新「欢迎回来 XXX」的欢迎语

---

## 路线图（未实现的动态功能）

下面这些是原 WP 主题的运行时动态特性，移植版只保留了 HTML 结构与 CSS，需要按需自行接入后端：

- AJAX 分页 / Pjax 局部刷新
- 文章点赞计数（原本基于 `$_COOKIE` + WP meta）
- 搜索结果由 WP 数据库查询，这里暂用纯前端过滤

视觉上、布局上、交互动画上则与原主题完全一致。