Cabloy-CMS：動靜結合，解決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
複製代碼

進入後臺管理頁面

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

參數配置

參數覆蓋規則

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

• 語言配置：因爲支持多語言，所以不一樣的語言能夠配置不一樣的參數
• 站點配置：配置與語言無關的全局參數
• 缺省配置：會因使用不一樣的主題而擁有不一樣的參數

站點配置

進入設置/cms頁面

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

點擊右側的「 ！」按鈕，查看缺省配置

從缺省配置拷貝須要修改的屬性到站點配置頁面，並修改爲所須要的值。

在這裏，咱們修改以下參數:

{
 "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！