Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題

介紹

Cabloy-CMS是什么

Cabloy-CMS是基于CabloyJS全棧業(yè)務(wù)開發(fā)框架開發(fā)的“動(dòng)靜結(jié)合”的CMS，可以快速構(gòu)建企業(yè)網(wǎng)站、博客、社區(qū)、商城等Web應(yīng)用。

在線演示

https://zhennann.me

特性

Cabloy-CMS受Hexo啟發(fā)，采用“靜態(tài)+動(dòng)態(tài)”的架構(gòu)，彌補(bǔ)了Hexo許多功能上的不足，主要特性如下:

• 內(nèi)置多站點(diǎn)、多語(yǔ)言支持
• 不同語(yǔ)言可單獨(dú)設(shè)置主題
• 內(nèi)置SEO優(yōu)化，自動(dòng)生成Sitemap文件
• 文章在線撰寫、發(fā)布
• 文章發(fā)布時(shí)實(shí)時(shí)渲染靜態(tài)頁(yè)面，不必整站輸出，提升整體性能
• 內(nèi)置文章查看計(jì)數(shù)器
• 內(nèi)置評(píng)論系統(tǒng)
• 內(nèi)置全文檢索
• 文章可添加附件
• 自動(dòng)合并并最小化CSS和JS
• JS支持ES6語(yǔ)法，并在合并時(shí)自動(dòng)babel編譯
• 首頁(yè)圖片延遲加載，自動(dòng)匹配設(shè)備像素比
• 調(diào)試便捷

架構(gòu) - 動(dòng)靜結(jié)合

動(dòng)態(tài)部分

Cabloy-CMS基于CabloyJS全棧業(yè)務(wù)開發(fā)框架，提供了強(qiáng)大的文章后臺(tái)管理系統(tǒng)。CMS當(dāng)中經(jīng)常變動(dòng)的功能均通過(guò)“動(dòng)態(tài)部分”實(shí)現(xiàn)，并提供API供“靜態(tài)部分”調(diào)用。

靜態(tài)部分

Cabloy-CMS將“首頁(yè)”和“文章”等靜態(tài)元素實(shí)時(shí)渲染成靜態(tài)文件，既滿足了SEO的需求，同時(shí)也提升了訪問(wèn)性能。

此外，“靜態(tài)部分”通過(guò)Ajax訪問(wèn)“動(dòng)態(tài)部分”提供的API，可實(shí)現(xiàn)豐富的頁(yè)面功能。

快速開始

安裝EggBorn

$ npm install -g egg-born

新建Cabloy項(xiàng)目

$ 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

測(cè)試環(huán)境

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
      },
    },
  };

開發(fā)環(huán)境

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
      },
    },
  };

生成環(huán)境

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}}',
      },
    },
  };

運(yùn)行

啟動(dòng)后端服務(wù)

$ npm run dev:backend

啟動(dòng)前端服務(wù)

$ npm run dev:front

進(jìn)入后臺(tái)管理頁(yè)面

• 網(wǎng)址：http://localhost:9092/
• 用戶名：root
• 密碼：123456

參數(shù)配置

參數(shù)覆蓋規(guī)則

語(yǔ)言配置 > 站點(diǎn)配置 > 缺省配置

• 語(yǔ)言配置：由于支持多語(yǔ)言，因此不同的語(yǔ)言可以配置不同的參數(shù)
• 站點(diǎn)配置：配置與語(yǔ)言無(wú)關(guān)的全局參數(shù)
• 缺省配置：會(huì)因使用不同的主題而擁有不同的參數(shù)

站點(diǎn)配置

進(jìn)入設(shè)置/cms頁(yè)面

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

點(diǎn)擊站點(diǎn)/配置，進(jìn)入站點(diǎn)配置頁(yè)面

點(diǎn)擊右側(cè)的“ ！”按鈕，查看缺省配置

從缺省配置拷貝需要修改的屬性到站點(diǎn)配置頁(yè)面，并修改成所需要的值。

在這里，我們修改如下參數(shù):

{
 "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: 實(shí)際部署時(shí)的站點(diǎn)域名
  • rootPath: 根路徑，一般設(shè)置
• languange
  • default: 缺省語(yǔ)言。
    缺省語(yǔ)言渲染的靜態(tài)文件位于站點(diǎn)“根目錄”，其他語(yǔ)言位于站點(diǎn)“根目錄/[語(yǔ)言]”
  • items: 支持的語(yǔ)言列表，用逗號(hào)分隔
• themes
  • zh-cn: 語(yǔ)言所使用的主題
  • en-us: 語(yǔ)言所使用的主題
• plugins
  • cms-plugintrack
  • track
    • google: google統(tǒng)計(jì)的跟蹤代碼
    • baidu: 百度統(tǒng)計(jì)的跟蹤代碼
    • qq: 騰訊統(tǒng)計(jì)的跟蹤代碼

語(yǔ)言配置

可以依次對(duì)不同的語(yǔ)言配置參數(shù)，這里從略

構(gòu)建

為了提升渲染速度，在發(fā)表文章時(shí)，僅對(duì)“當(dāng)前文章”和“首頁(yè)”進(jìn)行渲染，其他靜態(tài)文件不變。所以，當(dāng)設(shè)計(jì)到整站元素變更時(shí)，需要進(jìn)行“整站渲染”。

如何操作

進(jìn)入設(shè)置/cms頁(yè)面

• 整站構(gòu)建：“整站參數(shù)”變更時(shí)
• 語(yǔ)言構(gòu)建：“語(yǔ)言參數(shù)”變更時(shí)

預(yù)覽

可點(diǎn)擊“預(yù)覽”，直接查看渲染效果

此時(shí)生成的網(wǎng)址沒有內(nèi)容，接下來(lái)可以創(chuàng)建目錄，然后發(fā)表文章

目錄

Cabloy-CMS有以下約定：

• 所有目錄必屬于某一個(gè)“語(yǔ)言”
• 所有文章必屬于某一個(gè)“目錄”

有的CMS工具，文章可以分屬多個(gè)“目錄”，其實(shí)這種特性可以用“標(biāo)簽”來(lái)解決

如何操作

進(jìn)入設(shè)置/cms頁(yè)面，點(diǎn)擊語(yǔ)言的“目錄”按鈕，添加“目錄”，效果如下：

此時(shí)，可以進(jìn)行“語(yǔ)言構(gòu)建”，并預(yù)覽效果

文章

Cabloy-CMS后臺(tái)提供了完備的文章管理功能。當(dāng)文章提交發(fā)表時(shí)，實(shí)時(shí)渲染成靜態(tài)文件，并寫入Sitemap文件

如何操作

基本屬性

在后臺(tái)首頁(yè)，點(diǎn)擊新建文章，進(jìn)入文章編輯頁(yè)面，依次輸入或選擇如下屬性值：

• 原子名稱：也就是文章標(biāo)題。原子是Cabloy對(duì)基礎(chǔ)業(yè)務(wù)數(shù)據(jù)的通用定義
• 語(yǔ)言：
• 目錄：
• 標(biāo)簽：支持多標(biāo)簽，用逗號(hào)隔開

內(nèi)容

Cabloy-CMS采用開源組件mavonEditor，實(shí)現(xiàn)了markdown格式的編輯和預(yù)覽效果

請(qǐng)輸入以下內(nèi)容，并查看效果

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

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

曾經(jīng)嘲諷

魚兒是被詛咒過(guò)的

一天到晚的不停游

here and there

here and there

如今

安然做一條魚兒

一天到晚的不停游

here and there

here and there

曾經(jīng)的嘲諷

終會(huì)落在自己身上

here and there

here and there

甚好甚好

提交發(fā)布

Cabloy中所有的原子數(shù)據(jù)均有兩個(gè)狀態(tài)：草稿、正常。草稿狀態(tài)下只有創(chuàng)建人能訪問(wèn)和編輯，通過(guò)提交轉(zhuǎn)入正常狀態(tài)，其他用戶才能訪問(wèn)。

文章也不例外，只有提交進(jìn)入正常狀態(tài)，才會(huì)進(jìn)行渲染。

當(dāng)然，如果文章已是正常狀態(tài)，那么再次編輯并保存時(shí)，也會(huì)進(jìn)行渲染。

提交并預(yù)覽

首頁(yè)

文章頁(yè)

部署

實(shí)例與子域名

Cabloy支持多實(shí)例，實(shí)例與網(wǎng)站子域名一一對(duì)應(yīng)，不同實(shí)例的數(shù)據(jù)完全隔離。比如instance1.cabloy.org和instance2.cabloy.org

在調(diào)試階段，Cabloy啟用了一個(gè)缺省實(shí)例，但在部署階段，需要規(guī)劃實(shí)例與子域名

在CMS應(yīng)用中，把域名example.com留給靜態(tài)文件，需要給后臺(tái)管理系統(tǒng)分配一個(gè)子域名，如admin.example.com

多站點(diǎn)支持

由于一個(gè)實(shí)例對(duì)應(yīng)一個(gè)CMS應(yīng)用，通過(guò)多實(shí)例就可以支持多站點(diǎn)了

實(shí)例配置

編輯文件：src/backend/config/config.prod.js

// instances
config.instances = [
  { subdomain: 'admin', password: '', title: '',
    meta: {
      jsonp: { whiteList: 'example.com' },
    },
  },
];

• subdomain: 子域名
• password: 實(shí)例中用戶root的訪問(wèn)密碼
• title: 網(wǎng)站標(biāo)題
• meta.jsonp.whiteList: 白名單，只有白名單中的域名可以通過(guò)ajax訪問(wèn)后臺(tái)API接口

構(gòu)建前端代碼

$ npm run build:front

啟動(dòng)后端服務(wù)

$ npm run start:backend

• 別忘了創(chuàng)建MySQL數(shù)據(jù)庫(kù)，并配置src/backend/config/config.prod.js

停止后端服務(wù)

$ npm run stop:backend

后端服務(wù)啟動(dòng)參數(shù)配置

編輯文件：build/config.js

// backend
const backend = {
  port: 7002,
  hostname: '127.0.0.1',
};

nginx配置

強(qiáng)烈建議使用nginx托管前端靜態(tài)資源，并反向代理后端服務(wù)

在項(xiàng)目根目錄已經(jīng)生成了兩個(gè)nginx配置文件，分別對(duì)應(yīng)Cabloy-CMS的“動(dòng)態(tài)部分”和“靜態(tài)部分”，請(qǐng)根據(jù)實(shí)際情況修改

動(dòng)態(tài)部分：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;
  }

}

靜態(tài)部分：nginx-cms.conf

server {

  listen 80;
  server_name example.com;

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

}

GitHub貢獻(xiàn)

有任何疑問(wèn)，歡迎提交 issue！