紹介#
これは私が開発した Astro のオープンソースブログテーマで、Astro-Yiという名前です。気に入ったらスターをつけてくださいね。ご関心いただきありがとうございます!
Astro-Yi の設定#
必須の設定#
Astro プロジェクトの設定ファイルは/astro.config.mjs
にあり、いくつかの設定が必須です:
export default defineConfig({
site: "https://cirry.cn", // ここで自分のウェブサイトのアドレスを変更してください
})
ブログ情報の設定#
Astro-Yi テーマの設定ファイルsrc/consts.ts
には、いくつかの重要な設定があります:
// ...
export const site = {
title: "Cirry's Blog", // 必須
favicon: '/favicon.svg', // 必須
author: "Cirry", // 必須
avatar: '/avatar.png', // 必須
description: '',
motto: '',
url: 'https://cirry.cn', // 必須
recentBlogSize: 5, // 必須
archivePageSize: 25, // 必須
postPageSize: 10, // 必須
indexPageSize: 10, // 必須
beian: '',
}
// ...
favicon
はウェブサイトのアイコンの場所です。ファイルの場所は/public/favicon.svg
ですので、自分のウェブサイトのアイコンに置き換えてください。
avatar
はウェブサイトのアバターの場所です。ファイルの場所は/public/avatar.png
ですので、自分のウェブサイトのアバターに置き換えてください。
コメントシステムの設定#
/**
* enable コメント機能を有効にする場合はtrue、無効にする場合はfalse
* walineのサーバーアドレス
* pageSize:各ページに表示されるコメントの数
* wordLimit: コメントの文字数制限。単一の数字を入力すると最大文字数制限になります。0または設定しない場合は制限なし
* requiredMeta:コメントの必須項目、nick、mail、linkのいずれかまたは複数
* count: サイドバーでの最新コメント数
* pageview: 記事の閲覧数の統計
* reaction: 記事にリアクション機能を追加する
* whiteList: 記事のリアクションホワイトリスト
*/
export const comment = {
enable: true, // 必須、コメントシステムを有効にする場合はtrue
serverUrl: "https://xxx.xx.app", // 必須、Walineのサーバーアドレスに変更してください
pageSize: 20, //
wordLimit: '',
requiredMeta: ["nick", "mail"], // 必須
count: 5,
pageview: true,
reaction: false,
whiteList: ['/message/', '/friends/', '/donate/'],
}
reaction
はtrue/false
だけでなく、配列に画像のアドレスを渡してカスタムリアクションを実現することもできます。詳細はこちらを参照してください記事のリアクション。
サポートシステムの設定#
/**
* サポートシステム
* enable: trueで有効、falseで無効
* tip: サポートのヒント
* wechatQRCode: WeChatのQRコードのアドレス、画像の場所はpublicディレクトリに配置する必要があります
* alipayQRCode: AlipayのQRコードのアドレス、画像の場所はpublicディレクトリに配置する必要があります
* paypalUrl: PaypalのQRコードのアドレス
* @type {{paypalUrl: string, alipayQRCode: string, enable: boolean, wechatQRCode: string, tip: string}}
*/
export const donate = {
enable: true,
tip: "ご支援いただきありがとうございます☕",
wechatQRCode: "/WeChatQR.png",
alipayQRCode: "/AliPayQR.png",
paypalUrl: "https://paypal.me/cirry0?country.x=C2&locale.x=zh_XC",
}
フレンドリーリンクの設定#
/**
* フレンドリーリンク
* name: ブログ名
* url: ブログのアドレス
* avatar: ブログのアバター
* descript: ブログの説明
* @type {[{name: string, description: string, avatar: string, url: string}]}
*/
export const friendlyLinks = [
{
name: "Cirry's Blog",
url: 'https://cirry.cn',
avatar: "https://cirry.cn/avatar.png",
description: 'フロントエンド開発の日常'
},
]
推奨設定#
Astro-yi には多くの設定があり、ページの機能を豊かにすることができます。以下の提案があります:
-
Waline コメントシステムを有効にすることをお勧めします。Waline システムのインストール方法がわからない場合は、Waline 公式ウェブサイトまたはwaline コメント機能のインストールを参考にしてください。
-
ホームページの表示に ICP 番号を追加することをお勧めします。
-
個人のリンクを追加して、より多くの人にあなたとあなたのウェブサイトを知ってもらいましょう。
執筆のヒント#
Markdown 文書の規格#
Astro を使用してブログを書く場合、Markdown を使用する必要があります。基本的な規格は Github の基本的な書き方と書式設定の構文を参考にしてください。
Vscode で frontmatter を自動生成する#
各記事を書く際に、情報を手動でコピーして日付を入力する必要がある場合、非常に手間がかかります。そのため、Vscode でブログを書く際に frontmatter を自動生成する方法を提供しています。詳細はこちらを参照してくださいVscode に Markdown-Frontmatter のコードスニペットを追加する。
ブログページの作成#
Yi テーマでは、src/content/blog
に新しい md ファイルを作成するだけで、ブログの執筆を開始できます。
Astro の Markdown 文書の基準に従い、各文書には独自の frontmatter 情報が必要であり、md ファイルの先頭に---
を追加して frontmatter を示します。これにより、次のような便利な機能が利用できます。
-
ドキュメントにタグやカテゴリを追加したり、特定のドキュメントを固定したりすることができます。
tags
、sticky
などの属性を frontmatter に追加することで実現できます。 -
ブログのパスとファイル名に日本語を使用しないようにするために、md ファイルに
title
を設定して、英語のファイル名を使用し、単語をハイフンで接続します。
Astro-Yi では、ドキュメントのタイトルtitle
と作成日date
の設定だけで十分です。以下は、md ドキュメントの最も基本的な frontmatter の設定例です:
---
title: 菩薩蛮・花明月暗籠軽霧
date: 2024-03-05
---
このようなドキュメント属性では不十分だと感じる場合、Yi ではさらに多くの属性を使用できます。以下は完全な属性設定の例です:
---
title: 菩薩蛮・花明月暗籠軽霧 // ファイル名
description: この詞は、李煜が自分と小周后との密会の情景を描写したもので、北宋乾徳2年(西暦964年)前後に作られました。 // ドキュメントの説明
date: "2023-01-25T10:23:31.210Z" // 公開日
tags: // ドキュメントのタグは配列または文字列をサポートしています
- 詩
category: 詩 // ドキュメントのカテゴリは配列または文字列をサポートしています
sticky: 100 // ドキュメントの固定ウェイト、数字が大きいほどウェイトが大きい
slug: poem/ci // ドキュメントの永続的なリンク
mathjax: false // 数式の表示を有効にするかどうか
draft: false // 下書きかどうか
toc: true // 記事のタイトル目次が必要かどうか
donate: false // 寄付機能が必要かどうか
comment: false // コメント機能が必要かどうか
---
これらの属性のうち、title
とdate
以外はオプションであり、デフォルト値があるか選択可能です。これらのオプションやデフォルト値はsrc/content/config.js
で変更できます。
動的ページの作成#
Yi テーマでは、src/content/feed
に新しい md ファイルを作成するだけで、動的なページの作成を開始できます。
動的ページは、フレンドリーリンク、ウィーボ、ツイッターなどのようなもので、一時的に何かを言いたい場所です。
そのため、frontmatter の制限を多く設けていません。title
を設定する必要はありません(もちろん、そのようなコンテンツにはタイトルは必要ありません)。ただし、メッセージを投稿するためには、最も重要な属性は投稿日時です。したがって、date
を設定する必要があります。
したがって、動的ページの Md ドキュメントの基本的な frontmatter の設定は次のようになります:
---
date: 2023-01-25 10:23:31
---
ローカルの画像の読み込み#
画像ファイルを/public/images
ディレクトリに配置し、/images/xx.png
のような絶対パスで Markdown で参照するだけです。
たとえば、xxx.png
という名前の画像があり、それを/public/images/2024/
ディレクトリに移動した場合、md ファイルで次のように参照するだけです:
。
アイコンの変更#
ブログのすべてのアイコンは、オープンソースのアイコンライブラリremixiconを使用していますので、お好みのアイコンに自由に置き換えることができます。