Cabloy-CMS：动静结合，解决Hexo痛点问题

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

在线演示

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
复制代码

进入后台管理页面

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

语言配置

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

构建

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

如何操作

进入 设置/cms 页面

• 整站构建：“整站参数”变更时
• 语言构建：“语言参数”变更时

预览

可点击“预览”，直接查看渲染效果

此时生成的网址没有内容，接下来可以 创建目录 ，然后 发表文章

目录

Cabloy-CMS有以下约定：

• 所有目录必属于某一个“语言”
• 所有文章必属于某一个“目录”

有的CMS工具，文章可以分属多个“目录”，其实这种特性可以用“标签”来解决

如何操作

进入 设置/cms 页面，点击语言的“目录”按钮，添加“目录”，效果如下：

此时，可以进行“语言构建”，并预览效果

文章

Cabloy-CMS后台提供了完备的文章管理功能。当文章提交发表时，实时渲染成静态文件，并写入Sitemap文件

如何操作

基本属性

在后台首页，点击 新建文章 ，进入文章编辑页面，依次输入或选择如下属性值：

原子

内容

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' },
    },
  },
];
复制代码

root

构建前端代码

$ 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;
  }

}
复制代码