blog/src/content/posts/guides/Theme Guide-ja.md

title	published	updated	tags	pin	lang	abbrlink
テーマ使用ガイド	2025-01-26	2025-04-13	ブログテーマ ガイド	99	ja	theme-guide

Retypesetは、日本語では「再組版」と呼ばれる、Astro フレームワークをベースにした静的ブログテーマです。本ガイドではテーマの設定変更方法と新しい記事の作成方法を紹介し、個人ブログを素早く構築できるよう支援します。

テーマ設定

設定ファイル src/config.ts を変更してあなたのブログをカスタマイズできます。

サイト情報

site: {
  // サイトタイトル
  title: 'Retypeset'
  // サイトサブタイトル
  subtitle: 'Revive the beauty of typography'
  // サイト説明
  description: 'Retypeset is a static blog theme...'
  // 上記の静的設定ではなく src/i18n/ui.ts の多言語タイトル/サブタイトル/説明を使用
  i18nTitle: true // true, false
  // 著者名
  author: 'radishzz'
  // サイトURL
  url: 'https://retypeset.radishzz.cc'
  // ファビコンURL
  // 推奨フォーマット: svg, png, ico
  favicon: '/icons/favicon.svg' // または https://example.com/favicon.svg
}

テーマカラー

color: {
  // デフォルトテーマモード
  mode: 'light' // light, dark, auto
  // ライトモード
  light: {
    // プライマリカラー
    // サイトタイトル、ホバー効果などに使用
    primary: 'oklch(25% 0.005 298)'
    // セカンダリカラー
    // 通常テキストに使用
    secondary: 'oklch(40% 0.005 298)'
    // 背景色
    background: 'oklch(96% 0.005 298)'
  }
  // ダークモード
  dark: {
    // プライマリカラー
    primary: 'oklch(92% 0.005 298)'
    // セカンダリカラー
    secondary: 'oklch(77% 0.005 298)'
    // 背景色
    background: 'oklch(22% 0.005 298)'
  }
}

グローバル設定

global: {
  // デフォルト言語
  // サイトのルートパス '/' の言語
  locale: 'zh' // de, en, es, fr, ja, ko, pl, pt, ru, zh, zh-tw
  // その他の言語
  // '/en/' '/es/' などの多言語パスを生成
  // デフォルト言語を重複して入力しないでください、空の配列 [] も可能です
  moreLocales: ['en', 'es', 'ja', 'ru', 'zh-tw'] // ['de', 'en', 'es', 'fr', 'ja', 'ko', 'pl', 'pt', 'ru', 'zh', 'zh-tw']
  // フォントスタイル
  fontStyle: 'sans' // sans, serif
  // 記事の日付フォーマット
  // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
  // 2025-04-13, 04-13-2025, 13-04-2025, Apr 13 2025，13 Apr 2025
  dateFormat: 'YYYY-MM-DD'
  // デフォルトですべての記事に目次を表示
  toc: true // true, false
  // 数式表示のためのKaTeXを有効化
  katex: true // true, false
  // アニメーションと遷移効果を減らしてパフォーマンスを向上させる
  reduceMotion: false // true, false
}

コメントシステム

comment: {
  // コメント機能を有効にする
  enabled: true // true, false
  // waline コメント
  waline: {
    // サーバー URL
    serverURL: 'https://retypeset-comment.radishzz.cc'
    // 絵文字 URL
    emoji: [
      'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji'
      // 'https://unpkg.com/@waline/emojis@1.2.0/bmoji'
      // その他の絵文字: https://waline.js.org/en/guide/features/emoji.html
    ]
    // gif 検索
    search: false // true, false
    // 画像アップローダー
    imageUploader: false // true, false
  }
}

検索エンジン最適化

seo: {
  // @twitter ID
  twitterID: '@radishzz_'
  // サイト認証
  verification: {
    // Google Search Console
    google: 'AUCrz5F1e5qbnmKKDXl2Sf8u6y0kOpEO1wLs6HMMmlM'
    // Bing ウェブマスターツール
    bing: '64708CD514011A7965C84DDE1D169F87'
    // Yandex ウェブマスター
    yandex: ''
    // Baidu 検索
    baidu: ''
  }
  // Google Analytics
  googleAnalyticsID: ''
  // Umami Analytics
  umamiAnalyticsID: '520af332-bfb7-4e7c-9386-5f273ee3d697'
  // フォロー認証
  follow: {
    // フィードID
    feedID: ''
    // ユーザーID
    userID: ''
  }
  // APIFlash アクセスキー
  // OpenGraph 用のウェブサイトスクリーンショットを自動生成
  // アクセスキーの取得: https://apiflash.com/
  apiflashKey: ''
}

フッター設定

footer: {
  // ソーシャルリンク
  links: [
    {
      name: 'RSS',
      url: '/atom.xml', // または /rss.xml
    },
    {
      name: 'GitHub',
      url: 'https://github.com/radishzzz/astro-theme-retypeset',
    },
    {
      name: 'Email',
      url: 'email@radishzz.cc',
    }
    // {
    //   name: 'X',
    //   url: 'https://x.com/radishzz_',
    // },
  ]
  // サイト開始年
  startYear: 2025
}

リソースプリロード

preload: {
  // リンクプリフェッチ戦略
  linkPrefetch: 'viewport' // hover, tap, viewport, load
  // 画像ホスティング URL
  imageHostURL: 'https://image.radishzz.cc'
  // Markdownファイル内のリモート画像を最適化してレイアウトシフトを防止
  // カスタム Google Analytics JS
  // アナリティクス JavaScript をカスタムドメインにルーティングするユーザー向け
  customGoogleAnalyticsJS: ''
  // カスタム Umami Analytics JS
  // Umamiを自己デプロイしたり、アナリティクス JavaScript をカスタムドメインにルーティングするユーザー向け
  customUmamiAnalyticsJS: 'https://js.radishzz.cc/jquery.min.js'
}

その他の設定

設定ファイル src/config.ts 以外にも、一部の設定は他のファイルにあります。

シンタックスハイライト

コードブロックのシンタックスハイライトテーマ。

// astro.config.ts

shikiConfig: {
  // 利用可能なテーマ: https://shiki.style/themes
  // 背景色はデフォルトでシンタックスハイライトテーマではなく、ブログテーマに従います
  themes: {
    light: 'github-light' // ライトテーマ
    dark: 'github-dark' // ダークテーマ
  }
}

記事の抜粋

記事の自動抜粋の文字数。

// src/utils/description.ts

const EXCERPT_LENGTHS: Record<ExcerptScene, {
  cjk: number // 中国語、日本語、韓国語
  other: number // その他の言語
}> = {
  list: { // ホームページ記事リスト
    cjk: 120, // 先頭から120文字を自動抜粋
    other: 240, // 先頭から240文字を自動抜粋
  },
}

Open Graph

Open Graphソーシャルカードスタイル。

// src/pages/og/[...image].ts

getImageOptions: (_path, page) => ({
  logo: {
    path: './public/icons/og-logo.png', // ローカルパスのPNG形式が必要
    size: [250], // ロゴの幅
  },
  font: {
    title: { // タイトル
      families: ['Noto Sans SC'], // フォント
      weight: 'Bold', // 太さ
      color: [34, 33, 36], // 色
      lineHeight: 1.5, // 行の高さ
    },
  },
  fonts: [ // フォントパス（ローカルまたはリモート）
    'https://cdn.jsdelivr.net/gh/notofonts/noto-cjk@main/Sans/SubsetOTF/SC/NotoSansSC-Bold.otf',
    'https://cdn.jsdelivr.net/gh/notofonts/noto-cjk@main/Sans/SubsetOTF/SC/NotoSansSC-Regular.otf',
  ],
  bgGradient: [[242, 241, 245]], // 背景色
  // その他の設定: https://github.com/delucis/astro-og-canvas/tree/latest/packages/astro-og-canvas
})

RSSフィード

RSSフィードページスタイル。

<!-- public/rss/rss-style.xsl -->

<style type="text/css">
body{color:oklch(25% 0.005 298)} /* フォントカラー */
.bg-white{background-color:oklch(0.96 0.005 298)!important} /* 背景色 */
.text-gray{color:oklch(0.25 0.005 298 / 75%)!important} /* セカンダリフォントカラー */
</style>

新しい記事の作成

src/content/posts/ ディレクトリに .md または .mdx 拡張子を持つ新しいファイルを作成し、ファイルの先頭に Front Matter メタデータを追加します。

Front Matter

---
# 必須
title: テーマ使用ガイド
published: 2025-01-26

# 任意
description: 記事の最初の120文字が自動的に要約として選択されます。
updated: 2025-03-26
tags:
  - ブログテーマ
  - ガイド

# 高度な設定（任意）
draft: true/false
pin: 0-99
toc: true/false
lang: de/en/es/fr/ja/ko/pl/pt/ru/zh/zh-tw
abbrlink: theme-guide
---

高度な設定

draft

記事を下書きとしてマークします。true に設定すると、記事は公開されず、ローカル開発プレビューでのみ利用可能です。デフォルトは false です。

pin

記事をトップに固定します。数字が大きいほど、固定された記事の優先度が高くなります。デフォルトは 0 で、固定されていないことを意味します。

toc

目次を生成するかどうか。h2からh4までの見出しを表示します。デフォルトではグローバル設定項目 global.toc によって決定されますが、記事ごとに個別に設定して上書きすることもできます。

lang

記事の言語を指定します。一つの言語のみ指定できます。指定しない場合、記事はデフォルトですべての言語パスに表示されます。

# src/config.ts
# locale: 'en'
# moreLocales: ['es', 'ru']

# lang: ''
src/content/posts/apple.md   ->  example.com/posts/apple/
                             ->  example.com/es/posts/apple/
                             ->  example.com/ru/posts/apple/
# lang: en
src/content/posts/apple.md   ->  example.com/posts/apple/
# lang: es
src/content/posts/apple.md   ->  example.com/es/posts/apple/
# lang: ru
src/content/posts/apple.md   ->  example.com/ru/posts/apple/

abbrlink

記事のURLをカスタマイズします。小文字、数字、ハイフン - のみ使用できます。

# src/config.ts
# locale: 'en'
# moreLocales: ['es', 'ru']
# lang: 'es'

# abbrlink: ''
src/content/posts/apple.md           ->  example.com/es/posts/apple/
src/content/posts/guide/apple.md     ->  example.com/es/posts/guide/apple/
src/content/posts/2025/03/apple.md   ->  example.com/es/posts/2025/03/apple/

# abbrlink: 'banana'
src/content/posts/apple.md           ->  example.com/es/posts/banana/
src/content/posts/guide/apple.md     ->  example.com/es/posts/banana/
src/content/posts/2025/03/apple.md   ->  example.com/es/posts/banana/