Obsidian Better Export PDF 插件：自定义页脚样式技巧

Obsidian Better Export PDF 插件：自定义页脚样式技巧

【免费下载链接】obsidian-better-export-pdf Obsidian PDF export enhancement plugin 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-better-export-pdf

在 Obsidian 中使用 Better Export PDF 插件时，许多用户希望为导出的 PDF 文件添加专业化的页脚样式。本文将详细介绍如何通过 HTML 和 CSS 实现带有红色分隔线的页脚效果。

基础页脚实现

最基本的页脚可以通过简单的 HTML 结构实现，包含文件名和页码信息：

<div style="display: flex; justify-content: space-between; align-items: center; margin: 1em 3em; width: calc(100% - 6em); font-size: 10px;">
    <div style="flex: 1; text-align: left;">
        <span class="title"></span>.md
    </div>
    <div style="text-align: right;">
        Seite <span class="pageNumber"></span> von <span class="totalPages"> Seiten</span>
    </div>
</div>

添加红色分隔线

要在页脚上方添加红色分隔线，可以使用 CSS 的边框属性。以下是两种实现方式：

方法一：使用边框叠加

<div style="width:70vw;font-size:10px;border-top:3px solid #622423;margin-left:20px;">
    <div style="margin-top:1.5px; margin-bottom:3px; width:70vw;font-size:10px;border-top:1px solid #622423;margin-left:0px;margin-right:20px;"></div>
    <span style="width: 80%;font-size:10px;text-align:left;">
        <span class="title"></span>.md
    </span>
    <span style="width: 20%;font-size:10px;float:right;text-align:right;margin-right:0px;">
        Seite <span class="pageNumber"></span> von <span class="totalPages"> Seiten</span>
    </span>
</div>

这种方法的优点是可以创建双线效果，第一条线较粗(3px)，第二条线较细(1px)，模拟专业文档的页脚样式。

方法二：使用伪元素

<div class="footer-container">
    <div class="footer-line"></div>
    <div class="footer-content">
        <span class="file-name"><span class="title"></span>.md</span>
        <span class="page-info">
            Seite <span class="pageNumber"></span> von <span class="totalPages"> Seiten</span>
        </span>
    </div>
</div>

<style>
.footer-line {
    border-top: 4px solid #622423;
    margin: 0 20px;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    margin: 5px 20px 0;
}
</style>

这种方法使用了更清晰的 CSS 类名，使代码更易维护和理解。

样式调整技巧

1. 颜色选择：可以使用标准颜色名称(如 red)或十六进制颜色码(如 #622423)来定义分隔线颜色。

2. 线宽控制：通过调整 border-top 属性的像素值(如 1px, 2px, 3px)可以改变分隔线的粗细。

3. 间距调整：使用 margin 和 padding 属性可以精确控制分隔线与页脚内容之间的距离。

4. 响应式宽度：使用 vw(视口宽度)单位可以使页脚宽度随页面大小变化，如 width:70vw。

专业文档样式建议

对于需要更专业外观的文档，可以考虑以下样式组合：

<div style="width:80%; margin:0 auto; font-family:Arial, sans-serif;">
    <div style="border-top:4px solid #c00000; margin-bottom:5px;"></div>
    <div style="border-top:1px solid #c00000; margin-bottom:10px;"></div>
    <div style="display:flex; justify-content:space-between; font-size:9pt; color:#555;">
        <div><span class="title"></span></div>
        <div>Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>
    </div>
</div>

这种样式创建了双红色分隔线效果，上粗下细，配合灰色文字，呈现出专业商务文档的外观。

通过以上方法和技巧，Obsidian 用户可以轻松创建符合个人或企业标准的 PDF 文档页脚样式，提升导出文档的专业性和可读性。

【免费下载链接】obsidian-better-export-pdf Obsidian PDF export enhancement plugin 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-better-export-pdf