效果图如下

41f7232f41837d699de333290ab4a99.png

设计思路

  1. 拆分：文字标题导航，和文章详情
  2. 数据库设计：导航这个是维护在数据库之中，文字可以用md 文件存储到文件系统中，数据库维护标题，id,及文档地址，评价等等字段
  3. 回显：查询文档id 后，返回html页面内容，前端去解析

技术选型

使用pegdown 解析md

  1. <dependency>
  2.         <groupId>org.pegdown</groupId>
  3.         <artifactId>pegdown</artifactId>
  4.         <version>1.6.0</version>
  5. </dependency>
  1. package com.zifeiy.page;
  3. import java.io.BufferedReader;
  4. import java.io.File;
  5. import java.io.FileInputStream;
  6. import java.io.IOException;
  7. import java.io.InputStreamReader;
  9. import org.pegdown.PegDownProcessor;
  11. public class PageGenerator {
  13.     public void generateHtml(File mdFile) throws IOException {
  14.         BufferedReader br = new BufferedReader(new InputStreamReader(new FileInputStream(mdFile), "UTF-8"));
  15.         String line = null;
  16.         String mdContent = "";
  17.         while ((line = br.readLine()) != null) {
  18.             mdContent += line + "\r\n";
  19.         }
  20.         PegDownProcessor pdp = new PegDownProcessor(Integer.MAX_VALUE);
  21.         String htmlContent = pdp.markdownToHtml(mdContent);
  22.         System.out.println(htmlContent);
  23.     }
  26.     public static void main(String[] args) throws IOException {
  27.         PageGenerator pageGenerator = new PageGenerator();
  28.         pageGenerator.generateHtml(new File("D:\\projects\\zifeiy.github.io\\笔记\\20181125我的第一篇博客.md"));
  29.     }
  31. }