浪子
170 lines
5.8 KiB
Markdown
170 lines
5.8 KiB
Markdown
# 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 数据库查询，这里暂用纯前端过滤
|
||
|
||
视觉上、布局上、交互动画上则与原主题完全一致。
|