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

介绍

Cabloy-CMS是什么

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

成都创新互联公司专注于封丘网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供封丘营销型网站建设，封丘网站制作、封丘网页设计、封丘网站官网定制、小程序开发服务，打造封丘网络公司原创品牌,更为您提供封丘网站排名全网营销落地服务。

在线演示

https://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页面

Cabloy-CMS：动静结合，解决Hexo痛点问题 cdn.xitu.io/2018/10/14/1666e7b41146e7cc?w=852&h=566&f=png&s=32379">

点击站点/配置，进入站点配置页面

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

点击右侧的“ ！”按钮，查看缺省配置

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

从缺省配置拷贝需要修改的属性到站点配置页面，并修改成所需要的值。

在这里，我们修改如下参数:

{
 "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：动静结合，解决Hexo痛点问题

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

预览

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

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

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

文章

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

如何操作

基本属性

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

原子名称：也就是文章标题。原子是Cabloy对基础业务数据的通用定义
语言：
目录：
标签：支持多标签，用逗号隔开

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

内容

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-CMS：动静结合，解决Hexo痛点问题

首页

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

文章页

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

部署

实例与子域名

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！

标题名称：Cabloy-CMS：动静结合，解决Hexo痛点问题
链接URL：http://scjbc.cn/article/pscsgs.html

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

介绍

Cabloy-CMS是什么

在线演示

特性

架构 - 动静结合

动态部分

静态部分

快速开始

安装EggBorn

新建Cabloy项目

安装CMS模块

安装CMS主题模块

配置MySQL

测试环境

开发环境

生成环境

运行

进入后台管理页面

参数配置

参数覆盖规则

站点配置

语言配置

构建

如何操作

预览

目录

如何操作

文章

如何操作

基本属性

内容

提交发布

提交并预览

部署

实例与子域名

多站点支持

实例配置

构建前端代码

启动后端服务

停止后端服务

后端服务启动参数配置

nginx配置

动态部分：nginx.conf

静态部分：nginx-cms.conf

GitHub贡献

其他资讯