摘要：文章也不例外，只有提交進(jìn)入正常狀態(tài)，才會(huì)進(jìn)行渲染。提交并預(yù)覽首頁文章頁部署實(shí)例與子域名支持多實(shí)例，實(shí)例與網(wǎng)站子域名一一對(duì)應(yīng)，不同實(shí)例的數(shù)據(jù)完全隔離。

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

https://zhennann.com

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

內(nèi)置多站點(diǎn)、多語言支持

不同語言可多帶帶設(shè)置主題

內(nèi)置SEO優(yōu)化，自動(dòng)生成Sitemap文件

文章在線撰寫、發(fā)布

文章發(fā)布時(shí)實(shí)時(shí)渲染靜態(tài)頁面，不必整站輸出，提升整體性能

內(nèi)置文章查看計(jì)數(shù)器

內(nèi)置評(píng)論系統(tǒng)

內(nèi)置全文檢索

文章可添加附件

自動(dòng)合并并最小化CSS和JS

JS支持ES6語法，并在合并時(shí)自動(dòng)babel編譯

首頁圖片延遲加載，自動(dòng)匹配設(shè)備像素比

調(diào)試便捷

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

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

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

$ npm install -g egg-born

$ egg-born cabloy-cms --type=cabloy
$ cd cabloy-cms
$ npm i

$ npm i egg-born-module-a-cms

$ npm i egg-born-module-cms-themeblog

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

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

$ npm run dev:backend

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

$ npm run dev:front

網(wǎng)址：http://localhost:9092/

用戶名：root

密碼：123456

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

語言配置：由于支持多語言，因此不同的語言可以配置不同的參數(shù)

站點(diǎn)配置：配置與語言無關(guān)的全局參數(shù)

缺省配置：會(huì)因使用不同的主題而擁有不同的參數(shù)

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

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

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

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

在這里，我們修改如下參數(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: 缺省語言。

缺省語言渲染的靜態(tài)文件位于站點(diǎn)“根目錄”，其他語言位于站點(diǎn)“根目錄/[語言]”

items: 支持的語言列表，用逗號(hào)分隔

themes

zh-cn: 語言所使用的主題

en-us: 語言所使用的主題

plugins

cms-plugintrack

track

google: google統(tǒng)計(jì)的跟蹤代碼

baidu: 百度統(tǒng)計(jì)的跟蹤代碼

qq: 騰訊統(tǒng)計(jì)的跟蹤代碼

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

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

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

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

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

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

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

Cabloy-CMS有以下約定：

所有目錄必屬于某一個(gè)“語言”

所有文章必屬于某一個(gè)“目錄”

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

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

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

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

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

原子名稱：也就是文章標(biāo)題。原子是Cabloy對(duì)基礎(chǔ)業(yè)務(wù)數(shù)據(jù)的通用定義

語言：

目錄：

標(biāo)簽：支持多標(biāo)簽，用逗號(hào)隔開

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)嘲諷

魚兒是被詛咒過的

一天到晚的不停游

here and there

here and there



如今

安然做一條魚兒

一天到晚的不停游

here and there

here and there



曾經(jīng)的嘲諷

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

here and there

here and there



甚好甚好

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

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

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

首頁

文章頁

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

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

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

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

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

$ npm run build:front

$ npm run start:backend

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

$ npm run stop:backend

編輯文件：build/config.js

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

強(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í)際情況修改

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

}

server {

  listen 80;
  server_name example.com;

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

}

有任何疑問，歡迎提交 issue！