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

介紹

Cabloy-CMS是什么

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

在線演示

https://zhennann.me

特性

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

進入后臺管理頁面

• 網址：http://localhost:9092/
• 用戶名：root
• 密碼：123456

參數配置

參數覆蓋規則

語言配置 > 站點配置 > 缺省配置

• 語言配置：由于支持多語言，因此不同的語言可以配置不同的參數
• 站點配置：配置與語言無關的全局參數
• 缺省配置：會因使用不同的主題而擁有不同的參數

站點配置

進入設置/cms頁面

cdn.xitu.io/2018/10/14/1666e7b41146e7cc?w=852&h=566&f=png&s=32379">

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

點擊右側的“ ！”按鈕，查看缺省配置

從缺省配置拷貝需要修改的屬性到站點配置頁面，并修改成所需要的值。

在這里，我們修改如下參數:

{
 "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有以下約定：

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

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

如何操作

進入設置/cms頁面，點擊語言的“目錄”按鈕，添加“目錄”，效果如下：

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

文章

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

如何操作

基本屬性

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

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

內容

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支持多實例，實例與網站子域名一一對應，不同實例的數據完全隔離。比如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！