Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題

介紹

Cabloy-CMS是什么

Cabloy-CMS是基于CabloyJS全棧業(yè)務(wù)開發(fā)框架開發(fā)的“動(dòng)靜結(jié)合”的CMS，可以快速構(gòu)建企業(yè)網(wǎng)站、博客、社區(qū)、商城等Web應(yīng)用。

成都創(chuàng)新互聯(lián)公司專注于封丘網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠(chéng)為您提供封丘營(yíng)銷型網(wǎng)站建設(shè)，封丘網(wǎng)站制作、封丘網(wǎng)頁(yè)設(shè)計(jì)、封丘網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造封丘網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供封丘網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

在線演示

https://zhennann.me

特性

Cabloy-CMS受Hexo啟發(fā)，采用“靜態(tài)+動(dòng)態(tài)”的架構(gòu)，彌補(bǔ)了Hexo許多功能上的不足，主要特性如下:

內(nèi)置多站點(diǎn)、多語(yǔ)言支持
不同語(yǔ)言可單獨(dú)設(shè)置主題
內(nèi)置SEO優(yōu)化，自動(dòng)生成Sitemap文件
文章在線撰寫、發(fā)布
文章發(fā)布時(shí)實(shí)時(shí)渲染靜態(tài)頁(yè)面，不必整站輸出，提升整體性能
內(nèi)置文章查看計(jì)數(shù)器
內(nèi)置評(píng)論系統(tǒng)
內(nèi)置全文檢索
文章可添加附件
自動(dòng)合并并最小化CSS和JS
JS支持ES6語(yǔ)法，并在合并時(shí)自動(dòng)babel編譯
首頁(yè)圖片延遲加載，自動(dòng)匹配設(shè)備像素比
調(diào)試便捷

架構(gòu) - 動(dòng)靜結(jié)合

動(dòng)態(tài)部分

Cabloy-CMS基于CabloyJS全棧業(yè)務(wù)開發(fā)框架，提供了強(qiáng)大的文章后臺(tái)管理系統(tǒng)。CMS當(dāng)中經(jīng)常變動(dòng)的功能均通過(guò)“動(dòng)態(tài)部分”實(shí)現(xiàn)，并提供API供“靜態(tài)部分”調(diào)用。

靜態(tài)部分

Cabloy-CMS將“首頁(yè)”和“文章”等靜態(tài)元素實(shí)時(shí)渲染成靜態(tài)文件，既滿足了SEO的需求，同時(shí)也提升了訪問(wèn)性能。

此外，“靜態(tài)部分”通過(guò)Ajax訪問(wèn)“動(dòng)態(tài)部分”提供的API，可實(shí)現(xiàn)豐富的頁(yè)面功能。

快速開始

安裝EggBorn

$ npm install -g egg-born

新建Cabloy項(xiàng)目

$ 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

測(cè)試環(huán)境

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
      },
    },
  };

開發(fā)環(huán)境

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
      },
    },
  };

生成環(huán)境

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

運(yùn)行

啟動(dòng)后端服務(wù)

$ npm run dev:backend

啟動(dòng)前端服務(wù)

$ npm run dev:front

進(jìn)入后臺(tái)管理頁(yè)面

網(wǎng)址：http://localhost:9092/
用戶名：root
密碼：123456

參數(shù)配置

參數(shù)覆蓋規(guī)則

語(yǔ)言配置 > 站點(diǎn)配置 > 缺省配置

語(yǔ)言配置：由于支持多語(yǔ)言，因此不同的語(yǔ)言可以配置不同的參數(shù)
站點(diǎn)配置：配置與語(yǔ)言無(wú)關(guān)的全局參數(shù)
缺省配置：會(huì)因使用不同的主題而擁有不同的參數(shù)

站點(diǎn)配置

進(jìn)入設(shè)置/cms頁(yè)面

Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題 cdn.xitu.io/2018/10/14/1666e7b41146e7cc?w=852&h=566&f=png&s=32379">

點(diǎn)擊站點(diǎn)/配置，進(jìn)入站點(diǎn)配置頁(yè)面

Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題

點(diǎn)擊右側(cè)的“ ！”按鈕，查看缺省配置

Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題

從缺省配置拷貝需要修改的屬性到站點(diǎn)配置頁(yè)面，并修改成所需要的值。

在這里，我們修改如下參數(shù):

{
 "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: 實(shí)際部署時(shí)的站點(diǎn)域名
- rootPath: 根路徑，一般設(shè)置
languange
- default: 缺省語(yǔ)言。
  缺省語(yǔ)言渲染的靜態(tài)文件位于站點(diǎn)“根目錄”，其他語(yǔ)言位于站點(diǎn)“根目錄/[語(yǔ)言]”
- items: 支持的語(yǔ)言列表，用逗號(hào)分隔
themes
- zh-cn: 語(yǔ)言所使用的主題
- en-us: 語(yǔ)言所使用的主題
plugins
- cms-plugintrack
- track
  - google: google統(tǒng)計(jì)的跟蹤代碼
  - baidu: 百度統(tǒng)計(jì)的跟蹤代碼
  - qq: 騰訊統(tǒng)計(jì)的跟蹤代碼

語(yǔ)言配置

可以依次對(duì)不同的語(yǔ)言配置參數(shù)，這里從略

構(gòu)建

為了提升渲染速度，在發(fā)表文章時(shí)，僅對(duì)“當(dāng)前文章”和“首頁(yè)”進(jìn)行渲染，其他靜態(tài)文件不變。所以，當(dāng)設(shè)計(jì)到整站元素變更時(shí)，需要進(jìn)行“整站渲染”。

如何操作

進(jìn)入設(shè)置/cms頁(yè)面

Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題

整站構(gòu)建：“整站參數(shù)”變更時(shí)
語(yǔ)言構(gòu)建：“語(yǔ)言參數(shù)”變更時(shí)

預(yù)覽

可點(diǎn)擊“預(yù)覽”，直接查看渲染效果

Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題

此時(shí)生成的網(wǎng)址沒(méi)有內(nèi)容，接下來(lái)可以創(chuàng)建目錄，然后發(fā)表文章

文章

Cabloy-CMS后臺(tái)提供了完備的文章管理功能。當(dāng)文章提交發(fā)表時(shí)，實(shí)時(shí)渲染成靜態(tài)文件，并寫入Sitemap文件

如何操作

基本屬性

在后臺(tái)首頁(yè)，點(diǎn)擊新建文章，進(jìn)入文章編輯頁(yè)面，依次輸入或選擇如下屬性值：

原子名稱：也就是文章標(biāo)題。原子是Cabloy對(duì)基礎(chǔ)業(yè)務(wù)數(shù)據(jù)的通用定義
語(yǔ)言：
目錄：
標(biāo)簽：支持多標(biāo)簽，用逗號(hào)隔開

Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題

內(nèi)容

Cabloy-CMS采用開源組件mavonEditor，實(shí)現(xiàn)了markdown格式的編輯和預(yù)覽效果

請(qǐng)輸入以下內(nèi)容，并查看效果

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

## 一天到晚的魚兒不停游

曾經(jīng)嘲諷

魚兒是被詛咒過(guò)的

一天到晚的不停游

here and there

here and there

如今

安然做一條魚兒

一天到晚的不停游

here and there

here and there

曾經(jīng)的嘲諷

終會(huì)落在自己身上

here and there

here and there

甚好甚好

提交發(fā)布

Cabloy中所有的原子數(shù)據(jù)均有兩個(gè)狀態(tài)：草稿、正常。草稿狀態(tài)下只有創(chuàng)建人能訪問(wèn)和編輯，通過(guò)提交轉(zhuǎn)入正常狀態(tài)，其他用戶才能訪問(wèn)。

文章也不例外，只有提交進(jìn)入正常狀態(tài)，才會(huì)進(jìn)行渲染。

當(dāng)然，如果文章已是正常狀態(tài)，那么再次編輯并保存時(shí)，也會(huì)進(jìn)行渲染。

提交并預(yù)覽

Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題

首頁(yè)

Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題

文章頁(yè)

Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題

部署

實(shí)例與子域名

Cabloy支持多實(shí)例，實(shí)例與網(wǎng)站子域名一一對(duì)應(yīng)，不同實(shí)例的數(shù)據(jù)完全隔離。比如instance1.cabloy.org和instance2.cabloy.org

在調(diào)試階段，Cabloy啟用了一個(gè)缺省實(shí)例，但在部署階段，需要規(guī)劃實(shí)例與子域名

在CMS應(yīng)用中，把域名example.com留給靜態(tài)文件，需要給后臺(tái)管理系統(tǒng)分配一個(gè)子域名，如admin.example.com

多站點(diǎn)支持

由于一個(gè)實(shí)例對(duì)應(yīng)一個(gè)CMS應(yīng)用，通過(guò)多實(shí)例就可以支持多站點(diǎn)了

實(shí)例配置

編輯文件：src/backend/config/config.prod.js

// instances
config.instances = [
  { subdomain: 'admin', password: '', title: '',
    meta: {
      jsonp: { whiteList: 'example.com' },
    },
  },
];

subdomain: 子域名
password: 實(shí)例中用戶root的訪問(wèn)密碼
title: 網(wǎng)站標(biāo)題
meta.jsonp.whiteList: 白名單，只有白名單中的域名可以通過(guò)ajax訪問(wèn)后臺(tái)API接口

構(gòu)建前端代碼

$ npm run build:front

啟動(dòng)后端服務(wù)

$ npm run start:backend

別忘了創(chuàng)建MySQL數(shù)據(jù)庫(kù)，并配置src/backend/config/config.prod.js

停止后端服務(wù)

$ npm run stop:backend

后端服務(wù)啟動(dòng)參數(shù)配置

編輯文件：build/config.js

// backend
const backend = {
  port: 7002,
  hostname: '127.0.0.1',
};

nginx配置

強(qiáng)烈建議使用nginx托管前端靜態(tài)資源，并反向代理后端服務(wù)

在項(xiàng)目根目錄已經(jīng)生成了兩個(gè)nginx配置文件，分別對(duì)應(yīng)Cabloy-CMS的“動(dòng)態(tài)部分”和“靜態(tài)部分”，請(qǐng)根據(jù)實(shí)際情況修改

動(dòng)態(tài)部分：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;
  }

}

靜態(tài)部分：nginx-cms.conf

server {

  listen 80;
  server_name example.com;

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

}

GitHub貢獻(xiàn)

有任何疑問(wèn)，歡迎提交 issue！

分享文章：Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題
網(wǎng)頁(yè)地址：http://weahome.cn/article/pscsgs.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Cabloy-CMS：動(dòng)靜結(jié)合，解決Hexo痛點(diǎn)問(wèn)題

介紹

Cabloy-CMS是什么

在線演示

特性

架構(gòu) - 動(dòng)靜結(jié)合

動(dòng)態(tài)部分

靜態(tài)部分

快速開始

安裝EggBorn

新建Cabloy項(xiàng)目

安裝CMS模塊

安裝CMS主題模塊

配置MySQL

測(cè)試環(huán)境

開發(fā)環(huán)境

生成環(huán)境

運(yùn)行

進(jìn)入后臺(tái)管理頁(yè)面

參數(shù)配置

參數(shù)覆蓋規(guī)則

站點(diǎn)配置

語(yǔ)言配置

構(gòu)建

如何操作

預(yù)覽

目錄

如何操作

文章

如何操作

基本屬性

內(nèi)容

提交發(fā)布

提交并預(yù)覽

部署

實(shí)例與子域名

多站點(diǎn)支持

實(shí)例配置

構(gòu)建前端代碼

啟動(dòng)后端服務(wù)

停止后端服務(wù)

后端服務(wù)啟動(dòng)參數(shù)配置

nginx配置

動(dòng)態(tài)部分：nginx.conf

靜態(tài)部分：nginx-cms.conf

GitHub貢獻(xiàn)

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管