caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导出HTML、PDF支持带预览主题导出

Browse Source
This commit is contained in:
xiaoqi.cxq 2023-02-26 11:29:25 +08:00
parent 8713688b57
commit 1b8124f2a2
5 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -70,6 +70,7 @@ StackEdit中文版
- 支持MD文档之间链接跳转（2022-11-20） - 支持MD文档之间链接跳转（2022-11-20）
- 支持预览区域选择主题样式（2022-12-04） - 支持预览区域选择主题样式（2022-12-04）
- Gitlab的支持优化（2023-02-23） - Gitlab的支持优化（2023-02-23）
- 导出HTML、PDF支持带预览主题导出（2023-02-26）
## 国外开源版本弊端： ## 国外开源版本弊端：
- 作者已经不维护了 - 作者已经不维护了

33
src/data/templates/styledHtmlWithThemeAndTocTemplate.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{files.0.name}}</title>
<link rel="stylesheet" href="https://stackedit.cn/style.css" />
<style type="text/css">
{{{files.0.content.themeStyleContent}}}
</style>
</head>
{{#if pdf}}
<body class="stackedit stackedit--pdf">
{{else}}
<body class="stackedit">
{{/if}}
<div class="stackedit__left">
<div class="stackedit__toc">
{{#tocToHtml files.0.content.toc 2}}{{/tocToHtml}}
</div>
</div>
<div class="stackedit__right">
<div class="stackedit__html">
<div class="{{{files.0.content.themeClass}}}">
{{{files.0.content.html}}}
</div>
</div>
</div>
</body>
</html>

26
src/data/templates/styledHtmlWithThemeTemplate.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{files.0.name}}</title>
<link rel="stylesheet" href="https://stackedit.cn/style.css" />
<style type="text/css">
{{{files.0.content.themeStyleContent}}}
</style>
</head>
{{#if pdf}}
<body class="stackedit stackedit--pdf">
{{else}}
<body class="stackedit">
{{/if}}
<div class="stackedit__html">
<div class="{{{files.0.content.themeClass}}}">
{{{files.0.content.html}}}
</div>
</div>
</body>
</html>

8
src/services/exportSvc.js
View File

@ -73,6 +73,12 @@ export default {
const parsingCtx = markdownConversionSvc.parseSections(converter, content.text); const parsingCtx = markdownConversionSvc.parseSections(converter, content.text);
const conversionCtx = markdownConversionSvc.convert(parsingCtx); const conversionCtx = markdownConversionSvc.convert(parsingCtx);
const html = conversionCtx.htmlSectionList.map(htmlSanitizer.sanitizeHtml).join(''); const html = conversionCtx.htmlSectionList.map(htmlSanitizer.sanitizeHtml).join('');
const themeClass = `preview-theme--${store.state.theme.currPreviewTheme}`;
let themeStyleContent = '';
const themeStyleEle = document.getElementById(`preview-theme-${store.state.theme.currPreviewTheme}`);
if (themeStyleEle) {
themeStyleContent = themeStyleEle.innerText;
}
containerElt.innerHTML = html; containerElt.innerHTML = html;
extensionSvc.sectionPreview(containerElt, options); extensionSvc.sectionPreview(containerElt, options);
@ -128,6 +134,8 @@ export default {
yamlProperties: content.properties, yamlProperties: content.properties,
html: containerElt.innerHTML, html: containerElt.innerHTML,
toc, toc,
themeClass,
themeStyleContent,
}, },
}], }],
}; };

4
src/store/data.js
View File

@ -8,6 +8,8 @@ import defaultLayoutSettings from '../data/defaults/defaultLayoutSettings';
import plainHtmlTemplate from '../data/templates/plainHtmlTemplate.html'; import plainHtmlTemplate from '../data/templates/plainHtmlTemplate.html';
import styledHtmlTemplate from '../data/templates/styledHtmlTemplate.html'; import styledHtmlTemplate from '../data/templates/styledHtmlTemplate.html';
import styledHtmlWithTocTemplate from '../data/templates/styledHtmlWithTocTemplate.html'; import styledHtmlWithTocTemplate from '../data/templates/styledHtmlWithTocTemplate.html';
import styledHtmlWithThemeTemplate from '../data/templates/styledHtmlWithThemeTemplate.html';
import styledHtmlWithThemeAndTocTemplate from '../data/templates/styledHtmlWithThemeAndTocTemplate.html';
import jekyllSiteTemplate from '../data/templates/jekyllSiteTemplate.html'; import jekyllSiteTemplate from '../data/templates/jekyllSiteTemplate.html';
import constants from '../data/constants'; import constants from '../data/constants';
import features from '../data/features'; import features from '../data/features';
@ -97,6 +99,8 @@ const defaultTemplates = {
plainHtml: makeAdditionalTemplate('Plain HTML', plainHtmlTemplate), plainHtml: makeAdditionalTemplate('Plain HTML', plainHtmlTemplate),
styledHtml: makeAdditionalTemplate('Styled HTML', styledHtmlTemplate), styledHtml: makeAdditionalTemplate('Styled HTML', styledHtmlTemplate),
styledHtmlWithToc: makeAdditionalTemplate('Styled HTML with TOC', styledHtmlWithTocTemplate), styledHtmlWithToc: makeAdditionalTemplate('Styled HTML with TOC', styledHtmlWithTocTemplate),
styledHtmlWithTheme: makeAdditionalTemplate('Styled HTML with Theme', styledHtmlWithThemeTemplate),
styledHtmlWithThemeAndToc: makeAdditionalTemplate('Styled HTML with Theme And TOC', styledHtmlWithThemeAndTocTemplate),
jekyllSite: makeAdditionalTemplate('Jekyll site', jekyllSiteTemplate), jekyllSite: makeAdditionalTemplate('Jekyll site', jekyllSiteTemplate),
}; };