Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

中文 | English

项目列表模板

前言

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

使用

  1. clone 项目到本地
    git clone git@github.com:zhangjikai/project-list-template.git
    cd project-list-template
    
  2. 按照规则编写 Markdown 文件
  3. 使用 在线工具 转换为 json 文件
  4. 替换 data.json
  5. 运行程序重新编译
    npm install
    gulp
    
    如果不想重新编译文件,可以使用 without-recompile 中的文件,该文件夹下的程序使用 $.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 为空,则将该值置为 false
    • fork - 是否显示 fork 信息,默认为 true,如果 repo 为空,则将该值置为 false

项目介绍

在项目介绍中使用正常的 Markdown 语法即可,如果项目介绍过长,可以使用 <!-- more --> 分割内容, <!-- more --> 之后的内容会被折叠起来,

项目简介
<!-- more -->
项目详细介绍

完整示例

这里 是一个完整的 Markdown 文件示例。

全局配置

可以在 config.json 里进行全局配置,下面是支持的配置项:

  • category - 是否按类别显示项目,默认为 true
  • homeText - 主页按钮显示的文字
  • codeText - 代码地址按钮显示的文字
  • expandText - 详细介绍按钮显示的文字
  • collapseText - 收起介绍按钮显示的文字
  • defaultCategory - 项目默认类别
  • github - github corner,格式为 用户名 或者 用户名/仓库,为空则不显示
  • busuanzi - 是否显示 不蒜子 网页统计

About

A project list template written by Vue.js

Topics

Resources

License

Releases

No releases published

Packages

No packages published