站台設定

本頁內容

站台設定保存適用於整個站台的值。範本可以用它們來取得站台身分、分頁、日期處理、社群資料和搜尋中繼資料。

進行設定

在 EmDash 管理後台開啟 Settings,然後選擇包含你所需值的頁面:

  • General 包含站台標題、標語、logo、favicon、公開 URL、每頁文章數、日期格式和時區。請使用 Change domain 變更公開 URL,詳見遷移到新網域。
  • Social 包含受支援社群服務的帳號名稱。
  • SEO 包含標題分隔符號、預設社群圖片、驗證值和 robots.txt 內容。每一項的作用請參閱內建 SEO 功能。
  1. 開啟相應的設定頁面。

  2. 輸入站台範本和中繼資料所使用的值。

  3. 儲存該頁面,然後重新載入算繪這些設定的公開頁面。

設定在進行之前是選填的。範本應為其所需的每個值提供合適的回退。

在版面中讀取設定

當版面需要多個值時,請使用 getSiteSettings()。它會將已設定的鍵作為部分物件回傳,並在回傳之前解析媒體參照。

以下基礎版面使用站台身分設定,並讓 EmDashHead 套用已設定的 favicon、預設社群圖片和全站驗證中繼資料:

---
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 的格式仍由主題負責。

使用媒體設定

logo、favicon 和預設社群圖片以媒體參照的形式儲存。讀取時,EmDash 會加入目前 URL,以及已知的內容類型、寬度和高度。如果被參照的媒體項目已被刪除,這些解析出的值可能不存在,因此在算繪圖片之前請檢查 url。

可在管理後台中使用 Remove 按鈕移除其中一張圖片。API 和 MCP 用戶端可以透過將欄位設定為 null 來移除 logo、favicon 或 seo.defaultOgImage;省略某個欄位則保持其目前值不變。seo 和 social 內的欄位同樣如此:只傳送你想變更的欄位,傳送空字串則清除文字欄位。

站台設定只保存一個 logo 和一個 favicon。深色圖片變體屬於 EmDash 圖片欄位,編輯可以在其中選擇對應的另一張圖片,Image 元件可以在兩者之間切換。該模式請參閱深色模式。

執行階段 API 參考記錄了設定鍵和查詢回傳型別。如需以程式方式修改,請使用 Bearer 權杖進行驗證,並在每個會改變狀態的請求中加入 X-EmDash-Request: 1。請求主體和回應請參閱設定端點。