Asky for Astro

把原 WordPress 主题 Asky 移植到 Astro，保留 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

---

安装与运行

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 接口。

在组件 / 页面中使用

---
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：

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

---

写文章

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

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

正文 Markdown ...

---

评论系统（Twikoo）

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

启用步骤

1. 按 Twikoo 文档 部署一份云函数（推荐 Vercel 或 CloudBase，免费）。

2. 把得到的部署 URL 填到 asky.config.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 数据库查询，这里暂用纯前端过滤

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