[VSCode插件] 轻量级静态博客 - MDBlog

MDBlog

在这里插入图片描述

VSCode插件,基于Markdown的轻量级静态博客系统,同时支持导出为可以部署的静态博客。
VSCode插件市场搜索MDBlog安装即可使用。

仓库 MDBlog

0. 静态网址效果

首页

在这里插入图片描述
在这里插入图片描述
首页内容可全部编写markdown自定义,这里使用的Bing每日一图api作为图片展示

内容页面

在这里插入图片描述

  • 点击标题名,返回首页
  • 点击返回按钮,返回上一页
  • 按下~打开侧边栏导航栏
  • 图片可点击自动放大

1. Features

  • 博客基础功能:分类管理、文章管理、自动生成索引
  • 快捷指令:快捷输入表格、mermaid、wavedrom、代码块
  • 发布:将Markdown发布为HTML文件
  • (可选) 本地预览功能:基于live-server支持本地预览发布的HTML文件

2. Tip

  • 如果需要使用本地服务预览,请先安装Node.js,然后安装使用命令npm install -g live-server来安装live-server
  • 建议配合插件 [Markdown Preview Enhanced] 使用,vscode编写md即可预览,编写完成后发布为静态博客
  • ! 警告:如果您使用Windows,请不要在C盘建立MDBlog的文件夹,由于权限问题,会导致某些功能无法使用。
  • 不要<do-not-delete-me>标签内编写内容,或者删除它,会导致MDB的无法自动生成索引
    在这里插入图片描述

3. Quick Start

3.1 MDBlog初始化

  • 初始化
    在这里插入图片描述

然后根据提示输入博客名和作者(使用英文逗号分割)

  • 输入信息
    在这里插入图片描述

3.2 新建、编辑、删除分类

  • 新建一级分类
    在这里插入图片描述

  • 新建次级分类,次级分类可以继续新建下一级分类
    在这里插入图片描述

  • 删除、重命名分类
    在这里插入图片描述

  • 移动分类

    • 复制目标分类的地址
      在这里插入图片描述

    • 移动 -> 粘贴目标分类地址
      在这里插入图片描述

3.3 新建、编辑、删除文章

  • 新建文章
    在这里插入图片描述

其他同分类操作

3.4 发布和预览

  • 发布Markdown文件为HTML文件
    在这里插入图片描述

    • 发布:发布当前编辑器的md文件
    • 更新发布:发布已经保存的md文件
    • 全部发布:发布全部md文件
  • 本地服务预览HTML文件(请确保已经安装Node.js和live-server)
    在这里插入图片描述

    • 启动:启动live-server
    • 停止:停止live-server
    • 查看(默认浏览器):使用默认浏览器打开发布的静态博客
  • 直接预览HTML文件(不需要安装Node.js和live-server)

    • [发布] -> [右击] -> [打开发布(资源管理器)] -> 双击打开首页index.html

3.5 快捷命令

MDBlog支持快捷命令,输入mc.即弹出提示框。

Tip: 为了便于MDBlog管理图片,请务必使用快捷命令插入图片和删除图片

  • 插入图片
    1. 复制你要粘贴的图片
    2. 新行输入命令mc.insert_img回车
    3. 粘贴图片,MDBlog自动管理图片和生成新索引
  • 删除图片
    1. 光标放在图片格式前后位置,不可在中间
    2. 输入命令mc.delete_img回车
    3. MDBlog自动删除图片和相关索引
  • 新建表格
    1. 新行按如下格式行数, 列数, 对齐方式输入需要的表格,使用英文逗号
    2. 行数和列数都是数字,对齐方式可选l左对齐,c居中对齐,r右对齐
    3. 例如输入2,3,c,紧接着输入mc.insert_table回车
    4. 自动生成2行3列,居中对齐的表格
  • 插入代码块
    1. 新行输入需要的语言,例如c或者java
    2. 紧接着输入mc.insert_code_block回车
    3. 自动生成对应的代码块
  • 插入mermaid
    1. 新行输入mc.insert_mermaid_xxx命令,即可生成对应的mermaid示例
      A B req_1 resp_ack A B
  • 插入wavedrom
    1. 新行输入mc.insert_wavedrom_xxx命令,即可生成对应的wavedrom示例
      {
          signal: 
          [
              {name: 'clk',   wave: 'p..Pp..P'},,
              ['Master',,
                  ['ctrl',
                      {name: 'write', wave: '01.0....'},
                      {name: 'read',  wave: '0...1..0'}
                  ],
                      {name: 'addr',  wave: 'x3.x4..x', data: 'A1 A2'},
                      {name: 'wdata', wave: 'x3.x....', data: 'D1'   },
              ]
          ]
      }
      

4. Keybindings

功能快捷键
初始化New MDBlogctrl+m i
打开New MDBlogctrl+m o
全部发布ctrl+p a
更新发布ctrl+p s
发布(当前编辑)ctrl+p c
查看网页(默认浏览器)ctrl+p o
本地预览-启动ctrl+m s
本地预览-停止ctrl+m t

5. Release Notes

1.0.1 (24.03.02)

基础版本:基础博客功能


6. For more information

7. License

License

Enjoy!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值