如何在 github 页上的 mkdocs 生成的网站中嵌入本地 pdf 文件？

How to embed a local pdf file in mkdocs generated website on github-pages?

我有一个私人存储库，其中包含一些 pdf 文件。但是，内容是使用 MkDocs (material) 和 github 页面公开提供的。我想在网站上嵌入这些本地可用的 pdf 文件（使用 MkDocs 创建）。到目前为止我试过这个：

# Method-1
<object data="/path/to/file.pdf" type="application/pdf">
    <embed src="/path/to/file.pdf" type="application/pdf" />
</object>

# Method-2
<a href="/path/to/file.pdf" class="image fit"><i class="fas fa-file-pdf"></i></a>

/path/to/file.pdf 从 Google 云端硬盘（公开可用）共享时有效。但是，当我尝试显示保存在我的 github 存储库中的 docs 文件夹中的文件时，它不起作用。

How can I show them from the repository itself (without having to copy and share the files from GDrive)?

对于 github 页：

相关Material

解决方案

使 pdf 文件在已发布的站点上可用的主要挑战是创建一个 link 未损坏并实际从存储库访问文件的文件。

Mkdocs 带有很多扩展，增强了框架的功能。您需要使用 pymdownx.pathconverter 来解决这个问题。

例子

我把截图中的内容模糊掉了。但是你可以看到嵌入的pdf文件是什么样子的。

这是您需要使用的部分。

一个。安装 PyMdown 扩展

连同其他必备品...

pip install \
    mkdocs \
    mkdocs-material \
    mkdocs-material-extensions \
    pymdown-extensions

乙。更新 mkdocs.yml

将以下内容添加到 mkdocs.yml

# Strategy: Use an absolute path
markdown_extensions:
  - pymdownx.pathconverter:
      base_path: 'YOUR_REPO_NAME' # default: ''
      relative_path: '' # default ''
      absolute: true # default: false
      tags: 'a script img link object embed'

reader 的注意事项：您还可以在 pymdownx.pathconverter 中使用相对路径。有关详细信息，请参阅文档。但是，为简洁起见，如果您最终使用相对路径，则需要执行以下操作：

  1. 在 pymdownx.pathconverter 的扩展设置中设置 absolute: false。

  2. 使用相对路径（这应考虑到您的 URL 路径层次结构）。例如，如果您将 pdf 文件 docs/artifacts/file.pdf 嵌入到降价文件 docs/howto/embedding_pdf.md 中，而降价文件的 link 看起来像 http://localhost:8000/demo_mkdocs_project/howto/embedding-a-pdf-file （请参阅以下部分了解更多信息context)，那么嵌入文件时的相对路径看起来像：

"../../artifacts/file.pdf"

C。从存储库嵌入 PDF 文件

这里我们假设 pdf 文件位于：docs/artifacts/file.pdf 并且 docs 文件夹位于存储库的根目录。在下面的代码块中，我在文件 docs/howto/embedding_pdf.md.

中嵌入了一个 pdf 
<!--- file: docs/howto/embedding_pdf.md --->
{% with pdf_file = "artifacts/file.pdf" %}

{% set solid_filepdf = '<i class="fas fa-file-pdf"></i>' %}
{% set empty_filepdf = '<i class="far fa-file-pdf"></i>' %}

## Example: Embedding a PDF file

<object data="{{ pdf_file }}" type="application/pdf">
    <embed src="{{ pdf_file }}" type="application/pdf" />
</object>

## Example: Creating a link to a PDF file

<a href="{{ pdf_file }}" class="image fit">{{ solid_filepdf }}</a>

{% endwith %}

D.在mkdocs.yml

中的页面添加一个link

这将创建一个顶级 link HowTo，然后在其下创建另一个 link Embedding a PDF file.

# file: mkdocs.yml

nav:
  - Home: index.md
  - HowTo:
    - Embedding a PDF file: howto/embedding_pdf.md

这四个步骤实质上使 pdf 文件在您的本地服务器 (localhost:8000) 和 github 页面（如果您在那里发布）上都可用。文件的 link 将类似于：

  • 本地服务器：http://localhost:8000/demo_mkdocs_project/artifacts/file.pdf

  • GitHub 页数：http://githubid.github.io/demo_mkdocs_project/artifacts/file.pdf

Note:

I assumed the

  • Git userid: githubid
  • repository name: demo_mkdocs_project

参考资料

  1. PyMdown Extensions Documentation - PathConverter