E EmDash CMS Everything Guides, use cases, plugins, templates
繁體中文

使用內容

本頁內容

本指南介紹如何使用 EmDash 管理儀表板建立、編輯和管理內容。

存取管理後台

在瀏覽器中開啟網站上的 /_emdash/admin。使用設定時建立的憑證登入。

儀表板顯示：

  • 側邊欄 - 導覽至集合、媒體和設定
  • 內容清單 - 所選集合中的項目
  • 快速操作 - 建立新內容、批次操作

建立內容

  1. 點擊側邊欄中的集合名稱（例如 Posts）

  2. 點擊 New Post（或您集合的等效按鈕）

  3. 填寫必填欄位：

    • Title - 內容的顯示名稱
    • Slug - URL 識別碼（從標題自動產生，可編輯）

  4. 使用富文字編輯器新增內容

  5. 在側邊欄設定中繼資料：

    • Status - Draft、Published 或 Archived
    • Publication date - 發布時間
    • Categories and tags - 分類法分配

  6. 點擊 Save

內容狀態

每個項目有三種狀態之一：

狀態可見性用途
Draft僅管理端進行中的工作
Published公開已發布內容
Archived僅管理端已封存內容

使用編輯器側邊欄中的下拉選單變更狀態。

富文字編輯器

EmDash 編輯器支援：

  • 標題 - H2 到 H6
  • 格式 - 粗體、斜體、底線、刪除線
  • 清單 - 有序和無序
  • 連結 - 內部和外部
  • 圖片 - 從媒體庫插入
  • 程式碼區塊 - 含語法醒目提示
  • HTML 區塊 - 用於自訂嵌入和小工具的原始 HTML
  • 嵌入 - YouTube、Vimeo、Twitter
  • 區塊 - 透過 /section 命令的可重用內容區塊

斜線命令

輸入 / 存取快速插入命令：

命令操作
/section插入可重用區塊
/image從媒體庫插入圖片
/code插入程式碼區塊
/html插入原始 HTML 區塊

鍵盤快速鍵

操作快速鍵
粗體Ctrl/Cmd + B
斜體Ctrl/Cmd + I
連結Ctrl/Cmd + K
復原Ctrl/Cmd + Z
重做Ctrl/Cmd + Shift + Z
儲存Ctrl/Cmd + S

插入圖片

  1. 點擊工具列中的圖片按鈕

  2. 從媒體庫選擇現有圖片，或上傳新圖片

  3. 新增替代文字（無障礙存取必需）

  4. 調整對齊和大小選項

  5. 點擊 Insert

HTML 區塊

使用 /html 插入原始 HTML 區塊。這對於嵌入第三方小工具、自訂標記或不適合標準區塊類型的內容很有用。從 WordPress 或 Contentful 匯入 EmDash 無法轉換為原生 Portable Text 區塊的標記內容時，也會自動建立 HTML 區塊。

要允許來自其他提供商的 iframe，請在 Portable Text 渲染中覆寫 htmlBlock 元件：

---
// src/components/MyHtmlBlock.astro
import sanitizeHtml from "sanitize-html";

const { node } = Astro.props;

if (!node?.html) {
  return null;
}

const sanitized = sanitizeHtml(node.html, {
  allowedTags: [...sanitizeHtml.defaults.allowedTags, "img", "span", "iframe"],
  allowedAttributes: {
    ...sanitizeHtml.defaults.allowedAttributes,
    "*": ["class", "id", "data-*", "style"],
    iframe: ["src", "width", "height", "frameborder", "allow", "allowfullscreen"],
    img: ["src", "srcset", "alt", "title", "width", "height", "loading"],
  },
  allowedIframeHostnames: [
    "www.youtube.com",
    "player.vimeo.com",
    "iframe.videodelivery.net", // Cloudflare Stream
    // Add your providers here
  ],
});
---

<div class="html-block" set:html={sanitized} />

然後將其傳遞給 <PortableText>：

---
import { PortableText } from "emdash/ui";
import MyHtmlBlock from "../components/MyHtmlBlock.astro";
---

<PortableText
  value={post.data.content}
  components={{ type: { htmlBlock: MyHtmlBlock } }}
/>

編輯內容

  1. 導覽至包含該內容的集合

  2. 點擊要編輯的項目

  3. 進行變更

  4. 點擊 Save

已發布內容的變更會立即出現在您的網站上。

修訂歷史

EmDash 追蹤內容的變更。從編輯器側邊欄存取修訂歷史：

  1. 點擊編輯器側邊欄中的 Revisions

  2. 檢視帶時間戳記的先前版本清單

  3. 點擊修訂以預覽

  4. 點擊 Restore 還原到該版本

批次操作

同時對多個項目執行操作：

  1. 使用核取方塊在內容清單中選擇項目

  2. 點擊 Bulk Actions 下拉選單

  3. 選擇操作：

    • Publish - 將所有選中項目設為已發布
    • Archive - 將所有選中項目設為已封存
    • Delete - 永久刪除選中項目

  4. 確認操作

搜尋和篩選

搜尋

使用搜尋框按標題或內容查找。搜尋不區分大小寫，支援部分比對。

篩選器

按以下條件篩選內容清單：

  • Status - Draft、Published、Archived
  • Date range - 建立或修改日期
  • Author - 內容建立者
  • Taxonomy - 分類或標籤分配

點擊 Clear Filters 重設。

排程發布內容

計劃在未來日期發布內容：

  1. 建立或編輯內容

  2. 將狀態設為 Draft

  3. 將 Publication date 設為未來的日期和時間

  4. 點擊 Save

到達發布日期時，內容會自動發布。

刪除內容

從編輯畫面或內容清單刪除內容：

從編輯器

  1. 開啟要刪除的內容

  2. 點擊工具列中的 Delete

  3. 確認刪除

從清單

  1. 使用核取方塊選擇項目

  2. 點擊 Bulk Actions > Delete

  3. 確認刪除

內容 API

如需程式化存取，請使用 EmDash 管理 API。

建立內容

以下請求建立草稿文章：

POST /_emdash/api/content/posts
Content-Type: application/json
Authorization: Bearer YOUR_API_TOKEN

{
  "title": "My New Post",
  "slug": "my-new-post",
  "content": "<p>Post content here</p>",
  "status": "draft"
}

更新內容

以下請求更新現有文章並發布：

PUT /_emdash/api/content/posts/my-new-post
Content-Type: application/json
Authorization: Bearer YOUR_API_TOKEN

{
  "title": "Updated Title",
  "status": "published"
}

刪除內容

以下請求永久刪除文章：

DELETE /_emdash/api/content/posts/my-new-post
Authorization: Bearer YOUR_API_TOKEN

翻譯內容

當啟用 i18n時，您可以建立任何內容項目的翻譯。

建立翻譯

  1. 開啟要翻譯的內容項目

  2. 在編輯器側邊欄中找到 Translations 面板

  3. 點擊目標語言區域旁的 Translate

  4. 編輯預填內容 — 為新語言調整標題、slug 和正文

  5. 點擊 Save

新翻譯與原始項目關聯，並以草稿狀態開始。翻譯完成後可獨立發布。

在翻譯之間切換

Translations 面板顯示所有設定的語言區域。點擊任何現有翻譯旁的 Edit 直接導覽。目前語言區域以勾選標記顯示。

語言區域篩選

在內容清單中，使用工具列中的語言區域下拉選單按語言篩選項目。每個項目在專用欄中顯示其語言區域。

有關設定、查詢和語言切換器的完整詳情，請參閱國際化指南。

下一步