中文 | English
项目列表模板
前言
使用 Vue.js 写的一个项目列表模板,效果如下所示。使用时不需要修改模板文件,只要按一定规则编写 Markdown 文件即可。同时该项目逻辑比较简单,可以作为 Vue.js 的一个入门示例项目。

使用
- clone 项目到本地
git clone git@github.com:zhangjikai/project-list-template.git cd project-list-template
- 按照规则编写 Markdown 文件
- 使用 在线工具 转换为 json 文件
- 替换 data.json
- 运行程序重新编译
如果不想重新编译文件,可以使用 without-recompile 中的文件,该文件夹下的程序使用npm install gulp
$.getJSON
获取 json 文件,只需替换 json 文件,不需要重新编译。
Markdown 文件规则
一个完整的项目介绍如下所示:
<!-- start -->
```config
{
"name": "Markdown 语法介绍",
"github": {
"repo": "zhangjikai/project-list-template",
"star":true,
"fork":true
},
"code": "https://github.com/zhangjikai/project-list-template",
"category": "Markdown",
"tags" : ["markdown"]
}
```
介绍 Markdown 的相关语法。
<!-- more -->
## Emphasis
Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
## Lists
* Unordered list can use asterisks
- Or minuses
+ Or pluses
项目开始标记
<!-- start -->
表示开始一个新的项目介绍,程序中通过该标识符将不同的项目介绍分开。
项目信息
程序中使用 lang 为 config
的代码块来设置项目的基本信息。代码块中是 JSON 格式的代码,下面是程序支持的所有的配置以及其默认值
```config
{
"name": "",
"home": "",
"code": "",
"category": "---------------------------",
"tags" : [],
"github": {
"repo": "",
"star":true,
"fork":true
}
}
```
name
- 项目名称home
- 项目主页,为空则不显示相关按钮code
- 项目代码地址,为空则不显示相关按钮category
- 项目类别,根据该值进行分类显示,可以在 config.json 修改默认类别的值tags
- 项目标签,数组类型github
- 显示 github 的相关信息repo
- github 地址,格式为用户名/仓库
,如zhangjikai/project-list-template
star
- 是否显示 star 信息,默认为 true,如果repo
为空,则将该值置为 falsefork
- 是否显示 fork 信息,默认为 true,如果repo
为空,则将该值置为 false
项目介绍
在项目介绍中使用正常的 Markdown 语法即可,如果项目介绍过长,可以使用 <!-- more -->
分割内容, <!-- more -->
之后的内容会被折叠起来,
项目简介
<!-- more -->
项目详细介绍
完整示例
这里 是一个完整的 Markdown 文件示例。
全局配置
可以在 config.json 里进行全局配置,下面是支持的配置项:
category
- 是否按类别显示项目,默认为 truehomeText
- 主页按钮显示的文字codeText
- 代码地址按钮显示的文字expandText
- 详细介绍按钮显示的文字collapseText
- 收起介绍按钮显示的文字defaultCategory
- 项目默认类别github
- github corner,格式为用户名
或者用户名/仓库
,为空则不显示busuanzi
- 是否显示不蒜子
网页统计