# Headless CMS 的前端應用 / 楊佳安 (Anna 佳安)

{%hackmd @ModernWeb/SyA2U6SmT %}

> 共筆請從這開始

<iframe src="https://www.slideshare.net/slideshow/embed_code/key/GClUCjMegXJ6WG?hostedIn=slideshare&page=upload" width="680" height="432" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

## 流程

- 什麼是 CMS 內容管理系統
- CMS 與 headless cms
- 一起看code

## 什麼是內容管理系統

CMS - Content Management System

CMS管理呈現在網頁上的數位資源，包括頁面架構、文字、多媒體等等。協助公司管理數位內容。（擷取自Oracle官網）

廣義來說，CMS的內容可以高度客製化，也可以只提供簡單的內容改動，從可以新增文章改動文章的部落格，到整個網站由發佈者自製的Wix Wordpress等。

CMS Market Share Report: Latest Trends and Usage Stats
- [2023's CMS Market Share Report - Latest Trends and Usage Stats](https://www.wpbeginner.com/research/cms-market-share-report-latest-trends-and-usage-stats/)

* 2011年，約有76%的網站是手工編碼的。到了2022年，這個數字下降到約33%。

* 目前，超過7600萬個網站使用內容管理系統(CMS)

* 當我們根據流量來看前100萬個網站時，超過900,000個網站使用CMS。

傳統的開發流程
- 客戶：我們需要...內容
- 開發者：
- 使用者：

> 一氣呵成的開發方式，不適合常常需要新增的重複頁面、資訊

如果用 CMS 製作與討論
- 開發者
- 根據之前討論的結果，做出了可以更改內容的頁面版型等等
- 內容生產者
- 自己想加什麼就加什麼，上架新產品，緊急上架新的促銷頁面。
- 訪客

## CMS & Headless CMS

### CMS 結構 - 版面要素

* Template - 版面
* Page - 個別頁面
* Slot - 放置圖像文字的空間
* Component - 元件

### CMS 結構 - 基本頁面及前端(ex: 電商)

- 純內容頁面
- 資源的清單頁面
- 資源的細節頁面

其他：會員管理、購物車、訂單系統...

### Headless CMS
Headless - 後端有內容資訊，但沒有Styling及主題，Styling部分由前端決定

Spartacus

### CMS 結構 & Headless API

### Headless CMS 好處

好處
- 支援多個前端平台
- 再加上有前後分離的好處

## Code Demo

- https://github1s.com/sap/spartacus

Adapter 適配器模式
Converter 轉換器模式

connector

## 開發的多重挑戰

### 案例 - Megamenu

- CMS:
- API 資料通過重重的重組轉換
- 01 動畫與UI
- 02 SEO
- 階層結構可能會和UI衝突 -> 使用 noscript
- 03 無障礙
- 在桌面版使用 CSS 隱藏手機版 -> DOM Tree 依然存在，造成 HTML 結構中有兩個重複的 Menu
- 改成使用 JavaScript 渲染 Menu -> 一定程度拉低 Performance
- 04 SSR and Hydration
- 需要做裝置偵測，才能知道回傳的HTML該根據手機版或桌面版

### 全局觀察，建立基礎架構、對 UI 做取捨

- 一開始做全局考量規劃 DOM 與 UI
- 從需求面與UI開始就讓前端參與、回饋、做出需要的修正
- 當客製化CMS比例越高，使用JS處理內容資源(Content)的比就越吃重

## CMS 下開發流程的注意事項

- 客戶溝通客製化的部分
- 提供給內容 publisher 的文件
- 一個元件所提供給Publisher改動的資料，需要包含在該元件的屬性中

## 內容管理系統的未來

- Low code
- 經由客製化的努力，讓平台趨近於 Low Code，對內容生產者的學習成本產生？？？
- AI
- 圖像辨識、自然語言理解、自然語言處理

---
> 聊天室

右邊的圖也太搶眼ＸＤＤ
藍衣男看起來很屌

隕石開發