恋文 Astro Blog ドキュメント

このドキュメントは英語版を翻訳したものです。より良い翻訳がありましたら、プルリクエストしてください。

これはAstroで構築されたブログテンプレートです。最小限の公式Astroブログテンプレートから始まりましたが、スタイリングには恋文意匠を使用しています。

これは簡単にカスタマイズできるシンプルなテンプレートです。高度な使い方については、Astroのドキュメントを参照してください。

サイトプロファイルの設定

src/consts.tsファイルでサイトプロファイルを設定できます。こちらがデフォルトの設定です：

export const SITE_TITLE = 'Koibumi Blog';

export const SITE_DESCRIPTION = 'A blog about SolidJS, Astro, and koibumi design.';

export const FAVICON_SRC = '/favicon.svg';

export const AVATAR_SRC = '/avatar.avif';

export const BIO = " Welcome to my website! I write about programming, technology, and other things that interest me."

export const GLOBAL_STYLE: 'quartz' | 'glass' | 'lightGlass' = 'glass'

export const COPYRIGHT_NAME = 'Koibumi Design';
属性説明
SITE_TITLEサイトのタイトルです。
SITE_DESCRIPTIONサイトの説明です。
FAVICON_SRCファビコンのパスです。
AVATAR_SRCアバターのパスです。
BIO著者のバイオです。
GLOBAL_STYLEサイトのグローバルスタイルです。quartz、glass、lightGlassから選ぶことができます。
COPYRIGHT_NAME著作権の名前です。

ファビコンとアバターを変更する方法

アバターとファビコンは/publicフォルダにあります。それらを自分の画像に置き換えることができます。

ファイル名を変更する場合は、例えば、favicon.svgをfavicon.icoに変更した場合、src/consts.tsファイル内のFAVICON_SRCまたはAVATAR_SRCも変更する必要があります。

言語の設定方法

const.tsを編集して言語を設定することはまだサポートされていません。以下のファイル内のhtmlタグのlang属性を編集することで言語を設定できます：

  • src/layouts/BlogPost.astro
  • src/pages/index.astro
  • src/pages/blog/index.astro

お問い合わせ情報の設定方法

お問い合わせ情報の設定はまだサポートされていません。src/pages/index.astroファイルを手動で編集することしかできません。

このパターンを編集してください：


<div id="contact">
    <a class="icon-link" href="https://github.com/koibumi-design" target="_blank" aria-label="GitHub">
        <GitHubIcon/>
    </a>
</div>

アイコンを取得するには、Simple Iconsウェブサイトを使用できます。

ブログ投稿のフロントマター

マークダウンファイル内でブログ投稿

のフロントマターを設定する必要があります。こちらが一例です：

---
title: 'Koibumi Astro Blog Document'
description: 'Introduce how to use Koibumi Astro Blog (English Version)'
pubDate: 'Mar 26 2023'
heroImage: '/117092881_p1.webp'
pinned: true
notCompleted: false
---
属性説明
titleブログ投稿のタイトルです。
descriptionブログ投稿の説明です。
pubDateブログ投稿の公開日です。
heroImage（オプション）ブログ投稿のカバーです。
pinned（オプション、デフォルトはfalse）ブログ投稿をピン留めします。
notCompleted（オプション、デフォルトはfalse）未完成としてマークします。未完成の投稿はブログリストに表示されません。

新しいブログ投稿を追加する方法

src/content/blogフォルダ内に.mdファイルを作成してください。既存のファイルをコピーしてフロントマターを編集することができます。

マークダウンの使用方法がわからない場合は、Markdown Guideを確認してください。

新しいページを追加する方法

src/pagesフォルダ内に新しい.astroファイルを作成してください。既存のファイルをコピーして編集することができます。

ページまたは外部リンクをナビゲーションバーに追加したい場合は、src/components/Header.astroファイルを編集できます。

新しい背景を変更する方法

src/styles/global.scssファイルを見つけて、bodyセレクタのbackground-imageプロパティを編集してください。

body {

  /* 以下の行を編集 */
  background-image: url('/background.webp'), linear-gradient(to right, #ffcdb9, #FFC0CB);

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

ブログ投稿でLaTexを使用する方法

数式はKaTeXを使用してレンダリングされます。それをロードするために、マークダウンファイルの最初の行にcssタグを追加してください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">

ブログをホストする方法

編集の便宜のために、リポジトリをGitHubアカウントにインポートできます。その後、好きな無料の静的サイトホスティングサービスにデプロイできます。

無料ホスティングサービスの推奨：

これらのサービスを使用するにはドメインが必要です。

著作権リスト