introduce

What is Cabloy – CMS

Cabloy-cms is a hybrid CMS based on CabloyJS full-stack business development framework, which can quickly build Web applications such as enterprise websites, blogs, communities and shopping malls.

The online demo

zhennann.com

features

Inspired by Hexo, Cabloy-CMS adopts a “static + dynamic” architecture, which makes up for many functional deficiencies of Hexo. The main features are as follows:

  • Built-in multi-site, multi-language support
  • Themes can be set separately for different languages
  • Built-in SEO optimization to automatically generate Sitemap files
  • Write and publish articles online
  • Real-time rendering of static pages when the article is published, without the need for the whole site output, improve the overall performance
  • Built-in article view counter
  • Built-in review system
  • Built-in full text search
  • The article can be attached
  • Automatically merge and minimize CSS and JS
  • JS supports ES6 syntax and automatically compiles Babel when merging
  • Home page picture loading delay, automatic matching device pixel ratio
  • Debug is convenient

Architecture-static combination

The dynamic part

Based on CabloyJS full stack business development framework, CABloy-CMS provides a powerful article background management system. Frequently changing functions in the CMS are implemented through the “dynamic parts” and apis are provided for the “static parts” to call.

Static parts

Cabloy-cms renders static elements such as “home page” and “articles” into static files in real time, which not only meets SEO requirements, but also improves access performance.

In addition, the “static part” implements rich page functionality through Ajax access to the API provided by the “dynamic part.”

Quick start

Install EggBorn

$ npm install -g egg-born
Copy the code

New Cabloy project

$ egg-born cabloy-cms --type=cabloy
$ cd cabloy-cms
$ npm i
Copy the code

Installing the CMS

$ npm i egg-born-module-a-cms
Copy the code

Install the CMS theme module

$ npm i egg-born-module-cms-themeblog
Copy the code

Configure the MySQL

The test environment

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,}}};Copy the code

The development environment

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,}}};Copy the code

The production environment

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}}',}}};Copy the code

run

Start the back-end service

$ npm run dev:backend
Copy the code

Start the front-end service

$ npm run dev:front
Copy the code

The background management page is displayed

  • Website: http://localhost:9092/
  • User name: root
  • Password: 123456

Parameter configuration

Parameter coverage rule

Language Settings > Site Settings > Default Settings

  • Language configuration: Because multiple languages are supported, different parameters can be configured for different languages
  • Site configuration: Configures global parameters independent of language
  • Default: different parameters are available for different themes

Site configuration

The Settings/CMS page is displayed

Click Site/Configuration to enter the site configuration page

Click the “! “on the right. Button to view the default Settings

Copy the properties to be modified from the default configuration to the site configuration page and modify them to the desired values.

Here, we modify the following parameters:

{
 "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": ""}}}}Copy the code
  • host
    • Url: specifies the actual site domain name
    • RootPath: indicates the rootPath
  • languange
    • Default: indicates the default language. Static files rendered in the default language are located in the “root” of the site, and other languages are located in the “root /[language]” of the site.
    • Items: Lists of supported languages, separated by commas
  • themes
    • Zh-cn: the topic used by the language
    • En-us: topic used by the language
  • plugins
    • cms-plugintrack
      • track
        • Google: Tracking code for Google statistics
        • Baidu: Tracking code of Baidu statistics
        • Qq: Tencent statistics tracking code

Language configuration

You can configure parameters for different languages in sequence, which are omitted here

build

To speed up rendering, only the “current article” and “home page” will be rendered when the article is published. Other static files will remain unchanged. Therefore, when the design changes to the whole site element, “whole site rendering” is required.

How to operate

The Settings/CMS page is displayed

  • Whole station construction: when “whole station parameters” are changed
  • Language construction: When “language parameters” change

preview

Click “Preview” to view the rendering effect directly

At this point, the generated url has no content, then you can create a directory, and then publish the article

directory

Cabloy-cms has the following provisions:

  • All directories must belong to a “language”
  • All articles must belong to a certain “directory”

In some CMS tools, articles can belong to multiple “directories”, but this feature can be solved with “tags”

How to operate

Enter the Settings/CMS page, click the “Directory” button of the language, add “Directory”, the effect is as follows:

At this point, you can do a “language build” and preview the effects

The article

Cabloy-CMS background provides a complete article management function. When the article is submitted for publication, it is rendered to a static file in real time and written to a Sitemap file

How to operate

Basic attributes

On the background home page, click New Article to enter the article editing page, and enter or select the following attribute values successively:

  • Atomic name: the title of the article.atomicIs Cabloy’s general definition of underlying business data
  • Language:
  • Directory:
  • Labels: Multiple labels are supported, separated by commas (,)

content

Cabloy-cms uses the open source component mavonEditor to implement markdown format editing and preview effects

Please enter the following content and view the result

! [5775337-414d62d7c1e152f2](http://zhennann.cabloy.org/api/a/file/file/download/00ca2e89235b47bba5b7e7580fc71834.jpg)

## Fish swim all day longI used to mock fish for being cursed and swim here and there here and there now I'm safe and sound as a fish swim here and there here and there All day long and the irony will fall on me Here and there here and thereCopy the code

Submit the release

All atomic data in Cabloy has two states: draft and normal. In the draft state, only the creator can access and edit. Other users can access the draft state only after submitting the draft state to the normal state.

Articles are no exception and will not be rendered until the submission is in a normal state.

Of course, if the article is already in a normal state, it will be rendered again when it is edited and saved.

Submit and preview

Home page

The article page

The deployment of

Instance and subdomain

Cabloy supports multiple instances. Instances correspond to site subdomains one by one, and data of different instances is completely isolated. Examples include instance1.cabloy.org and instance2.cabloy.org

During the debug phase, Cabloy enables a default instance, but during the deployment phase, you need to plan the instance and subdomain names

In a CMS application, if the domain name example.com is reserved for static files, you need to assign a subdomain name, such as admin.example.com, to the background management system

Multi-site support

Since one instance corresponds to one CMS application, multiple sites can be supported through multiple instances

The instance configuration

Edit the file: SRC/backend/config/config. Prod. Js

// instances
config.instances = [
  { subdomain: 'admin'.password: ' '.title: ' '.meta: {
      jsonp: { whiteList: 'example.com'}},},];Copy the code
  • Subdomain: subdomain
  • Password: indicates the user in the instancerootAccess password of
  • Title: Site title
  • Meta. Jsonp. whiteList: only domain names in the whiteList can access the background API through Ajax

Build front-end code

$ npm run build:front
Copy the code

Start the back-end service

$ npm run start:backend
Copy the code
  • Don’t forget to create the MySQL database and configure itsrc/backend/config/config.prod.js

Stop back-end services

$ npm run stop:backend
Copy the code

Configure back-end service startup parameters

Edit the file: build/config.js

// backend
const backend = {
  port: 7002.hostname: '127.0.0.1'};Copy the code

Nginx configuration

It is strongly recommended to use Nginx to host front-end static resources and reverse proxy back-end services

Two nginx configuration files have been generated in the root directory of the project, which correspond to the Dynamic part and static part of cabloy-CMS respectively. Modify the configuration files based on the actual situation

Dynamic part: 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: $$request_uri node_port;proxy_redirect off; }}Copy the code

Static part: nginx-cms

server {

  listen 80;
  server_name example.com;

  root /Users/wind/cabloy/cabloy-cms/public/1/cms/dist;

}
Copy the code

Making contribution

If you have any questions, please submit the issue!