介紹
Cabloy-CMS是什麼
Cabloy-CMS是基於CabloyJS全棧業務開發框架開發的「動靜結合」的CMS，能夠快速構建企業網站、博客、社區、商城等Web應用。javascript
在線演示
特性
Cabloy-CMS受Hexo啓發，採用「靜態+動態」的架構，彌補了Hexo許多功能上的不足，主要特性以下:java
- 內置多站點、多語言支持
- 不一樣語言可單獨設置主題
- 內置SEO優化，自動生成Sitemap文件
- 文章在線撰寫、發佈
- 文章發佈時實時渲染靜態頁面，沒必要整站輸出，提高總體性能
- 內置文章查看計數器
- 內置評論系統
- 內置全文檢索
- 文章可添加附件
- 自動合併並最小化CSS和JS
- JS支持ES6語法，並在合併時自動babel編譯
- 首頁圖片延遲加載，自動匹配設備像素比
- 調試便捷
架構 - 動靜結合
動態部分
Cabloy-CMS基於CabloyJS全棧業務開發框架，提供了強大的文章後臺管理系統。CMS當中常常變更的功能均經過「動態部分」實現，並提供API供「靜態部分」調用。node
靜態部分
Cabloy-CMS將「首頁」和「文章」等靜態元素實時渲染成靜態文件，既知足了SEO的需求，同時也提高了訪問性能。mysql
此外，「靜態部分」經過Ajax訪問「動態部分」提供的API，可實現豐富的頁面功能。nginx
快速開始
安裝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.jsgit
// 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.jsgithub
// 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.jsajax
// mysql
config.mysql = {
clients: {
// donnot change the name
__ebdb: {
host: '127.0.0.1',
port: '3306',
user: 'root',
password: '',
database: '{{name}}',
},
},
};
運行
啓動後端服務sql
$ 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: 騰訊統計的跟蹤代碼
- track
- cms-plugintrack
語言配置
能夠依次對不一樣的語言配置參數，這裏從略
構建
爲了提高渲染速度，在發表文章時，僅對「當前文章」和「首頁」進行渲染，其餘靜態文件不變。因此，當設計到整站元素變動時，須要進行「整站渲染」。
如何操做
進入設置/cms頁面
- 整站構建：「整站參數」變動時
- 語言構建：「語言參數」變動時
預覽
可點擊「預覽」，直接查看渲染效果
此時生成的網址沒有內容，接下來能夠建立目錄，而後發表文章
目錄
Cabloy-CMS有如下約定：
- 全部目錄必屬於某一個「語言」
- 全部文章必屬於某一個「目錄」
有的CMS工具，文章能夠分屬多個「目錄」，其實這種特性能夠用「標籤」來解決
如何操做
進入設置/cms頁面，點擊語言的「目錄」按鈕，添加「目錄」，效果以下：
此時，能夠進行「語言構建」，並預覽效果
文章
Cabloy-CMS後臺提供了完備的文章管理功能。當文章提交發表時，實時渲染成靜態文件，並寫入Sitemap文件
如何操做
基本屬性
在後臺首頁，點擊新建文章，進入文章編輯頁面，依次輸入或選擇以下屬性值：
- 原子名稱：也就是文章標題。
原子是Cabloy對基礎業務數據的通用定義 - 語言：
- 目錄：
- 標籤：支持多標籤，用逗號隔開
內容
Cabloy-CMS採用開源組件mavonEditor，實現了markdown格式的編輯和預覽效果
請輸入如下內容，並查看效果
 ## 一天到晚的魚兒不停遊 曾經嘲諷 魚兒是被詛咒過的 一天到晚的不停遊 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！