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

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

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

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

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

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

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

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

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

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

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

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

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

我使用Astro的默認(rèn)博客啟動(dòng)器在GitHub上使用Astro和Pages CMS創(chuàng)建了一個(gè)存儲(chǔ)庫(kù)，並公開(kāi)提供了該存儲(chǔ)庫(kù)，因此請(qǐng)隨時(shí)克隆並遵循。

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

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

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

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

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

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

頁(yè)面CMS配置

好吧，既然Astro知道在哪裡尋找博客內(nèi)容，讓我們看一下頁(yè)面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)站描述
        類型：字符串
        描述：將用於任何頁(yè)面，無(wú)描述。

       - 名稱：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)，讓我們放大博客對(duì)象。

 - 名稱：博客
  標(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)籤：身體
      類型：富文本

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

路徑：SRC/Content/Blog

對(duì)於文件名，我們可以提供一個(gè)模式模板，當(dāng)頁(yè)面CMS將文件保存到內(nèi)容集合目錄時(shí)。在這種情況下，使用fields.title來(lái)引用標(biāo)題字段。可以通過(guò)多種不同的方式自定義文件名，以適合您的方案。

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

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

類型：集合

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

我們可以在我們的頁(yè)面CMS博客集合中將這些要求映射為字段?？梢詾槟占臄?shù)據(jù)類型定制每個(gè)字段。在這裡，我將這些字段與Astro Blog啟動(dòng)器中的默認(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)在，每次我們?cè)诘?頁(yè)CMS中創(chuàng)建一個(gè)新的博客項(xiàng)目時(shí)，我們都可以填寫這些字段，從而匹配Astro的預(yù)期模式。

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

看一下站點(diǎn)分配對(duì)象，在這裡我們將類型設(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)站描述
      類型：字符串
      描述：將用於任何頁(yè)面，無(wú)描述。

     - 名稱：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 ...）

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

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

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

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

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

要查看我的意思，請(qǐng)查看SRC/Content/Blog/文件夾中的測(cè)試文章：

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

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

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

連接到頁(yè)面CMS

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

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

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

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

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

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

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

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

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

保存後，頁(yè)面CMS將創(chuàng)建Markdown文件，將文件存儲(chǔ)在適當(dāng)?shù)哪夸浿?，然後自?dòng)將更改用於我們的存儲(chǔ)庫(kù)。這就是頁(yè)面CMS幫助我們管理內(nèi)容的方式，而無(wú)需直接使用git。

自動(dòng)部署

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

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

總結(jié)

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

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