介绍

Cabloy-CMS是什么

Cabloy-CMS是基于CabloyJS全栈业务开发框架开发的「动静结合」的CMS，可以快速构建企业网站、博客、社区、商城等Web应用。

在线演示

http://zhennann.me

特性

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

进入后台管理页面

  • 网址：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: 腾讯统计的跟踪代码

语言配置

可以依次对不同的语言配置参数，这里从略

构建

为了提升渲染速度，在发表文章时，仅对「当前文章」和「首页」进行渲染，其他静态文件不变。所以，当设计到整站元素变更时，需要进行「整站渲染」。

如何操作

进入设置/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！

推荐阅读：

查看原文 >>
相关文章