cirry

cirry

我的原生博客地址:https://cirry.cn

Astro-Yiテーマの設定と執筆のヒント

紹介#

これは私が開発した Astro のオープンソースブログテーマであり、Astro-Yiという名前です。気に入っていただければスターをつけていただけると嬉しいです。ご関心いただきありがとうございます。PR も歓迎です!

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: 1ページに表示するコメントの数
 * 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/'],
}

reactiontrue/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 には、ページの機能を拡張するための多くの設定があります。以下は私の提案です:

  1. Waline コメントシステムを使用することをお勧めします。Waline システムのインストール方法がわからない場合は、Waline 公式ウェブサイトまたはwaline コメント機能のインストールを参考にしてください。

  2. ベアリング番号。中国本土のユーザーの場合、追加することをお勧めします。

  3. 個人のリンクを追加して、より多くの人にあなたとあなたのウェブサイトを知ってもらいましょう。

執筆のヒント#

Markdown ドキュメントの規格#

Astro を使用してブログを書く場合、Markdown を使用する必要があります。基本的な規格は、GitHub の書き方のガイド基本的な書き方と書式設定構文を参考にしてください。

Vscode で frontmatter を自動生成する#

各記事を書く際に、情報を手動でコピーして日付を入力する必要がある場合、非常に手間のかかる作業です。そのため、Vscode でブログを書く際に frontmatter を自動生成する方法を提供しています。詳細はこちらを参照してくださいVscode に Markdown-Frontmatter のコードスニペットを追加する

ブログページの作成#

Yi テーマでは、src/content/blogに新しい md ドキュメントを作成するだけで、ブログの執筆を開始できます。

Astro の Markdown ドキュメントの基準に従い、各ドキュメントには独自の frontmatter 情報が必要であり、md ファイルの先頭に---を追加して frontmatter をマークする必要があります。これにより、次のような便利な機能が提供されます。

  1. ドキュメントにタグやカテゴリを追加したり、特定のドキュメントを固定したりするために、frontmatter にいくつかのプロパティを追加できます。例えば、tagsstickyなどです。

  2. ドキュメントのパスとファイル名に中国語を使用しないようにするために、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  // コメント機能を有効にするかどうか
---

これらのプロパティのうち、titledate以外はオプションであり、デフォルト値があるか選択可能です。これらのオプションやデフォルト値はsrc/content/config.jsで変更できます。

ダイナミックページの作成#

Yi テーマでは、src/content/feedに新しい md ドキュメントを作成するだけで、ダイナミックページの作成を開始できます。

ダイナミックページは、フレンドリーリンク、ウィーボ、ツイッターなどのようなもので、一時的に何かを言いたい場所です。

そのため、多くの frontmatter 制限はありません。titleを設定する必要はありません(もちろん、そのようなコンテンツには title は必要ありません)。ただし、メッセージを投稿するためには、最も重要な属性は投稿日時ですので、dateを設定する必要があります。

したがって、ダイナミックページの Md ドキュメントの frontmatter の基本的な設定は次のようになります。

---
date: 2023-01-25 10:23:31
---

ローカルの画像の読み込み#

画像ファイルを/public/imagesディレクトリに配置し、/images/xx.pngのような絶対パスで Markdown で参照するだけです。

たとえば、xxx.pngという名前の画像があり、それを/public/images/2024/フォルダに移動した場合、md ファイルで次のように参照するだけです:![](/images/2024/xxx.png)

アイコンの変更#

ブログのすべてのアイコンは、オープンソースのアイコンライブラリremixiconを使用していますので、お好みのアイコンに自由に置き換えることができます。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。