介绍
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！