# mdblog

**Repository Path**: org-drafts/mdblog

## Basic Information

- **Project Name**: mdblog
- **Description**: 个人博客 http://sochishun.gitee.io/blog，基于 VuePress 构建 ，内容包括示例代码 codesample、最佳实践 best-practices、速查手册 handbook、开发者工具箱、开发者实用网站导航（公共资源CDN、免费素材、随机数据服务、流程图工具）等。
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: http://sochishun.gitee.io/mdblog
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-08-19
- **Last Updated**: 2025-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MdBlog

版本号: [2.1.0](https://sochishun.gitee.io/blog/release.html)

官网: https://sochishun.gitee.io/blog/

## 介绍

这是基于 Node 全栈技术和 Markdown 内容文件的博客系统，支持写作预览、支持生成静态网站。支持代码高亮、支持 Layui、ElementUI 等各种前端组件的嵌入式演示。

**系统使用了以下 Node 插件**

- express: 用于即时动态预览 Markdown 全站效果
- nunjucks: 模板引擎，搭配 express 插件使用
- chokidar: 监听文件变化，搭配 nunjucks 插件使用
- showdown: 解析 markdown 文件到 html 格式
- http-server: 静态服务器，用于预览静态全站效果
- sqlite3: 嵌入式数据库，用于操作缓存数据
- sequelize: 通用 ORM 框架，提供对 sqlite3 的 async/await 异步方法的封装

**与 VuePress、Hugo 等产品对比**

VuePress、Hugo 已经很流行了，为什么要自己重复造轮子开发这个项目？原因是：它们很不灵活。

VuePress 偏向于文档系统，不适合搭建博客。Hugo 定制能力较差，修改模板门槛非常高。

自己是个熟练掌握 Node、PHP、Java、MySQL 的全栈开发工程师，对软件架构也是了如指掌，于是决定秉着虚心学习的精神，自己决定从零开发一个博客系统。这个博客系统，既要填补市面产品的不足，而且要简单易用。所以这个博客系统就诞生了。

**特性**

- （填补不足）修改模板技术门槛低：模板文件基于 Html5+CSS+JavaScript，入手门槛极低，基于 CDN 模式，不需要使用前端编译技术。
- （填补不足）修改模板超简单：支持夜间主题，修改模板只需要修改 HTML、CSS、Js 文件，简单方便。
- （填补不足）修改模板超容易：默认模板基于 BootStrap V5 组件库，修改样式很容易。
- （填补不足）增减页面很简单：可以随意增减页面，可以随意修改菜单，可以隐藏草稿文件。
- （简单易用）基于 Node 全栈技术，一个 npm install 命令搞定所有安装。
- （简单易用）目录结构简单清晰，核心框架使用 MVC 分层架构，markdown 文件库和视图模板文件库结构清晰，通俗易懂。

## 插件依赖

```bash
npm install chokidar http-server express nunjucks showdown sqlite3 sequelize
```

## 内容规范

### 文件与目录规范

- 草稿：目录或文件名加下划线前缀 `_`，例如：`_vpn/`、`_敏感词.md`。草稿目录或草稿文件不会自动编译到静态网站。
- 推荐: 文件名加前缀 `推荐 - `，例如：`推荐 - 快速搭建 - NodeJs 搭建 VuePress 项目.md`
- 最多支持二级分类。

### 文章元数据

```yaml
---
date: "2020-12-31"
title: ""
tag: "多个标签以空格隔开"
id: "2020123101"
---
```

### category.js 内容规范

> 分类数据

```javascript
[
  {
    "name": "目录名称",
    "text": "分类别名",
    "isProd": true, // 是否生产环境，true=生产环境，false=开发环境
    "children": [
      {
        "name": "子目录名称",
        "text": "子分类别名"
      }
    ]
  }
]
```

### tag.js 内容规范

> 预置系统标签。
> 自定义标签写在 Markdown 文件头部的 Yaml 元数据的 `tag` 字段中。

```javascript
[
  {
    "name":"node",
    "text":"node"
  },
  {
    "name":"php",
    "text":"php"
  }
]
```

## 使用说明

Q：怎么添加文章？
A: 直接到 markdown 目录添加 markdown 文件即可。

Q: 如何添加分类？
A: 直接到 markdown 目录增加一个子目录即可。

Q：分类支持多级吗？
A：分类最多支持二级。markdown 目录下每个子目录都是一级分类，一级目录里面的所有子目录都会被自动忽略。

Q：如何添加图片？
A：启动预览程序 `npm run server`，把图片添加到 `public/static/images/` 目录。

## 目录结构

- app/ # 应用目录
  - config/ # 配置文件目录
    - category.js # 分类配置数据文件
    - config.js # 配置数据文件
    - menu.js # 菜单配置数据文件
    - tag.js # 标签配置数据文件
  - controller/ # 控制器目录
    - BuildController.js # 生成静态站点控制器类文件
    - PackageController.js # 打包 uni-app 应用控制器类文件
    - ServerController.js # 预览演示控制器类文件
  - model/ # 模型层目录
    - Model.js # 模型类文件
  - utils/ # 通用工具类库
  - views/ # 视图模板目录
  - build.js # 生成静态站点入口执行文件
  - package.js # 打包 uni-app 应用入口执行文件
  - watching.js # 监听文件变化入口执行文件
  - web.js # 预览演示入口执行文件
- content/ # 内容目录
  - markdown/ # 文档目录
    - nodejs/
    - php/
  - dist/ # 静态网站输出目录
  - public/ # 公共目录
    - static/ # 静态资源目录
      - attachments/ # 附件资源目录
      - cache/ # 缓存资源目录
      - examples/ # 示例代码压缩包资源目录
      - images/ # 图片资源目录
      - vendor/ # 第三方 Js 插件目录
- .env 默认环境配置文件
- .env.development 开发环境配置文件
- .env.production 构建环境配置文件

## 生命周期

### `npm run dev` 生命周期

1. ./app/server.js
3. ./app/controller/ServerController.js
4. ./app/model/Model.js

### `npm run build` 生命周期

1. ./app/build.js
2. ./app/controller/BuildController.js
3. ./app/model/Model.js

## 参考材料

- [Eleventy](https://www.11ty.dev/)
- [Express](https://www.expressjs.com.cn/)
- [Nunjucks](https://nunjucks.bootcss.com/)
- [mysql2](https://www.npmjs.com/package/mysql2)
- [showdown](https://www.npmjs.com/package/showdown)
- [markdown-it](https://www.npmjs.com/package/markdown-it)
- [marked](https://www.npmjs.com/package/marked)
- [yaml](https://www.npmjs.com/package/yaml)
- [node中的http-server的基本配置](https://blog.csdn.net/qq_40448069/article/details/124074117)
- [hugo 主题](https://themes.gohugo.io/)
- [设计参考：美团技术团队](https://tech.meituan.com/)
- [设计参考：华为开发者博客](https://developer.huawei.com/consumer/cn/blog/recommended)