整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
基本符號代碼轉化
譯自： https://opensource.com/article/18/10/book-to-website-epub-using-pandoc
作者： Kiko Fernandez-reyes
譯者： jlztan
通過 Markdown 和 Pandoc，可以做到編寫一次，發布兩次。
Pandoc 是一個命令行工具，用于將文件從一種標記語言轉換為另一種標記語言。在我 對 Pandoc 的簡介 一文中，我演示了如何把 Markdown 編寫的文本轉換為網頁、幻燈片和 PDF。
在這篇后續文章中，我將深入探討 Pandoc ，展示如何從同一個 Markdown 源文件生成網頁和 ePub 格式的電子書。我將使用我即將發布的電子書《 面向對象思想的 GRASP 原則 》為例進行講解，這本電子書正是通過以下過程創建的。
首先，我將解釋這本書使用的文件結構，然后介紹如何使用 Pandoc 生成網頁并將其部署在 GitHub 上；最后，我演示了如何生成對應的 ePub 格式電子書。
你可以在我的 GitHub 倉庫 Programming Fight Club 中找到相應代碼。
我用 Markdown 語法完成了所有的寫作，你也可以使用 HTML 標記，但是當 Pandoc 將 Markdown 轉換為 ePub 文檔時，引入的 HTML 標記越多，出現問題的風險就越高。我的書按照每章一個文件的形式進行組織，用 Markdown 的 H1 標記（＃）聲明每章的標題。你也可以在每個文件中放置多個章節，但將它們放在單獨的文件中可以更輕松地查找內容并在以后進行更新。
元信息遵循類似的模式，每種輸出格式都有自己的元信息文件。元信息文件定義有關文檔的信息，例如要添加到 HTML 中的文本或 ePub 的許可證。我將所有 Markdown 文檔存儲在名為 parts 的文件夾中（這對于用來生成網頁和 ePub 的 Makefile 非常重要）。下面以一個例子進行說明，讓我們看一下目錄，前言和關于本書（分為 toc.md、preface.md 和 about.md 三個文件）這三部分，為清楚起見，我們將省略其余的章節。
關于本書這部分內容的開頭部分類似：
# About this book {-}
## Who should read this book {-}
Before creating a complex software system one needs to create a solid foundation.
General Responsibility Assignment Software Principles (GRASP) are guidelines to assign
responsibilities to software classes in object-oriented programming.
每一章完成后，下一步就是添加元信息來設置網頁和 ePub 的格式。
我創建的網頁的元信息文件（web-metadata.yaml）是一個簡單的 YAML 文件，其中包含 <head> 標簽中的作者、標題、和版權等信息，以及 HTML 文件中開頭和結尾的內容。
我建議（至少）包括 web-metadata.yaml 文件中的以下字段：
---
title: <a href="/grasp-principles/toc/">GRASP principles for the Object-oriented mind</a>
author: Kiko Fernandez-Reyes
rights: 2017 Kiko Fernandez-Reyes, CC-BY-NC-SA 4.0 International
header-includes:
- |
```{=html}
<link rel="stylesheet">
<link rel="stylesheet">
```
include-before:
- |
```{=html}
<p>If you like this book, please consider
spreading the word or
<a >
buying me a coffee
</a>
</p>
```
include-after:
- |
```{=html}
<div class="footnotes">
<hr>
<div class="container">
<nav class="pagination" role="pagination">
<ul>
<p>
<span class="page-number">Designed with</span> ?? <span class="page-number"> from Uppsala, Sweden</span>
</p>
<p>
<a rel="license" ><img alt="Creative Commons License" style="border-width:0" src="http://www.jungjaehyung.com/uploadfile/2024/0806/20240806104132798.png" /></a>
</p>
</ul>
</nav>
</div>
</div>
```
---
下面幾個變量需要注意一下：
這些只是其中一部分可用的變量，查看 HTML 中的模板變量（我的文章 Pandoc簡介 中介紹了如何查看 LaTeX 的模版變量，查看 HTML 模版變量的過程是相同的）對其余變量進行了解。
網頁可以作為一個整體生成，這會產生一個包含所有內容的長頁面；也可以分成多章，我認為這樣會更容易閱讀。我將解釋如何將網頁劃分為多章，以便讀者不會被長網頁嚇到。
為了使網頁易于在 GitHub Pages 上部署，需要創建一個名為 docs 的根文件夾（這是 GitHub Pages 默認用于渲染網頁的根文件夾）。然后我們需要為 docs 下的每一章創建文件夾，將 HTML 內容放在各自的文件夾中，將文件內容放在名為 index.html 的文件中。
例如，about.md 文件將轉換成名為 index.html 的文件，該文件位于名為 about（about/index.html）的文件夾中。這樣，當用戶鍵入 http://<your-website.com>/about/ 時，文件夾中的 index.html 文件將顯示在其瀏覽器中。
下面的 Makefile 將執行上述所有操作：
# Your book files
DEPENDENCIES= toc preface about
# Placement of your HTML files
DOCS=docs
all: web
web: setup $(DEPENDENCIES)
@cp $(DOCS)/toc/index.html $(DOCS)
# Creation and copy of stylesheet and images into
# the assets folder. This is important to deploy the
# website to Github Pages.
setup:
@mkdir -p $(DOCS)
@cp -r assets $(DOCS)
# Creation of folder and index.html file on a
# per-chapter basis
$(DEPENDENCIES):
@mkdir -p $(DOCS)/$@
@pandoc -s --toc web-metadata.yaml parts/$@.md \
-c /assets/pandoc.css -o $(DOCS)/$@/index.html
clean:
@rm -rf $(DOCS)
.PHONY: all clean web setup
選項 - c /assets/pandoc.css 聲明要使用的 CSS 樣式表，它將從 /assets/pandoc.cs 中獲取。也就是說，在 <head> 標簽內，Pandoc 會添加這樣一行：
<link rel="stylesheet" href="/assets/pandoc.css">
使用下面的命令生成網頁：
make
根文件夾現在應該包含如下所示的文件結構：
.---parts
| |--- toc.md
| |--- preface.md
| |--- about.md
|
|---docs
|--- assets/
|--- index.html
|--- toc
| |--- index.html
|
|--- preface
| |--- index.html
|
|--- about
|--- index.html
通過以下步驟將網頁部署到 GitHub 上：
你可以在 GitHub Pages 的網站上獲得更多詳細信息。
我的書的網頁 便是通過上述過程生成的，可以在網頁上查看結果。
ePub 格式的元信息文件 epub-meta.yaml 和 HTML 元信息文件是類似的。主要區別在于 ePub 提供了其他模板變量，例如 publisher 和 cover-image 。ePub 格式圖書的樣式表可能與網頁所用的不同，在這里我使用一個名為 epub.css 的樣式表。
---
title: 'GRASP principles for the Object-oriented Mind'
publisher: 'Programming Language Fight Club'
author: Kiko Fernandez-Reyes
rights: 2017 Kiko Fernandez-Reyes, CC-BY-NC-SA 4.0 International
cover-image: assets/cover.png
stylesheet: assets/epub.css
...
將以下內容添加到之前的 Makefile 中：
epub:
@pandoc -s --toc epub-meta.yaml \
$(addprefix parts/, $(DEPENDENCIES:=.md)) -o $(DOCS)/assets/book.epub
用于產生 ePub 格式圖書的命令從 HTML 版本獲取所有依賴項（每章的名稱），向它們添加 Markdown 擴展，并在它們前面加上每一章的文件夾路徑，以便讓 Pandoc 知道如何進行處理。例如，如果 $（DEPENDENCIES 變量只包含 “前言” 和 “關于本書” 兩章，那么 Makefile 將會這樣調用：
@pandoc -s --toc epub-meta.yaml \
parts/preface.md parts/about.md -o $(DOCS)/assets/book.epub
Pandoc 將提取這兩章的內容，然后進行組合，最后生成 ePub 格式的電子書，并放在 Assets 文件夾中。
這是使用此過程創建 ePub 格式電子書的一個 示例 。
從 Markdown 文件創建網頁和 ePub 格式電子書的過程并不困難，但有很多細節需要注意。遵循以下大綱可能使你更容易使用 Pandoc。
via: https://opensource.com/article/18/10/book-to-website-epub-using-pandoc
作者： Kiko Fernandez-Reyes 選題： lujun9972 譯者： jlztan 校對： wxy
本文由 LCTT 原創編譯， Linux中國 榮譽推出
適應網頁設計，維護同一個網頁代碼，即可使網站在多種瀏覽設備（從桌面電腦顯示器到智能手機或其他移動產品設備）上具有更好的閱讀體驗。那如何做了？下面就談談這個問題。
1、在HTML頭部增加viewport標簽。
在網站HTML文件的開頭，增加viewport meta標簽告訴瀏覽器視口寬度等于設備屏幕寬度，且不進行初始縮放。代碼如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
這段代碼支持Chrome、Firefox、IE9以上的瀏覽器，但不支持IE8以及低于IE8的瀏覽器。
2、在CSS文件尾部增加針對不同屏幕分辨率的規則。
例如使用如下的代碼，可以讓屏幕寬度低于480像素的設備（如iPhone等），網頁側欄隱藏中部內容欄寬度自動調節。以下代碼針對Z-Blog，WordPress相關標簽名稱只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
3、布局寬度使用相對寬度。
網頁總體框架可以使用絕對寬度，但往下的內容框架、側欄等最好使用相對寬度，這樣針對不同分辨率進行修改就方便。當然也可以不用相對寬度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各個div的針對小屏幕的寬度，實際上更麻煩。
4、頁面使用相對字體（非必要）
在HTML頁面上不要使用絕對字體（px），而要使用相對字體（em），對于大多數瀏覽器來說，通常用 em = px/16 換算，例如16px就等于1em。
5、圖片自適應（非必要）
img標簽的話，只需要設置 max-width: 100%;或width:100%; 語句為：img { max-width: 98%; }
css加載的background-image如何自適應大小呢，其實CSS3中是可以實現的，添加如下語句：background-size:100% 100%;
根據上面講述的幾點內容，我針對我博客的CSS進行了一些修改，發現可以從iPhone手機瀏覽到體驗更佳的頁面，但有一個問題沒有解決，就是頂部導航欄navbar顯示有問題，換行后被下面的文章蓋住了，不知道怎樣能更好地解決這個問題（更新：經過網友提示，在導航欄divNavbar的樣式里，加入 white-space:nowrap; overflow:hidden; 即可解決這個問題）。
總之，根據上面四步進行修改的話，可以很簡單地將一個網站修改為適合多種設備瀏覽的頁面，這對于通過手機訪問網站的用戶來說，的確是一件好事。
另外分享一個視頻：
http://v.youku.com/v_show/id_XNjQ5ODkwODI0.html
切圖網（qietu.com）是一家專門從事web前端開發的公司，專注we前端開發，關注用戶體驗，歡迎訂閱微信公眾號：qietuwang
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
