介绍
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: 支持的语言列表,用逗号分隔
- 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
格式的编辑和预览效果
请输入以下内容,并查看效果
![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!