Cabloy

Stella981
• 阅读 297

介绍

Cabloy-CMS是什么

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,可实现丰富的页面功能。

快速开始

安装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

进入后台管理页面

参数配置

参数覆盖规则

语言配置 > 站点配置 > 缺省配置

  • 语言配置:由于支持多语言,因此不同的语言可以配置不同的参数
  • 站点配置:配置与语言无关的全局参数
  • 缺省配置:会因使用不同的主题而拥有不同的参数

站点配置

进入设置/cms页面

Cabloy

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

Cabloy

点击右侧的“ !”按钮,查看缺省配置

Cabloy

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

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

{
 "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

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

预览

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

Cabloy

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

目录

Cabloy-CMS有以下约定:

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

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

如何操作

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

Cabloy

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

文章

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

如何操作

基本属性

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

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

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

首页

Cabloy

文章页

Cabloy

部署

实例与子域名

Cabloy支持多实例,实例与网站子域名一一对应,不同实例的数据完全隔离。比如instance1.cabloy.orginstance2.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

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
密钥管理系统-为你的天翼云资产上把“锁
本文关键词:数据安全,密码机,密钥管理一、你的云上资产真的安全么?1.2021年1月,巴西的一个数据库30TB数据被破坏,泄露的数据包含有1.04亿辆汽车和约4000万家公司的详细信息,受影响的人员数量可能有2.2亿;2.2021年2月,广受欢迎的音频聊天室应用Clubhouse的用户数据被恶意黑客或间谍窃取。据悉,一位身份不明的用户能够将Clubho