markdown 生成静态网站

数据结构

内容信息

  • 标题
  • 所有文章
  • 所有分类
  • 所有标签
标题

所有页面都有引用，因此存为全局变量使用

{
    'title':'希洛克的个人小站',
    'logo':'logo.png',
    'description':'生命不止，编码不息！'
}
文章

一个文章列表，存储所有的文章信息，对于每个文章，结构如下：

[
    {
 'title':'xxxxx',
 'link':'xxx.html',
 'category':{
     'title':'xxx',
     'link':'xxx.html'
 },
 'tags':[
     {
         'title':'xxx',
         'link':'xxx.html'
     },
     {
         'title':'xxx',
         'link':'xxx.html'
     },
     {
         'title':'xxx',
         'link':'xxx.html'
     },
 ]
},
    {
 'title':'xxxxx',
 'link':'xxx.html',
 'category':{
     'title':'xxx',
     'link':'xxx.html'
 },
 'tags':[
     {
         'title':'xxx',
         'link':'xxx.html'
     },
     {
         'title':'xxx',
         'link':'xxx.html'
     },
     {
         'title':'xxx',
         'link':'xxx.html'
     },
 ]
},
    {
 'title':'xxxxx',
 'link':'xxx.html',
 'category':{
     'title':'xxx',
     'link':'xxx.html'
 },
 'tags':[
     {
         'title':'xxx',
         'link':'xxx.html'
     },
     {
         'title':'xxx',
         'link':'xxx.html'
     },
     {
         'title':'xxx',
         'link':'xxx.html'
     },
 ]
}
]
分类

收集所有文档数据，最后生成一个所有分类的数据，应该是一个列表，结构如下：

[
{
	'title':'xxx',
	'links':['xxx.html','xxx.html','xxx.html']
},
 {
	'title':'xxx',
	'links':['xxx.html','xxx.html','xxx.html']
},
 {
	'title':'xxx',
	'links':['xxx.html','xxx.html','xxx.html']
}
]

对于每一个分类，下面有多篇文章，那么肯定不能一次加载那么多，所以这里必须要分页，也就是一个分类，生成好几个页面，然后通过上下页进行关联。

在分类页面，会显示所有分类和当前分类，以及当前页的文章。

标签

标签和分类类似，不过又有不同，因为标签和文章是多对多的，但是将文章和标签分开来处理，从标签的角度看，一个标签对应多个文章，因此也是一对多，和分类的数据结构类似。

[
{
	'title':'xxx',
	'links':['xxx.html','xxx.html','xxx.html']
},
 {
	'title':'xxx',
	'links':['xxx.html','xxx.html','xxx.html']
},
 {
	'title':'xxx',
	'links':['xxx.html','xxx.html','xxx.html']
}
]

生成思路

收集文档目录下的所有markdown，并且提取头部信息，头部信息里面包括了标题，分类，和标签，这三个基础信息。

生成三者的数据结构，最后根据数据结构，生成相应页面。

页面

主页/列表页

所有分类，文章，标签第一页，分类第一页

分类页

所有分类，文章，上下页。

标签页

所有分类，文章，上下页。

代码

依据上述分析，用代码构造数据结构

主要数据结构


export interface Article{
    title:string,
    link:string,
    category?:Category,
    tags?:Tag[]
}


export interface Category{
    title:string,
    links:string,
    articles:Article[]
}

export interface Tag{
    title:string,
    links:string,
    articles:Article[]
}

// 因为标签和分类的数据结构，完全一致，因此只声明一个就可以了，就是文章集合，使用的时候，就用这一个
export interface ArticleSet{
    title:string,
    links:string,
    articles:Article[]
}

export interface SiteConfig{

    title:string,
    description:string,
    icon:string
}

// 三个文件目录必须填写
// 列表页用于分页加载文章
// 详情页用于加载单个文章
export interface GenerateConfig{
    docPath:string,
    templatePath:string,
    distPath:string,
    listTemplate:string,
    detailTemplate:string,
}