Skip to content

Commit 7b08dd9

Browse files
xbynetxbynet
committed
improve to beautiful show
1 parent dc71df1 commit 7b08dd9

8 files changed

+810
-64
lines changed

‎111.png

-46.2 KB
Loading

‎dist/index.html

+330-2
Large diffs are not rendered by default.

‎gulpfile-xby.js

+26-17
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ var map = require('map-stream');
99
var hljs = require('./highlight.min.js');
1010
var minimist = require('minimist');
1111
var async = require('async');
12+
const Mustache = require('mustache');
13+
const uuidv4 = require('uuid/v4');
14+
1215
var BosClient = require('bce-sdk-js').BosClient;
1316

1417
var bucket = '';
@@ -55,20 +58,27 @@ function pushLevel(model, level, escapedText) {
5558
}
5659
}
5760

58-
function fmtToc(model) {
59-
var tmp = '<ol class="order">'
61+
function fmtToc(model, isFirst, name) {
62+
var tmp = null;
63+
if (isFirst) {
64+
tmp = '<ul class="list-unstyled components">';
65+
} else {
66+
var id = uuidv4();
67+
tmp = '<li><a href="#' + id + '" data-toggle="collapse" aria-expanded="false">' + name + '</a><ul class="collapse list-unstyled" id="' + id + '"><li><a href="#' + name + '">' + name + '</a></li>';
68+
}
6069
if (model.length > 0) {
6170
model.forEach(function(e, i) {
62-
var tt = '<li class="order"><a href="#' + e.name + '" >' + e.name + '</a>';
71+
var tt = null;
6372
if (e.sub.length > 0) {
64-
tt = tt + fmtToc(e.sub) + '</li>';
73+
tt = fmtToc(e.sub, false, e.name);
6574
} else {
66-
tt = tt + '</li>';
75+
tt = '<li><a href="#' + e.name + '">' + e.name + '</a></li>';
6776
}
6877
tmp = tmp + tt;
6978
});
7079
}
71-
return tmp + '</ol>';
80+
81+
return isFirst ? tmp + '</ul>' : tmp + '</ul></li>';
7282
}
7383

7484

@@ -122,6 +132,9 @@ var options = {
122132
}
123133

124134

135+
var styleDefaultData = fs.readFileSync("style.css", "utf-8");
136+
var templateHtml = fs.readFileSync('template.html', 'utf-8');
137+
var styleCustomData = '.code{padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px;}';
125138

126139
gulp.task('tohtml', function() {
127140
return gulp.src(mdPath)
@@ -145,17 +158,13 @@ gulp.task('tohtml', function() {
145158
fileContents = fileContents.replace(/\/pages\/(.*?)\.md/gm, function(match, p1, offset, string) {
146159
return '/pages/' + p1 + '.html';
147160
});
148-
fileContents = '<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>' + title + '</title>' +
149-
'<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/vs.min.css"><script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>' +
150-
'<style>.code{padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px;} .post{padding-top: 20px;margin-left: 380px;padding-bottom: 60px;max-width: 960px;}' +
151-
' ol.order{ counter-reset: item } li.order{ display: block } li.order:before { content: counters(item, ".") " "; counter-increment: item } ' +
152-
' .toc{position:fixed;width:350px;left:20px;top:20px;bottom:20px;height 600px;overflow-y:scroll;}' +
153-
'</style>' +
154-
'<meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"></head>' +
155-
'<body><div class="toc"><h3>目录：</h3>' + fmtToc(tocmodel) + '</div><div class="post">' +
156-
fileContents +
157-
'</div><script>hljs.initHighlightingOnLoad();$("li>code,p > code").addClass("code");' +
158-
'</script></body></html>';
161+
fileContents = Mustache.render(templateHtml, {
162+
title: title,
163+
content: fileContents,
164+
toc: fmtToc(tocmodel, true),
165+
styleDefault: styleDefaultData,
166+
styleCustom: styleCustomData
167+
});
159168
file.contents = new Buffer(fileContents);
160169

161170
//清空历史数据

‎gulpfile.js

+33-23
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
var gulp = require('gulp');
2-
var markdown = require('gulp-markdown');
3-
var livereload = require('gulp-livereload');
4-
var renderer = new markdown.marked.Renderer();
5-
var map = require('map-stream');
6-
var hljs = require('./highlight.min.js');
7-
var minimist = require('minimist');
1+
const gulp = require('gulp');
2+
const markdown = require('gulp-markdown');
3+
const livereload = require('gulp-livereload');
4+
const renderer = new markdown.marked.Renderer();
5+
const map = require('map-stream');
6+
const hljs = require('./highlight.min.js');
7+
const minimist = require('minimist');
8+
const uuidv4 = require('uuid/v4');
9+
const fs = require("fs");
10+
const Mustache = require('mustache');
811

912
var argsObj = minimist(process.argv.slice(3), {
1013
string: ['path', 'title'],
@@ -38,20 +41,27 @@ function pushLevel(model, level, escapedText) {
3841
}
3942
}
4043

41-
function fmtToc(model) {
42-
var tmp = '<ol class="order">'
44+
function fmtToc(model, isFirst, name) {
45+
var tmp = null;
46+
if (isFirst) {
47+
tmp = '<ul class="list-unstyled components">';
48+
} else {
49+
var id = uuidv4();
50+
tmp = '<li><a href="#' + id + '" data-toggle="collapse" aria-expanded="false">' + name + '</a><ul class="collapse list-unstyled" id="' + id + '"><li><a href="#' + name + '">' + name + '</a></li>';
51+
}
4352
if (model.length > 0) {
4453
model.forEach(function(e, i) {
45-
var tt = '<li class="order"><a href="#' + e.name + '" >' + e.name + '</a>';
54+
var tt = null;
4655
if (e.sub.length > 0) {
47-
tt = tt + fmtToc(e.sub) + '</li>';
56+
tt = fmtToc(e.sub, false, e.name);
4857
} else {
49-
tt = tt + '</li>';
58+
tt = '<li><a href="#' + e.name + '">' + e.name + '</a></li>';
5059
}
5160
tmp = tmp + tt;
5261
});
5362
}
54-
return tmp + '</ol>';
63+
64+
return isFirst ? tmp + '</ul>' : tmp + '</ul></li>';
5565
}
5666
renderer.heading = function(text, level) {
5767
var escapedText = text.toLowerCase().replace(/[^a-zA-Z\u4e00-\u9fa5]+/g, '-');
@@ -79,22 +89,22 @@ var options = {
7989
renderer: renderer
8090
}
8191

92+
var styleDefaultData = fs.readFileSync("style.css", "utf-8");
93+
var templateHtml = fs.readFileSync('template.html', 'utf-8');
94+
var styleCustomData = '.code{padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px;}';
8295

8396
gulp.task('tohtml', function() {
8497
return gulp.src(mdPath)
8598
.pipe(markdown(options))
8699
.pipe(map(function(file, cb) {
87100
var fileContents = file.contents.toString();
88-
fileContents = '<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>' + title + '</title>' +
89-
'<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/vs.min.css"><script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>' +
90-
'<style>.code{padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px;} .post{padding-top: 20px;margin-left: 380px;padding-bottom: 60px;max-width: 960px;}' +
91-
' ol.order{ counter-reset: item } li.order{ display: block } li.order:before { content: counters(item, ".") " "; counter-increment: item } ' +
92-
' .toc{position:fixed;width:350px;left:20px;top:20px;bottom:20px;height 600px;overflow-y:scroll;}' +
93-
'</style>' +
94-
'</head><body><div class="toc"><h3>目录：</h3>' + fmtToc(tocmodel) + '</div><div class="post">' +
95-
fileContents +
96-
'</div><script>hljs.initHighlightingOnLoad();$("li>code,p > code").addClass("code");' +
97-
'</script></body></html>';
101+
fileContents = Mustache.render(templateHtml, {
102+
title: title,
103+
content: fileContents,
104+
toc: fmtToc(tocmodel, true),
105+
styleDefault: styleDefaultData,
106+
styleCustom: styleCustomData
107+
});
98108
file.contents = new Buffer(fileContents);
99109
//清空历史数据
100110
tocmodel = [];

‎package.json

+24-22
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
{
2-
"name": "xxx",
3-
"version": "1.0.0",
4-
"description": "",
5-
"main": "index.js",
6-
"scripts": {
7-
"test": "echo \"Error: no test specified\" && exit 1"
8-
},
9-
"author": "",
10-
"license": "ISC",
11-
"devDependencies": {
12-
"async": "^2.5.0",
13-
"bce-sdk-js": "^0.2.7",
14-
"gulp": "^3.9.1",
15-
"gulp-livereload": "^3.8.1",
16-
"gulp-markdown": "^1.2.0",
17-
"highlight.js": "^9.12.0",
18-
"map-stream": "^0.0.7"
19-
},
20-
"dependencies": {
21-
"minimist": "^1.2.0"
22-
}
23-
}
2+
"name": "xxx",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"async": "^2.5.0",
13+
"bce-sdk-js": "^0.2.7",
14+
"gulp": "^3.9.1",
15+
"gulp-livereload": "^3.8.1",
16+
"gulp-markdown": "^1.2.0",
17+
"highlight.js": "^9.12.0",
18+
"map-stream": "^0.0.7",
19+
"uuid": "^3.1.0"
20+
},
21+
"dependencies": {
22+
"minimist": "^1.2.0",
23+
"mustache": "^2.3.0"
24+
}
25+
}

0 commit comments

Comments
 (0)