站台設定保存適用於整個站台的值。範本可將它們用於站台身分、分頁、日期處理、社群資料和搜尋中繼資料。
設定設定值
在 EmDash 管理後台開啟 Settings,然後選擇所需值對應的頁面:
- General 包含站台標題、標語、標誌、網站圖示、公開 URL、每頁文章數、日期格式和時區。
- Social 包含受支援社群服務的資料控制代碼。
- SEO 包含標題分隔符、預設社群圖片、驗證值和
robots.txt內容。
-
開啟相關設定頁面。
-
輸入站台範本與中繼資料所使用的值。
-
儲存頁面,然後重新載入會算繪這些設定的公開頁面。
設定在配置之前是選用的。範本應為它所需要的任何值提供合適的後備。
在版面中讀取設定
當版面需要多個值時,使用 getSiteSettings()。它將已設定的鍵作為部分物件回傳,並在回傳前解析媒體參照。
以下基礎版面使用站台身分設定,並讓 EmDashHead 套用已設定的網站圖示、預設社群圖片和站台級驗證中繼資料:
---
import { getSiteSettings } from "emdash";
import { createPublicPageContext } from "emdash/page";
import { EmDashHead } from "emdash/ui";
interface Props {
title?: string;
description?: string;
}
const { title, description } = Astro.props;
const settings = await getSiteSettings();
const siteTitle = settings.title ?? "My site";
const fullTitle = title ? `${title} — ${siteTitle}` : siteTitle;
const pageDescription = description ?? settings.tagline;
const page = createPublicPageContext({
Astro,
kind: "custom",
pageType: "website",
title: fullTitle,
pageTitle: title ?? siteTitle,
description: pageDescription,
siteName: siteTitle,
});
---
<!doctype html>
<html lang={Astro.currentLocale ?? "en"}>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>{fullTitle}</title>
<EmDashHead page={page} />
</head>
<body>
<header>
<a href="/" aria-label={siteTitle}>
{settings.logo?.url ? (
<img
src={settings.logo.url}
alt={settings.logo.alt ?? siteTitle}
width={settings.logo.width}
height={settings.logo.height}
/>
) : (
siteTitle
)}
</a>
{settings.tagline && <p>{settings.tagline}</p>}
</header>
<main>
<slot />
</main>
</body>
</html>
EmDashHead 也會呼叫 getSiteSettings()。請求快取使該呼叫重用版面的結果,而不是再執行一次設定查詢。
在伺服器算繪的內容頁面上,將內容參照傳給 createPublicPageContext(),並用 getEmDashEntry() 取得條目。EmDashHead 隨後會在站台預設值之上套用條目的 SEO 面板值。完整的內容頁面模式見 算繪 SEO 面板資料。
讀取單一設定
當元件需要一個值且其父級尚未取得設定物件時,使用 getSiteSetting()。
以下元件依設定的時區格式化時間戳記:
---
import { getSiteSetting } from "emdash";
interface Props {
date: Date;
}
const { date } = Astro.props;
const timezone = await getSiteSetting("timezone") ?? "UTC";
const formatted = new Intl.DateTimeFormat(Astro.currentLocale, {
dateStyle: "long",
timeZone: timezone,
}).format(date);
---
<time datetime={date.toISOString()}>{formatted}</time>
dateFormat 設定是諸如 MMMM d, yyyy 的模式字串。Intl.DateTimeFormat 不消費該語法;當範本需要精確套用它時,請使用支援模式字串的格式化函式庫。
算繪社群資料
社群設定儲存控制代碼或使用者名稱,而不是完整連結。範本決定顯示哪些資料,並將每個已設定的值轉換為該服務的 URL。
以下元件算繪已設定的 X 與 GitHub 資料:
---
import { getSiteSetting } from "emdash";
const social = await getSiteSetting("social");
const xHandle = social?.twitter?.replace(/^@/, "");
---
{(xHandle || social?.github) && (
<nav aria-label="Social profiles">
<ul>
{xHandle && (
<li>
<a href={`https://x.com/${xHandle}`} rel="me noopener" target="_blank">
X
</a>
</li>
)}
{social?.github && (
<li>
<a
href={`https://github.com/${social.github}`}
rel="me noopener"
target="_blank"
>
GitHub
</a>
</li>
)}
</ul>
</nav>
)}
對已設定的 Facebook、Instagram、LinkedIn 和 YouTube 值套用相同模式。這些欄位儲存在管理後台輸入的頁面、資料、頻道或控制代碼值;公開 URL 格式仍由主題負責。
使用媒體設定
標誌、網站圖示和預設社群圖片儲存為媒體參照。讀取時,EmDash 會新增目前 URL 以及任何已知的內容類型、寬度和高度。如果參照的媒體項目已被刪除,這些解析值可能缺失,因此在算繪圖片前請檢查 url。
在管理後台用 Remove 按鈕移除其中一張圖片。API 與 MCP 用戶端可透過將該欄位設為 null 來移除 logo、favicon 或 seo.defaultOgImage;省略欄位則保持其目前值不變。
站台設定保存一個標誌和一個網站圖示。深色圖片變體屬於 EmDash 圖片欄位,編輯者可在其中選擇對應圖片,Image 元件可在其間切換。該模式見 深色模式。
執行階段 API 參考 記錄了設定鍵與查詢回傳類型。對於程式化變更,使用 Bearer 權杖進行身分驗證,並向每個會改變狀態的請求新增 X-EmDash-Request: 1。請求本文與回應見 settings 端點。