https://github.com/yuhanawa/astro-charm
Beautiful and easy-to-use blog theme
https://github.com/yuhanawa/astro-charm
astro astro-integration astro-theme blog-theme withastro
Last synced: 10 days ago
JSON representation
Beautiful and easy-to-use blog theme
- Host: GitHub
- URL: https://github.com/yuhanawa/astro-charm
- Owner: Yuhanawa
- License: mit
- Created: 2024-08-18T09:37:54.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-04-10T07:08:06.000Z (20 days ago)
- Last Synced: 2025-04-10T07:44:06.643Z (20 days ago)
- Topics: astro, astro-integration, astro-theme, blog-theme, withastro
- Language: Astro
- Homepage: https://astro-charm.vercel.app
- Size: 4.17 MB
- Stars: 27
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README-ja.md
- License: LICENSE
Awesome Lists containing this project
README
# Astro Theme: Charm
[English](./README.md) | [日本語](./README-ja.md) | [中文](./README-zh-cn.md)
美しく、シンプルで使いやすいブログテーマ
[Github](https://github.com/yuhanawa/astro-charm) | [ライブデモ](https://astro-charm.vercel.app/) | [PageSpeed](https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fastro-charm.vercel.app%2F)
注意：`ライブデモ`の右側の画像はCharmテーマの一部ではありません
## 特徴
- Astro v5で構築
- デスクトップとモバイルに対応
- PageSpeedスコアが優秀
- 満点の100点！[2024年12月29日のレポート](https://pagespeed.web.dev/analysis/https-astro-charm-vercel-app/g1cxq98foh)
- 最新の[PageSpeedスコア](https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fastro-charm.vercel.app%2F)を確認
- カテゴリーとタグページ
- ダークモード
- コードブロック
- 検索機能
- コメント機能対応（giscus）
- Google Analytics対応
- サイトマップ
- RSS
- カスタマイズ
- [テーマのカスタマイズ方法](https://astro-charm.vercel.app/posts/custom)
## 使用方法
1. 以下のコマンドを実行して、`astro-charm`テーマで新しいプロジェクトを作成します。
```bash
pnpm create astro-theme@latest with-theme astro-charm
```
2. `src/content.config.ts` をプロジェクトに追加します。
```ts
import { collections as charmCollections } from "astro-charm/content";
export const collections = {
// your other collections
...charmCollections,
};
```
3. プロジェクトに移動し、`@iconify-json/simple-icons`と`@iconify-json/solar`をインストールします。
```bash
pnpm add @iconify-json/simple-icons
pnpm add @iconify-json/solar
```
4. 設定を変更して使用開始！
注意：`astro.config.ts`ファイルに`site`を追加する必要があります。`charm`は`sitemap`と`RSS`にこれを使用します。
詳細な設定については：[Config](#config)をご覧ください。
既存のプロジェクトにインストール
1. プロジェクトに`astro-charm`、`@iconify-json/simple-icons`、`@iconify-json/solar`をインストールします。
```bash
pnpm astro add astro-charm
pnpm add @iconify-json/simple-icons
pnpm add @iconify-json/solar
```
2. `src/content.config.ts` ファイルを変更します。
```ts
import { collections as charmCollections } from "astro-charm/content";
export const collections = {
// your other collections
...charmCollections,
};
```
3. `astro.config.ts`ファイルを修正します。以下のコマンドで修正できます。
```bash
pnpm create astro-theme@latest init astro-charm
```
または手動で修正：
```ts
import { defineConfig } from "astro/config";
import charm from "astro-charm";
export default defineConfig({
prefetch: true,
site: "<あなたのサイトURL>",
integrations: [
charm({
config: {
lang: "ja", // HTMLのlang属性とRSS用
title: "ホームページのタイトル", // ホームページのSEO用
description: "ホームページの説明", // ホームページのSEO用
side: {
title: "タイトル",
sub: "サブタイトル",
bio: "あなたの自己紹介文（50〜90文字程度推奨、自動的に改行されます）",
},
// その他の設定
},
}),
],
});
```
## Config
`astro.config.ts`ファイルに`site`を追加する必要があります。`charm`は`sitemap`と`RSS`にこれを使用します。
### 最小限の設定
```ts
import { defineConfig } from "astro/config";
import charm from "astro-charm";
export default defineConfig({
prefetch: true,
site: "<あなたのサイトURL>",
integrations: [
charm({
config: {
lang: "ja", // HTMLのlang属性とRSS用
title: "ホームページのタイトル", // ホームページのSEO用
description: "ホームページの説明", // ホームページのSEO用
side: {
title: "タイトル",
sub: "サブタイトル",
bio: "あなたの自己紹介文（50〜90文字程度推奨、自動的に改行されます）",
},
},
}),
],
});
```
### [Config schema](https://github.com/Yuhanawa/astro-charm/blob/main/package/index.ts#L59-L152)
```ts
const configSchema = z.object({
lang: z.string(),
title: z.string(),
titleSuffix: z.string().or(z.boolean()).default(true),
description: z.string().optional(),
author: z.string().optional(),
placeholderImage: z.string().min(1).optional(),
licenseId: z.enum([...licenses] as [string, ...string[]]).optional(),
rss: z.boolean().default(true),
googleAnalyticsId: z.string().optional(),
font: z
.enum(["auto", "full", "only-en", "disabled", "dynamic"])
.default("auto"),
shootingStar: z.boolean().default(true),
side: z.object({
title: z.string(),
sub: z.string(),
bio: z.string(),
navHome: z
.object({
title: z.string().default("Home"),
link: z.string().default("/"),
icon: iconStringOrLightDarkOrWithStates.default({
default: "solar:file-text-broken",
hover: "solar:file-smile-outline",
active: "solar:file-smile-bold-duotone",
}),
})
.default({}),
footer: z
.array(
z.object({
title: z.string(),
link: z.string(),
icon: iconStringOrLightDarkOrWithStates,
}),
)
.min(1)
.default([
{
title: "Twitter",
link: "https://x.com/",
icon: "simple-icons:twitter",
},
{
title: "GitHub",
link: "https://github.com/yuhanawa/astro-charm",
icon: "simple-icons:github",
},
]),
navStyle: z.enum(["default", "only-icon", "only-title"]).default("default"),
footerStyle: z
.enum(["default", "only-icon", "only-title"])
.default("default"),
}),
markdown: z
.object({
colorizedBrackets: z
.object({
explicitTrigger: z.boolean().default(false), // if true, ```ts colorize-brackets
})
.default({}),
twoslash: z
.object({
explicitTrigger: z.boolean().default(true), // if true, ```ts twoslash
})
.default({}),
})
.default({}),
giscus: z
.object({
repo: z.string(),
repoId: z.string(),
category: z.string(),
categoryId: z.string(),
mapping: z
.enum(["pathname", "url", "title", "og:title"])
.default("pathname"),
strict: z.boolean().default(false),
reactions: z.boolean().default(true),
emitMetadata: z.boolean().default(false),
inputPosition: z.enum(["top", "bottom"]).default("top"),
theme: z
.object({
light: z.string(),
dark: z.string(),
})
.default({
light: "light",
dark: "dark",
}),
})
.optional(),
});
```
## トラブルシューティング
### [CouldNotTransformImage] Could not transform image
プロジェクトに手動でSharp（`sharp`）をインストールしてください。
```bash
pnpm add sharp
```
### ResponseSentError: The response has already been sent to the browser and cannot be altered.
`src\content` フォルダ内に `posts` フォルダを作成し、その中に投稿（`.md` ファイル）を作成してください。
最小限の md ファイル：
```
---
title: title
published: 2025-04-10
---
```
## 質問と提案
質問や提案がありましたら、Issueを開いてお気軽にご連絡ください。すべてのPull Requestを歓迎します！