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

时间 2019-11-17

标签 cabloy cms 动静结合解决 hexo 问题栏目 CMS 繁體版

原文原文链接

介绍

Cabloy-CMS是什么

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

在线演示

zhennann.com前端

特性

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

语言配置

能够依次对不一样的语言配置参数，这里从略

构建

为了提高渲染速度，在发表文章时，仅对“当前文章”和“首页”进行渲染，其余静态文件不变。因此，当设计到整站元素变动时，须要进行“整站渲染”。

如何操做

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