如何还没有清楚怎么样部署网站的,请查看我另外的文章:建立网站指南

已知的工具 链接到标题

  1. 目前官方提供的是anvithks与自配主题双主题的形式来内嵌pdf。
  2. 不过原式开发者实现的这个功能只能展示pdf,对pdf下载等未做保护,因此另有开发者在cysblog进行了改进,增加了防盗功能。
  • 隐藏下载功能。
  • 隐藏文件源功能。
  1. 然而这位开发者在文档中未对修改过程做详细说明,因此对不熟悉Java的同志不太友好,经过chatgpt的帮助,笔者整理出了操作步骤如下(从下载官方模版开始)。

指南 链接到标题

在网站根目录下载主题 链接到标题

git submodule add  https://github.com/anvithks/hugo-embed-pdf-shortcode.git themes/hugo-embed-pdf-shortcode

将主题配置内容本地化 链接到标题

  1. .\themes\hugo-embed-pdf-shortcode\layouts\shortcodes里面的整个shortcodes文件夹放到./layouts/(shortcodes)里面(如果你此处已有shortcodes文件夹,那就将embed-pdf.html文件放入)。
  2. .\themes\hugo-embed-pdf-shortcode\static\js的内容(pdf-js)复制到/static/js/
  3. hugo.toml中将主题那一行修改为
theme = ["hugo-embed-pdf-shortcode", "YourCurrentTheme"]
enableInlineShortcodes = true

官方版本的基本功能 链接到标题

至此,其实已经可以通过

\{\{< embed-pdf url="./path/to/pdf/file/example.pdf">\}}

直接在博客中插入pdf了,官方在此基础上还给了一些隐藏分页、呈现选定的页码、隐藏加载微调器三个功能,通过下面的三个语句都可以实现(这里的反斜杠无需理会,是为了防止下面的语句被误识别为插入pdf命令而加入的)

\{\{< embed-pdf url="./path/to/pdf/file/example.pdf" hidePaginator="true" >\}}
\{\{< embed-pdf url="./path/to/pdf/file/example.pdf" renderPageNum="5" >\}}
\{\{< embed-pdf url="./path/to/pdf/file/example.pdf" hideLoader="true" >\}}

cysblog的优化 链接到标题

这个优化好像有一个bug,以至于后面所有含pdf引用的博客都要使用如下的文件夹形式

  • post
    • ……(其他博客)
    • <要插入pdf的博客标题>
      • index.md
      • index.en.md(可有可无,只是用于插入英文版)
      • <你要插入的pdf文件.pdf>

并且这个md名称必须是index!

查看按钮优化 链接到标题

<style>
···
</style>

中随便一个位置插入

  //PDF NAVIGATION
  .pdf-paginator {
    text-align:center;

隐藏下载 链接到标题

请直接比较embed-pdf.html文件内容与下面内容的异同,通过 /* 省略已有样式 */前后内容在embed-pdf.html中进行检索,自己添加隐藏下载按钮块与pdf源链接控制代码块即可。

{{- if not ($.Page.Scratch.Get "embed-pdf-count") -}}

<script type="text/javascript" src= '/js/pdf-js/build/pdf.js'></script>

<style>
  /* 省略已有样式 */
  /*隐藏下载按钮请加入下面一段*/
    #overlayText {
        display: none;
    }
</style>

{{- end -}}

 /* 省略已有样式 */
<script type="text/javascript">
    (function(){
    var url = '{{ .Get "url" }}';

    var hidePaginator = "{{ .Get "hidePaginator" }}" === "true";
    var hideLoader = "{{ .Get "hideLoader" }}" === "true";
    var selectedPageNum = parseInt("{{ .Get "renderPageNum" }}") || 1;
/*************pdf源链接显示控制代码块(需要手动添加的部分)**************/

    var showSource = "{{ .Get "showSource" }}" === "true";
    var pageSource = document.getElementById("pdf-source-{{ substr (.Get "url" | md5) 0 8 }}");

    // 控制源链接的显示
    function showSourcef() {
        if(showSource) {
            pageSource.style.display = 'inline';
        } else {
            pageSource.style.display = 'none';
        }
    }

    // 调用 showSourcef() 来决定是否显示 pdf-source 链接
    showSourcef();
/*************pdf源链接显示控制代码块结束**************/
  /* 省略已有样式 */   

试试插入一个pdf 链接到标题

下面是一个示例

    / [pdf]