Guide to embedding PDF in Hugo Blog

Known tools Link to heading

Currently, the official website provides anvithks and self-configured themes to embed PDF.
However, the original developer can only display PDF, and does not protect PDF downloads, so another developer has made improvements in cysblog and added anti-theft functions.

Hide download function.
Hide file source function.

However, the developer did not explain the modification process in detail in the document, so it is not very friendly to those who are not familiar with Java. With the help of chatgpt, the author sorted out the steps as follows (starting from downloading the official template).

Super detailed configuration of embedded PDF and anti-theft function Link to heading

Configure the official theme Link to heading

Download the theme in the root directory of the website Link to heading

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

Localize the theme configuration content Link to heading

Put the entire shortcodes folder in .\themes\hugo-embed-pdf-shortcode\layouts\shortcodes into ./layouts/(shortcodes) (if you already have a shortcodes folder here, put the embed-pdf.html file in it).
Copy the contents of .\themes\hugo-embed-pdf-shortcode\static\js (pdf-js) to /static/js/

Some official function configurations Link to heading

So far, you can actually insert PDF directly into your blog through

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

On this basis, the official also provides some hide paging, present selected page number, hide loading spinner three functions, which can be achieved through the following three statements (the backslash here does not need to be paid attention to, it is added to prevent the following statement from being mistakenly recognized as inserting PDF commands)

\{\{< 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" >\}}

Personalization Link to heading

View button optimization Link to heading

Insert

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

Hide download (cysblog optimization) Link to heading

Please directly compare the content of the embed-pdf.html file with the content below, and add the hidden download button block and pdf source link control code block by yourself.

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

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

<style>
/* Omit existing styles */
/* To hide the download button, please add the following paragraph*/
#overlayText {
display: none;
}
</style>

{{- end -}}

{{- $.Page.Scratch.Add "embed-pdf-count" 1 -}}

<div class="embed-pdf-container" id="embed-pdf-container-{{ substr (.Get "url" | md5) 0 8 }}">
<div class="pdf-loadingWrapper" id="pdf-loadingWrapper-{{ substr (.Get "url" | md5) 0 8 }}">
<div class="pdf-loading" id="pdf-loading-{{ substr (.Get "url" | md5) 0 8 }}"></div> </div> <div id="overlayText"> <a href="{{ .Get "url" }}" aria-label="Download" download> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"> <path d="M9 13c.3 0 .5-.1.7-.3L15.4 7 14 5.6l-4 4V1H8v8.6l-4-4L2.6 7l5.7 5.7c.2.2.4.3.7.3zm-7 2h14v2H2z" /> </svg> </a> </div> <canvas class="pdf-canvas" id="pdf-canvas-{{ substr (.Get "url" | md5) 0 8 }}"></canvas> </div> <div class="pdf-paginator" id="pdf-paginator-{{ substr (.Get "url" | md5) 0 8 }}"> <button id="pdf-prev-{{ substr (.Get "url" | md5) 0 8 }}">Previous</button> <button id="pdf-next-{{ substr (.Get "url" | md5) 0 8 }}">Next</button> &nbsp; &nbsp; <span> <span class="pdf-pagenum" id="pdf-pagenum-{{ substr (.Get "url" | md5) 0 8 }}"></span> / <span class="pdf-pagecount" id="pdf-pagecount-{{ substr (.Get "url" | md5) 0 8 }}"></span> </span> <a class="pdf-source" id="pdf-source-{{ substr (.Get "url" | md5) 0 8 }}" href="{{ .Get "url" }}">[pdf]</a> </div> <noscript> View the PDF file <a class="pdf-source" id="pdf-source-noscript-{{ substr (.Get "url" | md5) 0 8 }}" href="{{ .Get "url" }}">here</a>. </noscript> <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 source link display control code block (need to be added manually)**************/

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

// Control the display of source links
function showSourcef() {
if(showSource) {
pageSource.style.display = 'inline';
} else {
pageSource.style.display = 'none';
}
}

// Call showSourcef() to determine whether to display the pdf-source link
showSourcef();
/*************pdf source link display control code block ends**************/
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
if (pdfjsLib.GlobalWorkerOptions.workerSrc == '')
pdfjsLib.GlobalWorkerOptions.workerSrc = "{{.Site.BaseURL}}" + 'js/pdf-js/build/pdf.worker.js';

var pdfDoc = null,
pageNum = selectedPageNum,
pageRendering = false,
pageNumPending = null,
scale = 3,
canvas = document.getElementById('pdf-canvas-{{ substr (.Get "url" | md5) 0 8 }}'), ctx = canvas.getContext('2d'), paginator = document.getElementById("pdf-paginator-{{ substr (.Get "url" | md5) 0 8 }}"), loadingWrapper = document.getElementById('pdf-loadingWrapper-{{ substr (.Get "url" | md5) 0 8 }}');

showPaginator();
showLoader();

// 渲染 PDF 页的函数
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;

var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);

renderTask.promise.then(function() {
pageRendering = false;
showContent();

if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});

document.getElementById('pdf-pagenum-{{ substr (.Get "url" | md5) 0 8 }}').textContent = num;
}

function showContent() {
loadingWrapper.style.display = 'none';
canvas.style.display = 'block';
}

function showLoader() {
if(hideLoader) return
loadingWrapper.style.display = 'flex';
canvas.style.display = 'none';
}

function showPaginator() {
if(hidePaginator) return
paginator.style.display = 'block';
}

function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}

function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('pdf-prev-{{ substr (.Get "url" | md5) 0 8 }}').addEventListener('click', onPrevPage);

function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('pdf-next-{{ substr (.Get "url" | md5) 0 8 }}').addEventListener('click', onNextPage);

pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
var numPages = pdfDoc.numPages;
document.getElementById('pdf-pagecount-{{ substr (.Get "url" | md5) 0 8 }}').textContent = numPages;

if(pageNum > numPages) {
pageNum = numPages
}

renderPage(pageNum);
});
})();
</script>

试试插入一个pdf Link to heading

下面是一个示例

/ [pdf]