Obs152｜終於能產生書籤與頁碼了！與PDF相關的外掛：Better Export PDF＆PDF++

增強PDF匯出功能：

• 添加頁首（頁眉）與頁尾（頁碼/頁數）
• 能與[[#^e5003e|Dynamic TOC]]外掛整合→保留文檔內鏈接跳轉
• 產生PDF大綱書籤
• 產生前預覽對話窗

^e5003e

1.1. 與Commander整合

• 在Tab Bar新增【Better Export PDF: Export Current File to PDF】按鈕，以方便匯出PDF操作

1.2. 頁首(頁眉)

<div style="width: 100vw;font-size:10px;text-align:center;"><span class="title"></span></div>

1.3. 頁尾

▼ 原有內容：

<div style="width: 100vw;font-size:10px;text-align:center;"><span class="pageNumber"></span> / <span class="totalPages"></span></div>

將檔名與頁碼放置在頁尾（檔名佔視窗寬度的80%，頁碼佔20%）：

<div style="width: 80vw;font-size:10px;margin-left:20px;float:left;"><span class="title"></span></div>
<div style="width: 20vw;font-size:10px;text-align:right;margin-right: 20px"><span class="pageNumber"></span> / <span class="totalPages"></span></div>

• 2024/04/08

<div style="width:95vw;font-size:10px;border-top:3px solid #622423;margin-left:20px;">
<div style="margin-top:1.5px; margin-bottom:3px; width:95vw;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>
</div>

1.4. AnuPpuccin佈景主題修改

預設的AnuPpuccin佈景主題產生的PDF頁面是灰色背景色，可使用下列CSS修改成白色背景色：

@media print {
  .anp-print .print, body.anp-print, .anp-print .markdown-rendered, :root:has(.anp-print), :root {
    background-color: white;  /*rgb(var(--ctp-base));*/
  }
}

1.5. 2024/02/21 v1.5.4

Better Export PDF v1.5.4 增加了由筆記YAML區欄位 headerTemplate與footerTemplate來分別控制該筆記頁首、頁尾模板的功能，只要在YAML區新增欄位再加上HTML內容，即可以指定樣式產生。

頁首、頁尾只有下列資料可取用，必須使用<span class="取用資料"></span>的標籤寫法:

• title: 筆記檔名
• date: 產生PDF的時間
• url: 文件位置
• pageNumber: 目前頁碼
• totalPages: 全部頁數

要在頁尾上方加上橫線的寫法：

<div style="width:100vw;font-size:10px;border-top:1px solid red;margin-left:20px;margin-right:20px;">
  <span style="width: 80%;font-size:10px;text-align:left;">
    <span class="title"></span>
  </span>
  <span style="width: 20%;font-size:10px;float:right;text-align:right">
    <span class="pageNumber"></span> / <span class="totalPages"></span>
  </span>
</div>

Reference: https://www.electronjs.org/docs/latest/api/webview-tag#webviewprinttopdfoptions

• headerTemplate string (optional) - HTML template for the print header. Should be valid HTML markup with following classes used to inject printing values into them: date (formatted print date), title (document title), url (document location), pageNumber (current page number) and totalPages (total pages in the document). For example, <span class=title></span> would generate span containing the title.
• footerTemplate string (optional) - HTML template for the print footer. Should use the same format as the headerTemplate.

2. PDF++ Plugin

PDF++是Obsidian內建的PDF檢視器的功能擴充。

選取標籤一段區塊後，點擊上方的重點按鈕，此時標示內容會被複製到剪貼簿，到筆記裡按<span class='keybs'>Ctrl+V</span>貼入，PDF即會出現高亮背景色。

2.1. 使用Callout

PDF++也設置了自己的Callout外觀，在設定裡啟用後即可使用:

再將複製的Highlight內容改成Callout語法:

> [!PDF|red] Title
> The Styles menu on the Menu bar (Figure 189) provides the most commonly used paragraph, character, and list styles, plus quick links to create and edit styles. To

[[WG76-WriterGuide.pdf#page=188&selection=137,0,142,74&color=red|p.188]]

3. 相關鏈接

✅ Better Export PDF: https://github.com/l1xnan/obsidian-better-export-pdf

✅ PDF++: https://github.com/RyotaUshio/obsidian-pdf-plus

✅ Obsidian Annotator: https://github.com/elias-sundqvist/obsidian-annotator

✅ Dynamic TOC: https://github.com/Aidurber/obsidian-plugin-dynamic-toc

✅ Obsidian commander: https://github.com/phibr0/obsidian-commander

4. 教學影片

＃＃