站点设置

本页内容

站点设置保存适用于整个站点的值。模板可将它们用于站点身份、分页、日期处理、社交资料和搜索元数据。

配置设置

在 EmDash 管理后台打开 Settings,然后选择所需值对应的页面:

  • General 包含站点标题、标语、徽标、网站图标、公开 URL、每页文章数、日期格式和时区。
  • Social 包含受支持社交服务的资料句柄。
  • SEO 包含标题分隔符、默认社交图片、验证值和 robots.txt 内容。
  1. 打开相关设置页面。

  2. 输入站点模板与元数据所使用的值。

  3. 保存页面,然后重新加载会渲染这些设置的公开页面。

设置在配置之前是可选的。模板应为它所需要的任何值提供合适的回退。

在布局中读取设置

当布局需要多个值时,使用 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 端点。