介紹

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頁面

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

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

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

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

{
 "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後臺提供了完備的文章管理功能。當文章提交發表時，實時渲染成靜態文件，並寫入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！

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

介紹

Cabloy-CMS是什麼

在線演示

特性

架構 - 動靜結合

動態部分

靜態部分

快速開始

安裝EggBorn

新建Cabloy項目

安裝CMS模塊

安裝CMS主題模塊

配置MySQL

測試環境

開發環境

生成環境

運行

進入後臺管理頁面

參數配置

參數覆蓋規則

站點配置

語言配置

構建

如何操作

預覽

目錄

如何操作

文章

如何操作

基本屬性

內容

提交發布

提交併預覽

部署

實例與子域名

多站點支持

實例配置

構建前端代碼

啓動後端服務

停止後端服務

後端服務啓動參數配置

nginx配置

動態部分：nginx.conf

靜態部分：nginx-cms.conf

GitHub貢獻