Cabloy-CMS:动静结合,解决Hexo痛点问题
介绍
Cabloy-CMS是什么
Cabloy-CMS是基于CabloyJS全栈业务开发框架开发的“动静结合”的CMS,可以快速构建企业网站、博客、社区、商城等Web应用。
在线演示
特性
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: 支持的语言列表,用逗号分隔
- default: 缺省语言。
- themes
- zh-cn: 语言所使用的主题
- en-us: 语言所使用的主题
- plugins
- cms-plugintrack
- track
- google: google统计的跟踪代码
- baidu: 百度统计的跟踪代码
- qq: 腾讯统计的跟踪代码
- track
- cms-plugintrack
语言配置
可以依次对不同的语言配置参数,这里从略
构建
为了提升渲染速度,在发表文章时,仅对“当前文章”和“首页”进行渲染,其他静态文件不变。所以,当设计到整站元素变更时,需要进行“整站渲染”。
如何操作
进入设置/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!
Cabloy-CMS:动静结合,解决Hexo痛点问题的更多相关文章
- Cabloy-CMS:动静结合,解决Hexo痛点问题(进阶篇)
前言 前一篇文章 介绍了如何通过Cabloy-CMS快速搭建一个博客站点. 这里简单介绍Cabloy-CMS静态站点的渲染机制,更多详细的内容请参见https://cms.cabloy.com 渲染规 ...
- webpack多页应用架构系列(一):一步一步解决架构痛点
这系列文章讲什么? 前些时间,写过一个项目,前后端分离,没有借助任何框架,项目页面特别的多,页面都是html直接写的,许多公共html,写了好多处,有一个地方需要改就得改好多地方,js也是随意写,每个 ...
- 解决hexo神烦的DTraceProviderBindings MODULE_NOT_FOUND
原文:http://kikoroc.com/2016/05/04/resolve-hexo-DTraceProviderBindings-MODULE-NOT-FOUND.html 今晚折腾hexo的 ...
- 解决Hexo博客模板hexo-theme-next的翻页按钮不正常显示问题
用Hexo搭了个Gitpage的博客,兴冲冲的发了11篇博文后发现翻页按钮不正常显示,显示为<i class="fa fa-angle-right"></i> ...
- 【vuejs深入一】深入学习vue指令,自定义指令解决开发痛点
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 最近博主我沉淀了几个月,或者说懒了几个月.然而大佬的指点总是一针见血,能够让人看到方向.所以我现在有觉得,一个好的 ...
- 深入学习vue指令,自定义指令解决开发痛点
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code v-model指令 vue.js的定义是一个mvvm框架,将它发挥到极致能够极大的提升 ...
- 解决hexo报错spwan failed
报错1 FATAL { err: Error: Spawn failed at ChildProcess.<anonymous> (/usr/local/src/hexo/cairbin/ ...
- Hexo+NexT(六):手把手教你编写一个Hexo过滤器插件
Hexo+NexT介绍到这里,我认为已经可以很好地完成任务了.它所提供的一些基础功能及配置,都已经进行了讲解.你已经可以随心所欲地配置一个自己的博客环境,然后享受码字的乐趣. 把博客托管到Github ...
- 打破陈规抓痛点,H3 BPM10.0挑战不可能
高效益意味着相似的运营活动比竞争对手做得更好,而战略定位则意味着企业在运营活动中有区别于竞争对手的实施方式,即差异化竞争.在新经济体下,面对社会的变革.市场的竞争环境.不断攀升的成本压力,几乎没有企业 ...
随机推荐
- Appium+python自动化(三十三)- 环境(超详解)
简介 在前边所有涉及启动app的时候有这样一行代码driver = webdriver.Remote('http://127.0.0.1:4723/wd/hub', desired_caps),很多小 ...
- 用 Python 分析上网记录,发现了很多不可思议的事
摘要:分享个 Python 神工具. 长时间使用浏览器会积累大量浏览器历史记录,这些是很隐私的数据,里面甚至可能有一些不可描述的网站或者搜索记录不想让别人知道. 不过,我们自己可能会感兴趣,天天上 ...
- SpringBoot 配置 AOP 打印日志
在项目开发中,日志系统是必不可少的,用AOP在Web的请求做入参和出参的参数打印,同时对异常进行日志打印,避免重复的手写日志,完整案例见文末源码. 一.Spring AOP AOP(Aspect-Or ...
- Keras实例教程(2)
https://blog.csdn.net/baimafujinji/article/details/78385745
- 迁移桌面程序到MS Store(10)——在Windows S Mode运行
首先简单介绍Windows 10 S Mode,Windows在该模式下,只能跑MS Store里的软件,不能通过其他方式安装.好处是安全有保障,杜绝一切国产流氓软件.就像iOS一样,APP进商店都需 ...
- JUC包实现的同步机制,原理以及简单用法总结
除了用Synchronized关键字修饰同步块,让线程获取某对象的锁实现多线程操作共享变量的同步外,还可以使用java.util.concurrent包.并且,juc包机制下的同步更灵活.juc包的所 ...
- Markdown实用技巧整理
标题 段落 列表 引用 代码块 链接 图片 一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 二.段落 1.换行: 2.加粗: 3.分割线: 4.删除线: deprecated 5 ...
- ubuntu使用yum安装软件问题
其实ubuntu是不应该用yum来管理软件安装的,只是后来才发现的,这里记录一下尝试的过程. 一开始是想把windows桌面上的文件拖到xshell登录的ubuntu的目录中,但是没成功,参考http ...
- (一)LinkedList集合解析及手写集合
一.LinkedList集合特点 问题 结 论 LinkedList是否允许空 允许 LinkedList是否允许重复数据 允许 LinkedList是否有序 有序 LinkedList是否 ...
- HDU - 4305 - Lightning 生成树计数 + 叉积判断三点共线
HDU - 4305 题意: 比较裸的一道生成树计数问题,构造Krichhoof矩阵,求解行列式即可.但是这道题还有一个限制,就是给定的坐标中,两点连线中不能有其他的点,否则这两点就不能连接.枚举点, ...