导出 PDF 电子册时如何进行自定义
电子书中的页面如何微调
在 PDF 电子书导出的时候,有一个设置项为 PDF 页面 CSS
,可以设定额外的 CSS 规则,影响单页面的样式。
比如下面的 CSS,将影响到页面内的 H1、H2、H3 对应的标题字体色、页面二级标题的字体色、页面标题的底部分割线条样式。
h1,h2,h3{color:#111 !important}
.title_container h2{color:#999 !important}
.title_container {border-bottom: 3px double #eeeeee !important;}
电子书的封面如何自定义
一、使用图片作为封面
如果目录内有 cover.png
或 cover.jpg
, 并且导出电子书的时候,没有勾选 自动封面
,那么对应的图片就会成为电子书的封面,这个封面图片建议按照 A4 的尺寸设计。
二、使用 cover.md
在所导出的根目录内如果有 cover.md
, 则会使用其作为电子书的封面。下面是一个示例,其实质是一个 HTML 的代码片段(Markdown 内可直接写 HTML):
<div style="height:29cm" >
<div style="text-align:center; color:#333; padding-top:9.5cm;font-size:3.5em;line-height:0.8" >
电子书的标题
<div style="font-size:16px;margin-top:50px;line-height:1.2;color:#555;">电子书的二级标题</div>
</div>
</div>
三、使用自动封面
如果没有 cover.md
对应,且在导出电子书的时候勾选了 自动封面
,则 MarkEditor 会根据指定的电子书标题、二级标题,自动生成一个 cover.md
,但其字体、字体颜色会根据当前的主题,自动匹配。
电子书目录索引如何自定义
默认情况下,电子书的目录索引的样式,会根据当前 App 的主题而自适应。你也可以自行进行定义:
Shift+Command+C
打开数据目录,创建一个子目录pdf_book
, 并在里面创建一个 html 文件,文件名为toc.html
- 复制、粘贴 MarkEditor 默认的源码
- 进行修改
一般有以下方面可以修改,除此之外,不建议再另行修改源码:
1,<div class="index_title"> INDEX </div>
可以改成比如 <div class="index_title"> 目录 </div>
2,删除 {{ auto_css_content }}
并添加自己的 css 样式, 常用的几个定义内容如下:
body {background: 整体背景色;}
.index_title {color:INDEX标题的颜色}
a {color: 索引链接的颜色}
li li a { color: 二级以上索引链接的颜色}
li a {border-bottom-color: 连接线颜色}
<!DOCTYPE html>
<html>
<head>
<title> PDF BOOK TOC</title>
<meta charset="UTF-8"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<style type="text/css">
body{
font-size: 13px;
}
ul{
list-style: none;
}
li{
margin: 10px 0;
}
a{
text-decoration: none;
page-break-inside: avoid;
}
li a{
position: relative;
display: block;
padding: 4px 0 12px 0;
border-bottom-width: 1px;
border-bottom-style: solid;
}
li li a{
padding: 1px 0 8px 0;
font-size: 12px;
}
li li a .page_num{
top: 1px;
}
li a .title{
padding-left: 5px;
}
li a .page_num{
padding-left: 10px;
position: absolute;
right: 8px;
top: 6px;
}
li ul{
padding-left: 20px;
margin-bottom: 20px;
}
.index_title{
font-size: 2em;
text-align: center;
margin-bottom: 1em;
}
.toc{
padding-left: 0;
}
</style>
{{ auto_css_content }}
</head>
<body>
<div class="index_title"> INDEX </div>
<ul class="toc">
{% if root_doc.content %}
<li>
<a href="{{root_doc.pdf_page_link}}">
<span class="title">{{root_doc.title}}</span>
<span class="page_num">1</span>
</a>
</li>
{% endif %}
{% for doc in docs %}
{% set loop1 = loop %}
<li>
<a href="{{doc.pdf_page_link}}">
<span class="title">
{% if show_order_number %}{{ loop1.index }}{%endif%} {{doc.title}}
</span>
<span class="page_num">{{doc.pdf_page}}</span>
</a>
{% if doc.children %}
<ul>
{% for sub_doc in doc.children %}
{% set loop2 = loop %}
<li>
<a href="{{sub_doc.pdf_page_link}}">
<span class="title">
{% if show_order_number %}{{ loop1.index }}.{{loop2.index}}{%endif%} {{sub_doc.title}}
</span>
<span class="page_num">{{sub_doc.pdf_page}}</span>
</a>
{% if sub_doc.children %}
<ul>
{% for sub2_doc in sub_doc.children %}
{% set loop3 = loop %}
<li>
<a href="{{sub2_doc.pdf_page_link}}">
<span class="title">
{% if show_order_number %}{{ loop1.index }}.{{loop2.index}}.{{loop3.index}}{%endif%} {{sub2_doc.title}}
</span>
<span class="page_num">{{sub2_doc.pdf_page}}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> PDF BOOK TOC </title>
<meta charset="UTF-8"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<style type="text/css">
body{
font-size: 13px;
}
ul{
list-style: none;
}
li{
margin: 10px 0;
}
a{
text-decoration: none;
page-break-inside: avoid;
}
li a{
position: relative;
display: block;
padding: 4px 0 12px 0;
border-bottom-width: 1px;
border-bottom-style: solid;
}
li li a{
padding: 1px 0 8px 0;
font-size: 12px;
}
li li a .page_num{
top: 1px;
}
li a .title{
padding-left: 5px;
}
li a .page_num{
padding-left: 10px;
position: absolute;
right: 8px;
top: 6px;
}
li ul{
padding-left: 20px;
margin-bottom: 20px;
}
.index_title{
font-size: 2em;
text-align: center;
margin-bottom: 1em;
}
.toc{
padding-left: 0;
}
</style>
{{ auto_css_content }}
</head>
<body>
<div class="index_title"> INDEX </div>
<ul class="toc">
{% if root_doc.content %}
<li>
<a href="{{root_doc.pdf_page_link}}">
<span class="title">{{root_doc.title}}</span>
<span class="page_num">1</span>
</a>
</li>
{% endif %}
{% for doc in docs %}
{% set loop1 = loop %}
<li>
<a href="{{doc.pdf_page_link}}">
<span class="title">{{doc.title}}</span>
<span class="page_num">{{doc.pdf_page}}</span>
</a>
{% if doc.children %}
<ul>
{% for sub_doc in doc.children %}
<li>
<a href="{{sub_doc.pdf_page_link}}">
<span class="title">{{sub_doc.title}}</span>
<span class="page_num">{{sub_doc.pdf_page}}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</body>
</html>
版本1.2.5.3 windows,导出电子书(pdf)并没有 PDF 页面 CSS 设置项,而pdf文件打印后正文文字太小了。