v1.1.0 Releases #7
|
@ -0,0 +1,71 @@
|
||||||
|
# vditor-halo-render
|
||||||
|
|
||||||
|
vditor halo render是一款用于halo-plugin-vditor的自定义解析器,可以解析自定义的语法来输出HTML结构。可以应用于文章的编写。 本解析器主要用于markdown编辑器。
|
||||||
|
|
||||||
|
例如:
|
||||||
|
|
||||||
|
**>>INPUT**
|
||||||
|
|
||||||
|
```plaintext
|
||||||
|
tips:info
|
||||||
|
This is a info tips
|
||||||
|
```
|
||||||
|
|
||||||
|
**<<OUTPUT**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="halo-render halo-render-wrapper tips tips-info">
|
||||||
|
<div>This is a info tips</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 如何使用
|
||||||
|
|
||||||
|
您可以直接引用releases包下的index.js和index.css,并将fonts和icons目录拷贝到可访问的路径。
|
||||||
|
解析器导出了一个`HaloJs`对象可供使用。
|
||||||
|
|
||||||
|
要进行解析处理您仅需要使用下面的方法即可进行处理。
|
||||||
|
|
||||||
|
```js
|
||||||
|
HaloJs.renderHalo("tips:info\nThis is a info tips", "/")
|
||||||
|
```
|
||||||
|
|
||||||
|
renderHalo方法会返回解析后的html结构。renderHalo的参数与返回值如下:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
/**
|
||||||
|
* 解析自定义渲染
|
||||||
|
* @param content 待渲染的文本
|
||||||
|
* @param cdn 资源链接前缀
|
||||||
|
* @return 资源渲染结果
|
||||||
|
*/
|
||||||
|
function renderHalo(content: string, cdn: string): string;
|
||||||
|
```
|
||||||
|
|
||||||
|
## 语法参考
|
||||||
|
|
||||||
|
- [语法介绍](doc/general.md)
|
||||||
|
- [Tips组件](doc/tips.md)
|
||||||
|
- [Git组件](doc/git.md)
|
||||||
|
- [资源组件](doc/drive.md)
|
||||||
|
|
||||||
|
## 开发
|
||||||
|
|
||||||
|
1. 安装依赖
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
2. 启动开发环境
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
3. 打包
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
|
@ -50,6 +50,10 @@ git:[@github/justice2001/halo-plugin-vditor]
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
git:[@gitee/blossom-editor/blossom]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
drive:baidu
|
drive:baidu
|
||||||
name: 网站资源集合
|
name: 网站资源集合
|
||||||
link: https://www.baidu.com/
|
link: https://www.baidu.com/
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
After Width: | Height: | Size: 60 KiB |
|
@ -0,0 +1,46 @@
|
||||||
|
# 资源分享组件
|
||||||
|
|
||||||
|
资源分享组件可以帮助用户生成一个分享展示的模块,它会包含资源平台、资源内容、链接按钮和提取码的信息。
|
||||||
|
|
||||||
|
当前资源平台支持百度网盘和阿里网盘的显示。
|
||||||
|
|
||||||
|
## 语法
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
drive:<platform>
|
||||||
|
name: <title>
|
||||||
|
link: <link>
|
||||||
|
password: <password>
|
||||||
|
```
|
||||||
|
|
||||||
|
- `name`: 展示的资源标题
|
||||||
|
- `link`: 跳转到资源的链接
|
||||||
|
- `password`: 可选,资源提取码
|
||||||
|
|
||||||
|
## platform
|
||||||
|
|
||||||
|
当前支持的平台:
|
||||||
|
|
||||||
|
- `baidu`: 百度网盘
|
||||||
|
- `ali`: 阿里云盘
|
||||||
|
|
||||||
|
平台实际上只是一个icon和标题的组合,并不会影响资源的访问,如果您不介意,您可以在下方的配置中填写任意的链接。
|
||||||
|
|
||||||
|
## 示例
|
||||||
|
|
||||||
|
- 阿里云盘
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
drive:ali
|
||||||
|
name: 网站资源集合
|
||||||
|
link: https://www.ali.com/
|
||||||
|
```
|
||||||
|
|
||||||
|
- 百度网盘
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
drive:baidu
|
||||||
|
name: 网站资源集合
|
||||||
|
link: https://www.baidu.com/
|
||||||
|
password: 1234
|
||||||
|
```
|
|
@ -0,0 +1,29 @@
|
||||||
|
# 语法设计
|
||||||
|
|
||||||
|
## 类型标识
|
||||||
|
|
||||||
|
解析器使用输入文本的第一行来标识渲染的类型,当前支持下面几种类型:
|
||||||
|
|
||||||
|
- `tips` 提供多彩的提示组件
|
||||||
|
- `git` 提供Git仓库信息的组件
|
||||||
|
- `drive` 提供资源下载的组件
|
||||||
|
|
||||||
|
渲染类型标识可以在后方加入一些子类型或配置信息,格式如下:
|
||||||
|
|
||||||
|
```plaintext
|
||||||
|
<type>:<option | sub_type>
|
||||||
|
```
|
||||||
|
|
||||||
|
例如tips组件在后方标识了子类型,如`tips:danger`则表示使用`tips`解析器,解析为danger样式。
|
||||||
|
|
||||||
|
git组件则在后方标识了一组配置,如`git:[@github/justice2001/halo-plugin-vditor]`
|
||||||
|
|
||||||
|
具体的行为可以由解析器来自定义。
|
||||||
|
|
||||||
|
## 内容
|
||||||
|
|
||||||
|
从第二行起至最后一行,均为内容部分,这一部分会被作为整体传入到解析器中,解析器可以根据需要来设计语法。
|
||||||
|
|
||||||
|
如`drive`组件则在此处处理附加的长配置信息。
|
||||||
|
|
||||||
|
而`tips`则会将此部分内容解析为html附加到内容中。
|
|
@ -0,0 +1,55 @@
|
||||||
|
# Git组件
|
||||||
|
|
||||||
|
![Git Module](assets/git.png)
|
||||||
|
|
||||||
|
Git组件为用户提供了在页面中嵌入git仓库的解决方案,常用的使用场景是为开源项目开发者发布文章时可以将此Git仓库快速嵌入到文章之中。
|
||||||
|
|
||||||
|
当前git组件支持的平台包括
|
||||||
|
|
||||||
|
- `GitHub`: 无需配置URL
|
||||||
|
- `Gitee`: 无需配置URL
|
||||||
|
|
||||||
|
## 语法
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
git:[<url>@<platform>/<owner>/<repository>]
|
||||||
|
```
|
||||||
|
|
||||||
|
### url
|
||||||
|
|
||||||
|
URL是平台的URL,当前为保留字段,为后续加入自建Gitlab和Gitea做支持准备。如果您使用的是官方的平台则无需填写此字段。
|
||||||
|
|
||||||
|
URL示例:`https://gitlab.example.com/`
|
||||||
|
|
||||||
|
### platform
|
||||||
|
|
||||||
|
标识平台类型,解析器会根据不同的平台选择不同的API和返回值处理方式。当前解析器支持下列平台:
|
||||||
|
|
||||||
|
- `Github`:仅支持官方平台
|
||||||
|
- `Gitee`:仅支持官方平台
|
||||||
|
|
||||||
|
### owner
|
||||||
|
|
||||||
|
仓库所有者
|
||||||
|
|
||||||
|
### repository
|
||||||
|
|
||||||
|
仓库名称
|
||||||
|
|
||||||
|
## 示例
|
||||||
|
- GitHub平台
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
git:[@github/justice2001/halo-plugin-vditor]
|
||||||
|
```
|
||||||
|
- Gitee平台
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
git:[@gitee/blossom-editor/blossom]
|
||||||
|
```
|
||||||
|
|
||||||
|
- Gitea平台(当前未实现)
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
git:[https://git.mczhengyi.top@gitea/zhengyi/halo-plugin-vidtor]
|
||||||
|
```
|
32
doc/tips.md
32
doc/tips.md
|
@ -1,27 +1,21 @@
|
||||||
# Tips组件
|
# Tips组件
|
||||||
|
|
||||||
使用`tips:[type]`来启用,type支持`info`, `success`, `danger`, `warn`四种类型
|
![Tips Module](assets/tips.png)
|
||||||
|
|
||||||
|
Tips为用户提供了多彩的提示组件,支持五种类型:`default`、`danger`、`success`、`warn`、`info`。
|
||||||
|
|
||||||
|
同时内容支持渲染HTML内容。
|
||||||
|
|
||||||
|
## 语法
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
tips:<type>
|
||||||
|
<content>
|
||||||
```
|
```
|
||||||
tips:info
|
|
||||||
|
|
||||||
Here is success
|
## 示例
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
tips:success
|
|
||||||
|
|
||||||
Here is success
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
|
```markdown
|
||||||
tips:danger
|
tips:danger
|
||||||
|
This is a Danger type tips
|
||||||
Here is danger
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
tips:warn
|
|
||||||
|
|
||||||
Here is Warning
|
|
||||||
```
|
```
|
||||||
|
|
|
@ -4,6 +4,15 @@ export const RENDER_CLASS = "halo-render halo-render-wrapper"
|
||||||
export const LANGUAGE_COLOR: {[key: string]: string} = {
|
export const LANGUAGE_COLOR: {[key: string]: string} = {
|
||||||
"Java": "#b07219",
|
"Java": "#b07219",
|
||||||
"JavaScript": "#f1e05a",
|
"JavaScript": "#f1e05a",
|
||||||
|
"TypeScript": "#3178c6",
|
||||||
|
"Go": "#00ADD8",
|
||||||
|
"Shell": "#89e051",
|
||||||
|
"C": "#555555",
|
||||||
|
"C++": "#f34b7d",
|
||||||
|
"C#": "#178600",
|
||||||
|
"Python": "#3572A5",
|
||||||
|
"Rust": "#3572A5",
|
||||||
|
"MATLAB": "#e16737",
|
||||||
"Lua": "#000080",
|
"Lua": "#000080",
|
||||||
"Default": "#333333"
|
"Default": "#333333"
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -2,20 +2,6 @@
|
||||||
|
|
||||||
.halo-render {
|
.halo-render {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
|
||||||
|
|
||||||
.invalid-type {
|
|
||||||
color: red;
|
|
||||||
font-size: 20px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: lightpink;
|
|
||||||
border-radius: @border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.halo-render-wrapper {
|
|
||||||
margin: 20px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
background-color: @info-color;
|
background-color: @info-color;
|
||||||
|
@ -32,3 +18,23 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: @danger-color;
|
color: @danger-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.invalid-type {
|
||||||
|
color: red;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: lightpink;
|
||||||
|
border-radius: @border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: iconfont, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.halo-render-wrapper {
|
||||||
|
margin: 20px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -29,7 +29,7 @@ export class DriveProvider implements Provider {
|
||||||
`<span>${PLATFORM_LIST[driveInfo.platform].name}</span>` +
|
`<span>${PLATFORM_LIST[driveInfo.platform].name}</span>` +
|
||||||
`</div>`
|
`</div>`
|
||||||
html += `<div class="drive-info"> ${platform} <div class="drive-title">${driveInfo.name}</div></div>`
|
html += `<div class="drive-info"> ${platform} <div class="drive-title">${driveInfo.name}</div></div>`
|
||||||
html += `<div class="download-info"><a class="btn" href="${driveInfo.link}" target="_blank">下载资源</a>`
|
html += `<div class="download-info"><a class="btn" href="${driveInfo.link}" target="_blank"><span class="iconfont"></span>下载资源</a>`
|
||||||
if (driveInfo.password) {
|
if (driveInfo.password) {
|
||||||
html += `<div class="drive-password">提取码: ${driveInfo.password}</div>`
|
html += `<div class="drive-password">提取码: ${driveInfo.password}</div>`
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
import {getGitHubInfo} from "./github-utils";
|
import {getGitHubInfo} from "./github-utils";
|
||||||
import {HALO_RENDER_CACHE_VERSION, LANGUAGE_COLOR, RENDER_CLASS} from "../../constant";
|
import {HALO_RENDER_CACHE_VERSION, LANGUAGE_COLOR, RENDER_CLASS} from "../../constant";
|
||||||
|
import {getGiteeInfo} from "./gitee-utils";
|
||||||
|
|
||||||
export const cache: {[key: string]: RepoInfo|-1} = {}
|
export const cache: {[key: string]: RepoInfo|-1} = {}
|
||||||
|
|
||||||
export const utils: {[key: string]: (args: IGitArgs) => Promise<RepoInfo>} = {
|
export const utils: {[key: string]: (args: IGitArgs) => Promise<RepoInfo>} = {
|
||||||
"github": getGitHubInfo
|
"github": getGitHubInfo,
|
||||||
|
"gitee": getGiteeInfo
|
||||||
}
|
}
|
||||||
|
|
||||||
export const icons: {[key: string]: string} = {
|
export const icons: {[key: string]: string} = {
|
||||||
|
|
|
@ -0,0 +1,35 @@
|
||||||
|
import {IGitArgs, RepoInfo} from "./git-processor";
|
||||||
|
|
||||||
|
export async function getGiteeInfo(args: IGitArgs): Promise<RepoInfo> {
|
||||||
|
const info = await fetch(`https://gitee.com/api/v5/repos/${args.owner}/${args.repo}`)
|
||||||
|
const json = await info.json()
|
||||||
|
console.log(info)
|
||||||
|
if (info.status !== 200) return new Promise((resolve, reject) => {
|
||||||
|
reject({
|
||||||
|
code: info.status,
|
||||||
|
msg: json['message']
|
||||||
|
})
|
||||||
|
})
|
||||||
|
const topics: Array<string> = []
|
||||||
|
json["project_labels"].forEach((label: {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
ident: string
|
||||||
|
}) => {
|
||||||
|
topics.push(label.name)
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
platform: "gitee",
|
||||||
|
url: json["html_url"],
|
||||||
|
owner: json["owner"]["login"],
|
||||||
|
name: json["name"],
|
||||||
|
stars: json["stargazers_count"],
|
||||||
|
watchers: json["watchers_count"],
|
||||||
|
language: json["language"],
|
||||||
|
description: json["description"],
|
||||||
|
openIssues: json["open_issues_count"],
|
||||||
|
lastPush: json["pushed_at"],
|
||||||
|
forks: json["forks_count"],
|
||||||
|
topic: topics
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue