# quickref-cli

**Repository Path**: yacshy/quickref-cli

## Basic Information

- **Project Name**: quickref-cli
- **Description**: 把md转换成html，该项目是在https://github.com/jaywcjlove/refs-cli项目上做的修改
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-07
- **Last Updated**: 2025-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Quickrefs CLI

## 项目介绍
 该项目是从[refs-cli](https://github.com/jaywcjlove/refs-cli)（ 原作者：[小弟调调](https://github.com/jaywcjlove)）上衍生出来的一个分支，用于帮助快速搭建博客网站，它能扫描 .md 文件并打包生成样式美观的 .html 文件

## 修改内容
该版本在[refs-cli](https://github.com/jaywcjlove/refs-cli)的基础上做了如下修改：

|对比项|refs-cli|quickref-cli|
|---|---|---|
|input目录|`docs` 不可更改|可在.refsrc.json中配置|
|附件目录|无|可在.refsrc.json中配置|
|`watch` 事件|`change`|`change`、`add`、`addDir`、`unlink`、`unlinkDir`|
|`watch` 范围|README.md、style/*.css、js/*.js、docs/|README.md、input目录、附件目录|
|实时预览结果|无|通过集成`live-server`，实现边写边在浏览器实时预览|
|配置方式|`refs-cli -o ./dir` 命令行参数|在`.refsrc.json`中配置|
<!--rehype:className=show-header-->

**综述**：该分支在原始项目的基础上增加了附件模块，提供更丰富和灵活的配置，通过集成live-server为使用者提供了更舒适的编写体验


## 使用方法

1、安装

```cmd
npm i quickref-cli -g
```

2、按要求严格创建项目目录

```cmd
├─input
├─attachments
├─README.md
└─.refsrc.json
```

|名字|描述|备注|
|---|---|---|
|input|输入目录|可自定义名字；里面的.md将被打包成.html|
|attachments|附件目录|可自定义名字|
|README.md|博客首页|不可自定义名字；将被打包成index.html|
|.refsrc.json|配置文件|不可自定义名字|
<!--rehype:className=show-header-->

## 指令

```bash
Usage: quickref-cli [output-dir] [--help|h]
  Displays help information.

Options:
  --help, -h      Displays help information.
  --version, -v   Show version number
  --watch, -w     Watch and compile Markdown files.

Example:
  $ npm i quickref-cli -g
  $ quickref-cli
  $ quickref-cli -w

quickrefs-cli@v1.0.0
```

## .refsrc.json配置

```json
{
    "title": "Quick Reference",
    "description": "{{description}}. Sharing Quick Reference Cheat Sheets for Developers",
    "keywords": "reference-cli,reference,refs-cli,refs,cli",
    "data-info": "👆👆need your participation",
    "search": {
        "label": "搜索",
        "placeholder": "请输入搜索内容",
        "cancel": "取消"
    },
    "editor": {
        "label": "编辑",
        "disabled": true
    },
    "github": {
        "url": "https://github.com/yacshy/yacshy.github.io"
    },
    "inputDir": "./refs",                     // 输入目录
    "outputDir": "./docs",                    // 输出目录
    "attachmentDir": "./attachments",         // 附件目录
    "server": {                               // 在本地8181启动一个服务器，热更新，方便一边写一遍看
        "port": 8181,                         // 服务器端口
        "root": "./docs",                     // 在哪个目录下启动服务器？（一般和输出目录保持一致）
        "file": "index.html"                  // 服务器入口页面（一般是index.html）
    }
}
```

## 语法

为了创建你想要的、美观的博客，我们还需要掌握一些“语法”，不然你就只能创建简单的博客网站，尽管这个脚手架打包后的默认样式已经挺美观的了，但我仍然建议了解一点简单的语法

![pic](./attachments/demo.png)<!--rehype:style=width: 100%; overfollow: hidden; object-fit: contain; -->