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

介紹

Cabloy-CMS是什麼

Cabloy-CMS是基於CabloyJS全棧業務開發框架開發的「動靜結合」的CMS，能夠快速構建企業網站、博客、社區、商城等Web應用。

在線演示

https://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！