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 全部命中。

启用步骤

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

把得到的部署 URL 填到 asky.config.ts：

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

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

已支持

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

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

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

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

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

5.8 KiB Raw Blame History Unescape Escape