导出 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.pngcover.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 的主题而自适应。你也可以自行进行定义:

  1. Shift+Command+C 打开数据目录,创建一个子目录 pdf_book, 并在里面创建一个 html 文件,文件名为 toc.html
  2. 复制、粘贴 MarkEditor 默认的源码
  3. 进行修改

一般有以下方面可以修改,除此之外,不建议再另行修改源码:
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>
2018-05-29 16:03
Comments
Write a Comment
  • imec17 reply

    版本1.2.5.3 windows,导出电子书(pdf)并没有 PDF 页面 CSS 设置项,而pdf文件打印后正文文字太小了。