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

摘要：文章也不例外，只有提交进入正常状态，才会进行渲染。提交并预览首页文章页部署实例与子域名支持多实例，实例与网站子域名一一对应，不同实例的数据完全隔离。

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

https://zhennann.com

Cabloy-CMS受Hexo启发，采用“静态+动态”的架构，弥补了Hexo许多功能上的不足，主要特性如下:

内置多站点、多语言支持

不同语言可多带带设置主题

内置SEO优化，自动生成Sitemap文件

文章在线撰写、发布

文章发布时实时渲染静态页面，不必整站输出，提升整体性能

内置文章查看计数器

内置评论系统

内置全文检索

文章可添加附件

自动合并并最小化CSS和JS

JS支持ES6语法，并在合并时自动babel编译

首页图片延迟加载，自动匹配设备像素比

调试便捷

Cabloy-CMS基于CabloyJS全栈业务开发框架，提供了强大的文章后台管理系统。CMS当中经常变动的功能均通过“动态部分”实现，并提供API供“静态部分”调用。

Cabloy-CMS将“首页”和“文章”等静态元素实时渲染成静态文件，既满足了SEO的需求，同时也提升了访问性能。

此外，“静态部分”通过Ajax访问“动态部分”提供的API，可实现丰富的页面功能。

</>复制代码 
$ npm install -g egg-born

</>复制代码 
$ egg-born cabloy-cms --type=cabloy
$ cd cabloy-cms
$ npm i

</>复制代码 
$ npm i egg-born-module-a-cms

</>复制代码 
$ npm i egg-born-module-cms-themeblog

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对基础业务数据的通用定义

语言：

目录：

标签：支持多标签，用逗号隔开

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配置文件，分别对应Cabloy-CMS的“动态部分”和“静态部分”，请根据实际情况修改

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

</>复制代码 
server {
  listen 80;
  server_name example.com;
  root /Users/wind/cabloy/cabloy-cms/public/1/cms/dist;
}

</>复制代码 
有任何疑问，欢迎提交 issue！