EmDashを使い始めて、まず最初につまずくポイントのひとつが「管理画面でサイト名を変えたのに、ブログ上では "My Blog"のまま変わらない」という問題だ。※2026.04.05現在
今回はその原因と解決方法をまとめる。
なぜ変わらないのか
EmDashの管理画面には「Settings」からサイトタイトルを設定する項目がある。しかし公式のスターターテンプレート(blog テンプレート)は、この設定値を参照していない。
代わりに、テーマ側の各ファイルに"My Blog"という文字列がべた書きされている。
確認してみると、対象は4ファイルだ。
src/layouts/Base.astro
src/pages/index.astro
src/pages/posts/[slug].astro
src/pages/rss.xml.ts プロジェクトルートで以下のコマンドを叩くと一発で確認できる。
grep -r "My Blog" src/ 解決策①:config.tsで一元管理する(簡単版)
まずsrc/config.tsを作成して、サイト名を一箇所で管理できるようにする。
cat > src/config.ts << 'EOF'
export const SITE_TITLE = "あなたのブログ名";
export const SITE_DESCRIPTION = "ブログの説明";
EOF あとは各ファイルで "My Blog" をこの定数に置き換えるだけだ。次回からサイト名を変えたいときも config.ts の1行を直すだけでいい。
ただしこの方法には欠点がある。管理画面のSettings で変更してもサイトには反映されない。コードを直して再デプロイが必要になる。
解決策②:getSiteSettings() で管理画面と連動させる(完全版)
EmDashにはgetSiteSettings()という関数が用意されており、管理画面で設定した値をコードから取得できる。
これを使えば、管理画面でサイト名を変えるだけで即座に反映される。
・Base.astro
フロントマターの中でこう書く。
import { getSiteSettings } from "emdash";
const settings = await getSiteSettings();
const siteTitle = settings.title ?? "デフォルトのブログ名"; ?? は「左辺がundefinedまたはnullのときだけ右辺を使う」という意味なので、管理画面で設定済みであればその値が使われ、未設定のときだけフォールバックが使われる。
・pages/index.astro
emdashからのimportにgetSiteSettingsを追加して、フロントマター内で呼び出す。
import { getEmDashCollection, getEntryTerms, getSiteSettings } from "emdash";
const settings = await getSiteSettings(); Baseコンポーネントへの渡し方はこうなる。
<Base title={settings.title ?? "あなたのブログ名"} description={settings.tagline ?? ""}> ・pages/posts/[slug].astro
SEOメタを生成している箇所で使う。importにgetSiteSettingsを追加して:
import {
getEmDashEntry,
getEmDashCollection,
getEntryTerms,
getSeoMeta,
getSiteSettings,
} from "emdash"; getSeoMetaを呼ぶ前にこう書く。
const settings = await getSiteSettings();
const seo = getSeoMeta(post, {
siteTitle: settings.title ?? "あなたのブログ名",
siteUrl: Astro.url.origin,
path: `/posts/${slug}`,
defaultOgImage: featuredImageUrl,
}); pages/rss.xml.ts
APIRouteの関数内で呼び出す。
import { getEmDashCollection, getSiteSettings } from "emdash";
export const GET: APIRoute = async ({ site, url }) => {
const siteUrl = site?.toString() || url.origin;
const settings = await getSiteSettings();
const siteTitle = settings.title ?? "あなたのブログ名";
// 以下略 まとめ
EmDash v0.1.0のブログテンプレートはサイト名がハードコードされているため、管理画面の設定だけでは変わらない。getSiteSettings()を使って各ファイルを書き換えることで、管理画面との連動が実現できる。
変更が必要なファイルは4つだが、それぞれ数行の修正で済む。EmDashはまだベータ段階なので、将来のバージョンではテンプレート側で最初からこの対応がされることが期待される。
No comments yet