Cabloy-CMS：動靜結合，解決Hexo痛點問題

zhennann發表於2018-10-13
Hexo

介紹

Cabloy-CMS是什麼

Cabloy-CMS是基於CabloyJS全棧業務開發框架開發的“動靜結合”的CMS，可以快速構建企業網站、部落格、社群、商城等Web應用。

線上演示

zhennann.com

特性

Cabloy-CMS受Hexo啟發，採用“靜態+動態”的架構，彌補了Hexo許多功能上的不足，主要特性如下:

  • 內建多站點、多語言支援
  • 不同語言可單獨設定主題
  • 內建SEO優化，自動生成Sitemap檔案
  • 文章線上撰寫、釋出
  • 文章釋出時實時渲染靜態頁面，不必整站輸出，提升整體效能
  • 內建文章檢視計數器
  • 內建評論系統
  • 內建全文檢索
  • 文章可新增附件
  • 自動合併並最小化CSS和JS
  • JS支援ES6語法，並在合併時自動babel編譯
  • 首頁圖片延遲載入，自動匹配裝置畫素比
  • 除錯便捷

架構 - 動靜結合

動態部分

Cabloy-CMS基於CabloyJS全棧業務開發框架，提供了強大的文章後臺管理系統。CMS當中經常變動的功能均通過“動態部分”實現，並提供API供“靜態部分”呼叫。

靜態部分

Cabloy-CMS將“首頁”和“文章”等靜態元素實時渲染成靜態檔案，既滿足了SEO的需求，同時也提升了訪問效能。

此外，“靜態部分”通過Ajax訪問“動態部分”提供的API，可實現豐富的頁面功能。

快速開始

安裝EggBorn

$ npm install -g egg-born
複製程式碼

新建Cabloy專案

$ egg-born cabloy-cms --type=cabloy
$ cd cabloy-cms
$ npm i
複製程式碼

安裝CMS模組

$ npm i egg-born-module-a-cms
複製程式碼

安裝CMS主題模組

$ npm i egg-born-module-cms-themeblog
複製程式碼

配置MySQL

測試環境

src/backend/config/config.unittest.js

  // mysql
  config.mysql = {
    clients: {
      // donnot change the name
      __ebdb: {
        host: '127.0.0.1',
        port: '3306',
        user: 'root',
        password: '',
        database: 'sys', // donnot change the name
      },
    },
  };
複製程式碼

開發環境

src/backend/config/config.local.js

  // mysql
  config.mysql = {
    clients: {
      // donnot change the name
      __ebdb: {
        host: '127.0.0.1',
        port: '3306',
        user: 'root',
        password: '',
        database: 'sys', // recommended
      },
    },
  };
複製程式碼

生產環境

src/backend/config/config.prod.js

  // mysql
  config.mysql = {
    clients: {
      // donnot change the name
      __ebdb: {
        host: '127.0.0.1',
        port: '3306',
        user: 'root',
        password: '',
        database: '{{name}}',
      },
    },
  };
複製程式碼

執行

啟動後端服務

$ npm run dev:backend
複製程式碼

啟動前端服務

$ npm run dev:front
複製程式碼

進入後臺管理頁面

引數配置

引數覆蓋規則

語言配置 > 站點配置 > 預設配置

  • 語言配置：由於支援多語言，因此不同的語言可以配置不同的引數
  • 站點配置：配置與語言無關的全域性引數
  • 預設配置：會因使用不同的主題而擁有不同的引數

站點配置

進入設定/cms頁面

Cabloy-CMS：動靜結合，解決Hexo痛點問題

點選站點/配置，進入站點配置頁面

Cabloy-CMS：動靜結合，解決Hexo痛點問題

點選右側的“ ！”按鈕，檢視預設配置

Cabloy-CMS：動靜結合，解決Hexo痛點問題

從預設配置拷貝需要修改的屬性到站點配置頁面，並修改成所需要的值。

在這裡，我們修改如下引數:

{
 "host": {
    "url": "http://example.com",
    "rootPath": ""
  },
  "language": {
    "default": "zh-cn",
    "items": "zh-cn,en-us"
  },
  "themes": {
    "zh-cn": "cms-themeblog",
    "en-us": "cms-themeblog"
  },
  "plugins": {
    "cms-plugintrack": {
      "track": {
        "google": "",
        "baidu": "",
        "qq": ""
      }
    }
  }
}
複製程式碼
  • host
    • url: 實際部署時的站點域名
    • rootPath: 根路徑，一般設定
  • languange
    • default: 預設語言。 預設語言渲染的靜態檔案位於站點“根目錄”，其他語言位於站點“根目錄/[語言]”
    • items: 支援的語言列表，用逗號分隔
  • themes
    • zh-cn: 語言所使用的主題
    • en-us: 語言所使用的主題
  • plugins
    • cms-plugintrack
      • track
        • google: google統計的跟蹤程式碼
        • baidu: 百度統計的跟蹤程式碼
        • qq: 騰訊統計的跟蹤程式碼

語言配置

可以依次對不同的語言配置引數，這裡從略

構建

為了提升渲染速度，在發表文章時，僅對“當前文章”和“首頁”進行渲染，其他靜態檔案不變。所以，當設計到整站元素變更時，需要進行“整站渲染”。

如何操作

進入設定/cms頁面

Cabloy-CMS：動靜結合，解決Hexo痛點問題

  • 整站構建：“整站引數”變更時
  • 語言構建：“語言引數”變更時

預覽

可點選“預覽”，直接檢視渲染效果

Cabloy-CMS：動靜結合，解決Hexo痛點問題

此時生成的網址沒有內容，接下來可以建立目錄，然後發表文章

目錄

Cabloy-CMS有以下約定：

  • 所有目錄必屬於某一個“語言”
  • 所有文章必屬於某一個“目錄”

有的CMS工具，文章可以分屬多個“目錄”，其實這種特性可以用“標籤”來解決

如何操作

進入設定/cms頁面，點選語言的“目錄”按鈕，新增“目錄”，效果如下：

Cabloy-CMS：動靜結合，解決Hexo痛點問題

此時，可以進行“語言構建”，並預覽效果

文章

Cabloy-CMS後臺提供了完備的文章管理功能。當文章提交發表時，實時渲染成靜態檔案，並寫入Sitemap檔案

如何操作

基本屬性

在後臺首頁，點選新建文章，進入文章編輯頁面，依次輸入或選擇如下屬性值：

  • 原子名稱：也就是文章標題。原子是Cabloy對基礎業務資料的通用定義
  • 語言：
  • 目錄：
  • 標籤：支援多標籤，用逗號隔開

Cabloy-CMS：動靜結合，解決Hexo痛點問題

內容

Cabloy-CMS採用開源元件mavonEditor，實現了markdown格式的編輯和預覽效果

請輸入以下內容，並檢視效果

![5775337-414d62d7c1e152f2](http://zhennann.cabloy.org/api/a/file/file/download/00ca2e89235b47bba5b7e7580fc71834.jpg)

## 一天到晚的魚兒不停遊

曾經嘲諷

魚兒是被詛咒過的

一天到晚的不停遊

here and there

here and there



如今

安然做一條魚兒

一天到晚的不停遊

here and there

here and there



曾經的嘲諷

終會落在自己身上

here and there

here and there



甚好甚好


複製程式碼

提交發布

Cabloy中所有的原子資料均有兩個狀態：草稿、正常。草稿狀態下只有建立人能訪問和編輯，通過提交轉入正常狀態，其他使用者才能訪問。

文章也不例外，只有提交進入正常狀態，才會進行渲染。

當然，如果文章已是正常狀態，那麼再次編輯並儲存時，也會進行渲染。

提交併預覽

Cabloy-CMS：動靜結合，解決Hexo痛點問題

首頁

Cabloy-CMS：動靜結合，解決Hexo痛點問題

文章頁

Cabloy-CMS：動靜結合，解決Hexo痛點問題

部署

例項與子域名

Cabloy支援多例項，例項與網站子域名一一對應，不同例項的資料完全隔離。比如instance1.cabloy.org和instance2.cabloy.org

在除錯階段，Cabloy啟用了一個預設例項，但在部署階段，需要規劃例項與子域名

在CMS應用中，把域名example.com留給靜態檔案，需要給後臺管理系統分配一個子域名，如admin.example.com

多站點支援

由於一個例項對應一個CMS應用，通過多例項就可以支援多站點了

例項配置

編輯檔案：src/backend/config/config.prod.js

// instances
config.instances = [
  { subdomain: 'admin', password: '', title: '',
    meta: {
      jsonp: { whiteList: 'example.com' },
    },
  },
];
複製程式碼
  • subdomain: 子域名
  • password: 例項中使用者root的訪問密碼
  • title: 網站標題
  • meta.jsonp.whiteList: 白名單，只有白名單中的域名可以通過ajax訪問後臺API介面

構建前端程式碼

$ npm run build:front
複製程式碼

啟動後端服務

$ npm run start:backend
複製程式碼
  • 別忘了建立MySQL資料庫，並配置src/backend/config/config.prod.js

停止後端服務

$ npm run stop:backend
複製程式碼

後端服務啟動引數配置

編輯檔案：build/config.js

// backend
const backend = {
  port: 7002,
  hostname: '127.0.0.1',
};
複製程式碼

nginx配置

強烈建議使用nginx託管前端靜態資源，並反向代理後端服務

在專案根目錄已經生成了兩個nginx配置檔案，分別對應Cabloy-CMS的“動態部分”和“靜態部分”，請根據實際情況修改

動態部分：nginx.conf

server {

  listen 80;
  server_name admin.example.com;
  set $node_port 7002;

  root /Users/wind/Documents/temp/cabloy-cms/dist;

  location /public {
    root /Users/wind/cabloy/cabloy-cms;
    internal;
  }

  location  /api/ {
    proxy_http_version 1.1;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass http://127.0.0.1:$node_port$request_uri;
    proxy_redirect off;
  }

}
複製程式碼

靜態部分：nginx-cms.conf

server {

  listen 80;
  server_name example.com;

  root /Users/wind/cabloy/cabloy-cms/public/1/cms/dist;

}
複製程式碼

GitHub貢獻

有任何疑問，歡迎提交 issue！

相關文章