# VLOOK

**Repository Path**: yxn-coder/VLOOK

## Basic Information

- **Project Name**: VLOOK
- **Description**: VLOOK™ 是针对 Typora（跨平台 Markdown 编辑器）（跨平台 Markdown 编辑器）的主题包和增强插件（针对导出的 HTML 文件）
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 85
- **Created**: 2021-06-06
- **Last Updated**: 2021-10-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 「 **VLOOK™ ── 让你的 Markdown 有了新看(wán)法** 」

**开源中国（[OSChina.net](https://www.oschina.net/p/vlook)）推荐的国产开源产品。**

![VLOOK™](https://cdn.jsdelivr.net/gh/MadMaxChow/VLOOKres@master/pic/vlook-mark-light.svg)

[VLOOK™](https://github.com/MadMaxChow/VLOOK) 是针对 [Typora](https://www.typora.io)（跨平台 Markdown 编辑器）的 **主题包** 和 **增强插件**（针对导出的 HTML 文件）。

[VLOOK™](https://github.com/MadMaxChow/VLOOK) is a **Theme Pack** and **Enhanced Plug-in** for [Typora](https://www.typora.io) (for exported HTML files).

VLOOK™ 也许是目前最好的 Markdown 增强插件之一，也是**开源中国（[OSChina.net](https://www.oschina.net/p/vlook)）推荐的国产开源产品。**

VLOOK™ 属于开源软件，遵从 **[MIT 许可证](#许可协议)**。

> **[加入 VLOOK™ 官方Q群：805502564](https://qm.qq.com/cgi-bin/qm/qr?k=oB8wpFG_4SEMf1CL9qVy-jMw0CMfSwff&jump_from=webapi&)**

---

![让 Markdown 的自动化排版和交互性上了 N 个台阶](https://cdn.jsdelivr.net/gh/MadMaxChow/VLOOKres@master/pic/vlook-screenshot-A01.png)

![内置多套原创文档主题、字体主题，一键切换，支持私人定制](https://cdn.jsdelivr.net/gh/MadMaxChow/VLOOKres@master/pic/vlook-screenshot-A02.png)

![表格排版+：单元格合并、列格式、表格行分组、自动编号、…](https://cdn.jsdelivr.net/gh/MadMaxChow/VLOOKres@master/pic/vlook-screenshot-A03.png)

![零成本的图片自动排版～题注、高分屏、反色、替换、版式、…](https://cdn.jsdelivr.net/gh/MadMaxChow/VLOOKres@master/pic/vlook-screenshot-A04.png)

![火力全开的图片自动排版、演示辅助～聚光灯、激光笔、注意](https://cdn.jsdelivr.net/gh/MadMaxChow/VLOOKres@master/pic/vlook-screenshot-A05.png)

![OMG! 可以按大纲、逐章、段落、插图多种方式导航](https://cdn.jsdelivr.net/gh/MadMaxChow/VLOOKres@master/pic/vlook-screenshot-A06.png)

![完美适配 Dark 模式，Markdown 变得更 Cool 了](https://cdn.jsdelivr.net/gh/MadMaxChow/VLOOKres@master/pic/vlook-screenshot-A07.png)

![音/视频、标签、引用折叠、高清插图、…30+特性开箱即用](https://cdn.jsdelivr.net/gh/MadMaxChow/VLOOKres@master/pic/vlook-screenshot-A08.png)

---

# 打赏

**若喜欢 VLOOK™ 的话，可以贡献一杯咖啡 :-)**<br />
![打赏 VLOOK™](https://z3.ax1x.com/2021/01/24/sHf82D.png)

**THANKS TO DONATE**

---

# 快速参考手册

VLOOK™ 通过持续**挖掘和扩展** Markdown 和 CSS，并结合文档的互联网化应用场景，在 **文档排版**、**内容导航**、**演示辅助**、**交互体验** 等方面提供了 **一致**、**简洁**、**友好** 的体验。

> - 有关 VLOOK™ 特性的详细介绍、样例及使用说明详见《VLOOK™ 快速参考手册》••• [GitHub](https://madmaxchow.github.io/VLOOK/index.html) •• [Gitee](https://madmaxchow.gitee.io/vlook/index.html)

> - 有关脚本化图表的详细介绍、样例及使用说明详见《脚本化图表参考指南》••• [GitHub](https://madmaxchow.github.io/VLOOK/chart.html) •• [Gitee](https://madmaxchow.gitee.io/vlook/chart.html)

---

# 如何使用

## Step 1•下载与配置

1. **下载插件：**
   1. 从 VLOOK™ 在 **[GitHub](https://github.com/MadMaxChow/VLOOK/releases)** 或 **[Gitee](https://gitee.com/madmaxchow/VLOOK/releases)** 的主页下载最新发布的版本
   2. 也可直接在项目主页中[下载主题文件](https://github.com/MadMaxChow/VLOOK/tree/master/released/theme)（[备用链接](https://gitee.com/madmaxchow/VLOOK/tree/master/released/theme)）
2. **安装字体：（可选）**
   1. 下载并安装 VLOOK™ 主题配套字体包 •• 详见「[字体主题](#字体主题)」
3. **安装 Typora：**
   1. 下载并安装 **[Typora](https://www.typora.io)** 的最新版本
   2. 启动 Typora 并进入「偏好设置」，启用「Markdown 扩展语法、代码块」下的所有选项。详见下图：

![开启「Typora▸偏好设置▸Markdown」相关选项](https://cdn.jsdelivr.net/gh/MadMaxChow/VLOOKres@master/pic/typora-opt1-light.png)


## Step 2•安装并选择主题

1. **安装主题：**
   1. 将`released\theme`下所有 CSS 文件复制至 Typora 的主题目录
   2. 主题目录在哪？可通过「偏好设置」中点击「**外观▸打开主题目录**」定位到该目录
2. **选用主题：**
   1. 重启 Typora
   2. 点击「**主题**」菜单，选择以`Vlook-*`形式命名的任意主题即可
3. **编写文档：**
   1. 建议基于 VLOOK™ 规范的文档模板来创建你自己的 Markdown 文档，这样能更快上手
   2. 模板文件在哪？在目录`released`下的文件「**VLOOK-Document-Template.md**」，也可直接在项目主页中[下载文档模板](https://github.com/MadMaxChow/VLOOK/tree/master/released)（[备用链接](https://gitee.com/madmaxchow/VLOOK/tree/master/released)）

## Step 3•应用插件

![进入「Typora▸偏好设置▸导出」进行配置](https://cdn.jsdelivr.net/gh/MadMaxChow/VLOOKres@master/pic/typora-opt2-light.png)

1. **配置导出选项安装 Typora：**
   1. 启动 Typora 并进入「**偏好设置**」
   2. 点击「导出」，添加配置（选择 HTML 模板），并将配置命名为`HTML (VLOOK)`
2. **安装插件代码：**
   1. 打开插件文件：released\plugin\\**plugin.txt**，或直接打开线上版本的 [plugin.txt](https://raw.githubusercontent.com/MadMaxChow/VLOOK/master/released/plugin/plugin.txt)（[备用链接](https://gitee.com/madmaxchow/VLOOK/raw/master/released/plugin/plugin.txt)）
   2. 全选里面的所有内容，并复制
   3. 回到导出配置「**HTML (VLOOK)**」中的`在<body />中添加`，将内容粘贴至下方的文本框内即可
3. **一键导出：**
   1. 打开符合 VLOOK™ 规范的 md 文件
   2. 点击「**文件▸导出▸HTML (VLOOK)**」即可

###### 在线版插件

> 以上配置方式为离线插件，完整的插件代码与 HTML 文件集成，适合浏览文档时须在内网或无网络的情况，但不便于实时更新插件和[在线切换模板主题](https://madmaxchow.gitee.io/vlook/index.html#模板主题)等。
>
> 
>
> 目前 VLOOK 支持提供在线版插件方式，可参考以上方式增加新的「导出配置」即可（建议配置命名为`HTML (VLOOK live)`）。
>
> 在线版的插件文件为：released\plugin\\**plugin-live.txt**，或直接打开线上版本的 [plugin-live.txt](https://raw.githubusercontent.com/MadMaxChow/VLOOK/master/released/plugin/plugin-live.txt)（[备用链接](https://gitee.com/madmaxchow/VLOOK/raw/master/released/plugin/plugin.txt)）
>

###### 选择合适的浏览器

> 强烈建议使用以下浏览器进行访问：
>
> Google **[Chrome](https://www.google.cn/chrome/)**　　Microsoft **[Edge](https://www.microsoft.com/zh-cn/edge)**(Chromium)　　Mozilla **[Firefox](https://www.mozilla.org/zh-CN/firefox/)**

---

# 私人定制主题

目前 VLOOK™ 项目已开放了主题的 **私人定制** 服务，定制样品示例如下：

![私人定制主题](https://s3.ax1x.com/2021/01/27/szoo9S.png)

（以上仅为效果仅为样品展示，非正式定制服务成品）

私人定制主题服务微信：**MaxChow**

---

# 字体主题

「**模板主题让文档颜值倍增，而字体则是文档气质担当！**」

VLOOK™ 提供了两套字体风格，可根据个人喜好进行选用。

> **小•清•新**
>
> 整体视觉为「**清新、简约、明快**」，主要采用无衬线的免费或开源的东亚和拉丁字体。
>
> ![字体风格_小清新](https://s3.ax1x.com/2021/01/05/skBoA1.png)

> **文•艺•范**
>
> 整体视觉为「**优雅、韵动、个性**」，主要采用衬线、无衬线的免费或开源的东亚和拉丁字体，多种字重进行**混搭组合**。
>
> ![字体风格_文艺范](https://s3.ax1x.com/2021/01/05/skBLcD.png?darksrc=invert&srcset=skBjnH.png@2x,skBOje.png@3x)

**因为 Windows / MacOS 系统默认不预装字体主题配套的字体包，VLOOK™ 目前可同时支持在线和本地两种使用方式。**
**若你的工作环境无法访问互联网，建议直接下载字体包并安装到本地，以获得最佳的视觉体验。**

![蓝奏云](https://s3.ax1x.com/2020/12/13/reJiee.png?mode=logo&srcset=reJCLD.png@2x) ••• [下载字体▾](https://wws.lanzous.com/ieVDhj1aokj)

![百度网盘](https://s3.ax1x.com/2020/12/13/reJFdH.png?mode=logo&srcset=reJkod.png@2x) •••`密码：11ta`••• [下载字体▾](https://pan.baidu.com/s/1gH5Hj-X3-LCaOLtN0AxLLw)

---

# 目录说明

| 目录 | 说明                         |
| ---------- | ---------------------------- |
| [ **docs** ] | VLOOK™ 快速参考手册、官网及在线服务相关文件 |
| [ **released** ] | 发布版本的主目录          |
| ├&nbsp;&nbsp;┠─ [ **demo** ] | 基于 VLOOK™ 主题的 Markdown 示例文件 |
| ├&nbsp;&nbsp;┠─ [ **theme** ] | 主题文件                     |
| ├&nbsp;&nbsp;┖─ [ **plugin** ] | 插件主目录                |
| ├&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┠─ plugin.txt | 自动植入版本_插件（通过 `v-drop.exe` 自动植入，内容可从以下两个版本中复制进行覆盖） |
| ├&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┠─ plugin_live.txt | 在线版本°插件 |
| ├&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┖─ plugin_standalone.txt | 离线版本°插件 |
| [ **src** ] | 源码目录                     |
| ├&nbsp;&nbsp;┠─ [ **dev** ] | 开发测试用文件 |
| ├&nbsp;&nbsp;┠─ [ **less** ] | 主题 CSS 文件的源文件 |
| ├&nbsp;&nbsp;┖─ [ **logo** ] | VLOOK™ 的 logo 资源 |