朋友們，老實(shí)說，我一直在尋找一個靜態(tài)網(wǎng)站的體面內(nèi)容管理系統(tǒng)，大約只要我們都稱它們?yōu)椤办o態(tài)站點(diǎn)”。

我知道，我知道：有大量的內(nèi)容管理系統(tǒng)選項(xiàng)可用，儘管我已經(jīng)測試了幾個，但實(shí)際上沒有一個，是嗎？怪異的定價模型，艱難的定制，有些甚至最終成為一個不可思議的事情。

另外，我真的很喜歡與諸如Astro或Elevent的網(wǎng)站生成器建造，但是對於許多“非技術(shù)人員”的人來說，管理內(nèi)容的手段不那麼理想。

對內(nèi)容管理系統(tǒng)的一些期望可能包括：

• 易於使用的：最重要的功能，為什麼您可能首先選擇使用內(nèi)容管理系統(tǒng)。
• 最小要求：看，我只是想更新一些HTML，我不想考慮數(shù)據(jù)庫表太多。
• 協(xié)作：當(dāng)多個貢獻(xiàn)者一起工作時，CMS工具的效果最佳，可能不知道Markdown或GitHub的貢獻(xiàn)者。
• 可自定義：沒有網(wǎng)站是相同的，因此我們需要能夠?yàn)椴煌愋偷膬?nèi)容製作自定義字段。

我要說的不是很長的要求。甚至相當(dāng)合理。這就是為什麼我很樂意發(fā)現(xiàn)頁面CMS的原因。

根據(jù)其自己的主頁，頁面CMS是“靜態(tài)站點(diǎn)生成器的無精神CM”，我將證明這一點(diǎn)。 CMS很大程度上是由單個開發(fā)人員Ronan Berder開發(fā)的，但是開源的，並且接受Github上的拉動請求。

請?jiān)谄渌鸆MS工具中找到許多“好零件”，以及單個配置文件，頁面CMS將事物結(jié)合到光滑的用戶界面中。

頁面CMS包含許多自定義選項(xiàng)，您可以上傳媒體，製作可編輯的文件並創(chuàng)建整個內(nèi)容集合。此外，內(nèi)容可以具有各種不同的字段，檢查文檔中是否有支持類型的完整列表以及完全自定義的字段。

實(shí)際上，沒有一個“後端”需要擔(dān)心，因?yàn)閮?nèi)容存儲在git存儲庫中。頁面CMS為人們提供了管理存儲庫中內(nèi)容的能力，而無需真正知道如何使用git，我認(rèn)為這很整潔。

用戶身份驗(yàn)證有兩種方法：貢獻(xiàn)者可以使用github帳戶登錄，也可以通過電子郵件邀請貢獻(xiàn)者，在那裡他們將收到無密碼的“魔術(shù)鏈接”登錄URL。這很好，因?yàn)镚ithub帳戶在開發(fā)世界之外不太常見，我知道。

哦，並且頁面CMS具有非常便宜的進(jìn)入障礙，因?yàn)樗梢悦赓M(fèi)使用。

頁面CMS和Astro內(nèi)容集

我使用Astro的默認(rèn)博客啟動器在GitHub上使用Astro和Pages CMS創(chuàng)建了一個存儲庫，並公開提供了該存儲庫，因此請隨時克隆並遵循。

我一直是Astro的粉絲，並且頁面CMS與Astro的內(nèi)容集合功能同時運(yùn)行良好。內(nèi)容集合使整個Astro的數(shù)據(jù)量很容易獲得，因此您可以在Astro頁面中進(jìn)行水合。這些數(shù)據(jù)網(wǎng)可以來自不同的來源，例如第三方API，但通常是Markdown文件的目錄。猜猜哪些頁面CMS真的很擅長？管理標(biāo)記文件目錄！

內(nèi)容收集是通過集合配置文件設(shè)置的。在項(xiàng)目中查看src/content.config.ts文件，在這裡我們定義一個名為博客的內(nèi)容集合：

從“ Astro/Loaders”中導(dǎo)入{Glob};
從'astro：content'導(dǎo)入{decteCollection，z};

const blog = deCollection（{{
//在`src/content/blog/`目錄中加載降價。
loader：glob（{base：'./src/content/blog'，模式：'**/*。md'}），
  //使用模式
  架構(gòu)：z.Object（{{
    標(biāo)題：Z.String（），
   描述：z.String（），
    //將字符串轉(zhuǎn)換為日期對象
    PubDate：z.coerce.date（），
    更新：z.coerce.date（）?？蛇x（），
    英雄圖：z.string（）?？蛇x（），
  }），
}）;

導(dǎo)出const collections = {blog};

博客內(nèi)容集合檢查/src/content/blog目錄，以匹配**/*。 MD文件類型，標(biāo)記文件格式。模式屬性是可選的，但是，Astro通過ZOD提供了有用的類型檢查功能，可確保頁面CMS保存的數(shù)據(jù)按預(yù)期在您的Astro站點(diǎn)中工作。

頁面CMS配置

好吧，既然Astro知道在哪裡尋找博客內(nèi)容，讓我們看一下頁面CMS配置文件，.pages.config.yml：

內(nèi)容：
   - 名稱：博客
    標(biāo)籤：博客
    路徑：SRC/Content/Blog
    文件名：'{年}  -  {月}  -  {day}  -  {fields.title} .md'
    類型：集合
    看法：
      田地：[英制，標(biāo)題，PubDate]
    字段：
       - 名稱：標(biāo)題
        標(biāo)籤：標(biāo)題
        類型：字符串

       - 名稱：描述
        標(biāo)籤：描述
        類型：文字

       - 名稱：PubDate
        標(biāo)籤：出版日期
        類型：日期
        選項(xiàng)：
          格式：mm/dd/yyyy

       - 名稱：UpdatedDate
        標(biāo)籤：最後更新日期
        類型：日期
        選項(xiàng)：
          格式：mm/dd/yyyy

       - 名稱：英雄圖
        標(biāo)籤：英雄圖像
        類型：圖像

       - 名稱：身體
        標(biāo)籤：身體
        類型：富文本

   - 名稱：站點(diǎn)安裝
    標(biāo)籤：站點(diǎn)設(shè)置
    路徑：src/config/site.json
    類型：文件
    字段：
       - 名稱：標(biāo)題
        標(biāo)籤：網(wǎng)站標(biāo)題
        類型：字符串

       - 名稱：描述
        標(biāo)籤：網(wǎng)站描述
        類型：字符串
        描述：將用於任何頁面，無描述。

       - 名稱：URL
        標(biāo)籤：網(wǎng)站URL
        類型：字符串
        模式： ^（https？：\/\/）？ （www \。）？ [a-za-z0-9.-9.-] \。 [a-za-z] {2，}（\/[ ^\ s]*）？ $

       - 名稱：封面
        標(biāo)籤：預(yù)覽圖像
        類型：圖像
        描述：社交網(wǎng)絡(luò)社交預(yù)覽中使用的圖像（例如Facebook，Twitter ...）

媒體：
  輸入：公共/媒體
  輸出： /媒體

那裡有很多事情發(fā)生，但是在內(nèi)容部分內(nèi)，讓我們放大博客對象。

 - 名稱：博客
  標(biāo)籤：博客
  路徑：SRC/Content/Blog
  文件名：'{年}  -  {月}  -  {day}  -  {fields.title} .md'
  類型：集合
  看法：
    田地：[英制，標(biāo)題，PubDate]
  字段：
     - 名稱：標(biāo)題
      標(biāo)籤：標(biāo)題
      類型：字符串

     - 名稱：描述
      標(biāo)籤：描述
      類型：文字

     - 名稱：PubDate
      標(biāo)籤：出版日期
      類型：日期
      選項(xiàng)：
        格式：mm/dd/yyyy

     - 名稱：UpdatedDate
      標(biāo)籤：最後更新日期
      類型：日期
      選項(xiàng)：
        格式：mm/dd/yyyy

     - 名稱：英雄圖
      標(biāo)籤：英雄圖像
      類型：圖像

     - 名稱：身體
      標(biāo)籤：身體
      類型：富文本

我們可以將頁面CMS指向我們想要使用路徑屬性保存降價文件的目錄，將其匹配到/src/content/blog/location Astro尋找內(nèi)容。

路徑：SRC/Content/Blog

對於文件名，我們可以提供一個模式模板，當(dāng)頁面CMS將文件保存到內(nèi)容集合目錄時。在這種情況下，使用fields.title來引用標(biāo)題字段?？梢酝ㄟ^多種不同的方式自定義文件名，以適合您的方案。

文件名：'{年}  -  {月}  -  {day}  -  {fields.title} .md'

該類型屬性告訴PAGES CMS這是一個文件集，而不是一個可編輯的文件（我們將在稍後進(jìn)行）。

類型：集合

在我們的Astro Content Collection配置中，我們定義了我們的博客集合，希望文件包含一些元數(shù)據(jù)，例如：標(biāo)題，描述，PubDate和更多屬性。

我們可以在我們的頁面CMS博客集合中將這些要求映射為字段?？梢詾槟占臄?shù)據(jù)類型定制每個字段。在這裡，我將這些字段與Astro Blog啟動器中的默認(rèn)Markdown FrontMatter相匹配。

字段：
   - 名稱：標(biāo)題
    標(biāo)籤：標(biāo)題
    類型：字符串

   - 名稱：描述
    標(biāo)籤：描述
    類型：文字

   - 名稱：PubDate
    標(biāo)籤：出版日期
    類型：日期
    選項(xiàng)：
      格式：mm/dd/yyyy

   - 名稱：UpdatedDate
    標(biāo)籤：最後更新日期
    類型：日期
    選項(xiàng)：
      格式：mm/dd/yyyy

   - 名稱：英雄圖
    標(biāo)籤：英雄圖像
    類型：圖像

   - 名稱：身體
    標(biāo)籤：身體
    類型：富文本

現(xiàn)在，每次我們在第2頁CMS中創(chuàng)建一個新的博客項(xiàng)目時，我們都可以填寫這些字段，從而匹配Astro的預(yù)期模式。

除了集合內(nèi)容外，頁面CMS還使您可以管理可編輯的文件，這對各種內(nèi)容非常有用：站點(diǎn)寬變量，功能標(biāo)誌甚至可編輯的導(dǎo)航。

看一下站點(diǎn)分配對象，在這裡我們將類型設(shè)置為文件，路徑包括文件名site.json。

 - 名稱：站點(diǎn)安裝
  標(biāo)籤：站點(diǎn)設(shè)置
  路徑：src/config/site.json
  類型：文件
  字段：
     - 名稱：標(biāo)題
      標(biāo)籤：網(wǎng)站標(biāo)題
      類型：字符串

     - 名稱：描述
      標(biāo)籤：網(wǎng)站描述
      類型：字符串
      描述：將用於任何頁面，無描述。

     - 名稱：URL
      標(biāo)籤：網(wǎng)站URL
      類型：字符串
      模式： ^（https？：\/\/）？ （www \。）？ [a-za-z0-9.-9.-] \。 [a-za-z] {2，}（\/[ ^\ s]*）？ $

     - 名稱：封面
      標(biāo)籤：預(yù)覽圖像
      類型：圖像
      描述：社交網(wǎng)絡(luò)社交預(yù)覽中使用的圖像（例如Facebook，Twitter ...）

我包含的字段是常見的網(wǎng)站設(shè)置，例如網(wǎng)站的標(biāo)題，描述，URL和封面圖像。

說到圖像，我們可以告訴Pages CMS在哪裡存儲媒體，例如圖像和視頻。

媒體：
  輸入：公共/媒體
  輸出： /媒體

輸入屬性說明了在我們項(xiàng)目中的 /公共 /媒體目錄中存儲文件的位置。

輸出屬性是一個有用的小功能，可方便地替換文件路徑，專門用於可能需要特定配置的工具。例如，Astro在引擎蓋下使用Vite，Vite已經(jīng)知道公共目錄，並抱怨它是否包含在文件路徑中。取而代之的是，我們可以設(shè)置輸出屬性，因此頁面CMS僅在內(nèi)部 /媒體目錄開始指向圖像路徑位置。

要查看我的意思，請查看SRC/Content/Blog/文件夾中的測試文章：

 ---
標(biāo)題：“測試帖子”
描述：“這是一些基本的標(biāo)記語法的示例，這些語法可以在Astro中編寫Markdown內(nèi)容時使用?！?PubDate：05/03/2025
英雄圖：'/media/blog-placeholder-1.jpg'
---

現(xiàn)在，屬性正確指向/媒體/...而不是/public/Media/...。

就配置而言，頁面CMS可以簡單或必要的複雜。您可以根據(jù)需要添加盡可能多的集合或可編輯文件，並為每種類型的內(nèi)容自定義字段。這為您提供了創(chuàng)建網(wǎng)站的靈活性！

連接到頁面CMS

現(xiàn)在，我們已經(jīng)設(shè)置了Astro站點(diǎn)，並且一個.pages.config.yml文件，我們可以將網(wǎng)站連接到頁面CMS在線應(yīng)用程序。作為控制存儲庫的開發(fā)人員，瀏覽到https://app.pagescms.org/並使用您的github帳戶登錄。

應(yīng)該向您提出一些有關(guān)權(quán)限的問題，您可能需要在訪問所有存儲庫或特定的訪問權(quán)限之間進(jìn)行選擇。就個人而言，我選擇僅訪問一個存儲庫，在這種情況下，這是我的Astro-pages-cms-template repo。

在提供對存儲庫的訪問權(quán)限後，請返回頁面CMS應(yīng)用程序，您將在“打開項(xiàng)目”標(biāo)題下看到項(xiàng)目。

單擊“打開鏈接”將帶您進(jìn)入網(wǎng)站的儀表板，我們將能夠在其中更新到我們的網(wǎng)站。

創(chuàng)建內(nèi)容

看看我們網(wǎng)站的儀表板，我們將在左側(cè)看到導(dǎo)航，並帶有一些熟悉的東西。

• 博客是我們在.pages.config.yml文件中設(shè)置的集合，這將是我們可以在博客中添加新條目的地方。
• 站點(diǎn)設(shè)置是我們用來更改網(wǎng)站範(fàn)圍變量的可編輯文件。
• 媒體是我們的圖像和其他內(nèi)容所在的地方。
• 設(shè)置是我們能夠直接編輯.pages.config.yml文件的位置。
• 合作者允許我們邀請其他人向網(wǎng)站貢獻(xiàn)內(nèi)容。

我們可以通過單擊右上角的“添加輸入”按鈕來創(chuàng)建新的博客文章

在這裡，我們可以填寫博客內(nèi)容的所有字段，然後點(diǎn)擊“保存”按鈕。

保存後，頁面CMS將創(chuàng)建Markdown文件，將文件存儲在適當(dāng)?shù)哪夸浿校会嶙詣訉⒏挠渺段覀兊拇鎯?。這就是頁面CMS幫助我們管理內(nèi)容的方式，而無需直接使用git。

自動部署

唯一要做的就是通過您選擇的服務(wù)提供商來設(shè)置自動部署。 Astro與Netlify，CloudFlare頁面和Vercel等提供商有集成，但是可以在您可以運(yùn)行節(jié)點(diǎn)應(yīng)用程序的任何地方託管。

Astro通常非?？焖俚貥?gòu)建（感謝Vite），因此，儘管網(wǎng)站更新不會立即進(jìn)行，但它們?nèi)匀缓芸炀涂梢圆渴稹Ｈ绻木W(wǎng)站設(shè)置為使用Astro的服務(wù)器端渲染功能，而不是完全靜態(tài)的站點(diǎn)，則更改可能會更快地部署。

總結(jié)

使用模板作為參考，我們檢查了Astro內(nèi)容集合如何與頁面CMS一起工作。我們還學(xué)習(xí)瞭如何將我們的項(xiàng)目存儲庫連接到頁面CMS應(yīng)用程序，以及如何通過儀表板進(jìn)行內(nèi)容更新。最後，如果您能夠，請不要忘記設(shè)置自動部署，因此內(nèi)容會很快發(fā)布。

以上是使用頁面CMS進(jìn)行靜態(tài)站點(diǎn)內(nèi)容管理的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！