介紹
Cabloy-CMS是什麼
Cabloy-CMS是基於CabloyJS全棧業務開發框架開發的“動靜結合”的CMS,可以快速構建企業網站、博客、社區、商城等Web應用。
在線演示
特性
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: 支持的語言列表,用逗號分隔
- default: 缺省語言。
- 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!