1. 后台
var fs = require('fs') var path = require('path') var basePath = 'docs' let markdown = require('markdown-it') var md = new markdown({ html: true, langPrefix: 'code-', }) function mkCate(cate) { fs.mkdir(path.join(basePath, cate)) } function getDirsInDocsFolder() { var paths = fs.readdirSync(basePath) return paths } function getMdsInFolder(folderName) { let paths = fs.readdirSync(path.join(basePath, folderName)) return paths } function writeMdFile(fileName, folderPath, content) { fs.writeFile(path.join(basePath, folderPath, fileName + ".md"), content, function (err) { console.error(err) }) } function readMdFileToHtml(fileName, folderPath) { var content = fs.readFileSync(path.join(basePath, folderPath, fileName), 'utf-8') var html = md.render(content) return html } function main() { console.log('Starting web server') var express = require('express') var app = express() app.use(express.static('.')) const bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.get('/', function (req, res, next) { }) app.get('/cates', function (req, res, next) { var list = getDirsInDocsFolder() res.send(list) }) app.post('/cate', function (req, res, next) { const { cate } = req.body mkCate(cate) }) app.get('/mds', function (req, res, next) { const { cate } = req.query if (!cate) res.send([]) var mds = getMdsInFolder(cate) res.send(mds) }) app.get('/md', function (req, res, next) { const { cate, name } = req.query var html = readMdFileToHtml(`${name}.md`, cate) res.send(html) }) app.post('/md', function (req, res, next) { const { cate, name, content } = req.body writeMdFile(cate, name, content) res.send(content) }) var server = app.listen(8081, function () { const { host, port } = server.address() console.log('Listening on http://%s:%s', host, port) }) } main();
2. 前台
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="index.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h1>Caloch开洛奇</h1> <nav> <button onclick="add('c',prompt('Category:'));">+</button> <ul id="cates"> <li><a href="#" data-cate="cate">cate</a></li> </ul> </nav> <hr> <div class="menu"> <button onclick="add('a',prompt('Name:'));">+</button> <ul id="mds"> <li><a href="view.html?name='a1'" target="mainframe">文章.1</a></li> <li><a href="view.html" target="mainframe">No.2</a></li> <li><a href="index.html" target="mainframe">No.3</a></li> <li><a href="index.html" target="mainframe">No.4</a></li> </ul> </div> <div class="main"> <iframe id="#mainframe" name="mainframe" src="" frameborder="0"></iframe> </div> <footer> @Caloch开洛奇 2019~2020 </footer> <script> var current function add(key, val) { var iframe = document.getElementById('#mainframe') switch (key) { case 'c': mkCate(val) break; case 'a': iframe.src = "view.html?name=" + val; break; default: break; } } function getCates() { $.get('/cates', function (data) { console.log(data); let $el = $('#cates') $el.empty() data.forEach(cate => { $el.append(`<a href="#" data-cate="${cate}">${cate}</a>`); }); }) } function mkCate(cate) { $.post('/cate', { cate }, function (data) { console.log(data); }) } function getMds(cate) { $.get('/mds?cate=' + cate, function (data) { console.log(data); let $el=$('#mds') $el.empty() data.forEach(function (md) { $el.append(`<li><a href="view.html" target="mainframe">${md}</a></li>`) }) }) } function getMd(cate, name) { $.get('/md?cate=' + cate + '&name=' + name, function (data) { console.log(data); }) } function save(cate, name, content) { $.post('/md', { cate, name, content }, function (data) { console.log(data); }) } $(document).ready(function () { getCates() $('#cates').on('click', 'a', function () { let $this = $(this) current = $this.data().cate getMds(current) }) $('#menu').on('click', 'a', function () { let $this = $(this) }) }) </script> </body> </html>
3. scss样式
$common-height: 150px; @mixin with100minus($px) { width: calc(100% - #{$px}); } @mixin height100($px) { height: calc(100% - #{$px}); } * { box-sizing: border-box; } h1 { color: red; } ul li { list-style-type: none; } nav { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; text-align: right; a { margin-left: 15px; display: block; } a:first-child { margin-left: 0; } } div { float: left; } .menu { width: 200px; height: $common-height; } .main { @include with100minus(200px); @include height100(200px); background-color: orange; } iframe { width: 100%; min-height: 500px; } footer { position: fixed; bottom: 0px; text-align: center; width: 100%; } button { border-radius: 5px; }