Download or preview PDF files
Hexo is a fast, simple & powerful blog framework. It use plugins to provide features powerful APIs for limitless extensibility. Various plugins are available to support most template engines (EJS, Pug, Nunjucks, and many others). Easily integrate with existing NPM packages (Babel, PostCSS, Less/Sass, etc).
This article is about how to download or preview PDF files in Hexo.
PDF Folders
Global PDF Folder
Hexo Assets are non-post files in the source folder, such as images, CSS or JavaScript files. For instance, If you are only going to have a few PDF files in the Hexo project, then the easiest way is to keep them in a source/pdfs directory. Then, you can preview(by Browser preview) or download them using something like
1 [pdf demo ](/pdfs/pdf-demo.pdf ).
Post PDF Folder
For users who expect to regularly serve PDF files, and for those who prefer to separate their PDF files on a post-per-post basis, Hexo also provides a more organized way to manage assets. This slightly more involved, but very convenient approach to asset management can be turned on by setting the post_asset_folder setting in _config.yml to true.
1 2 3 4 5 post_asset_folder: true
With asset folder management enabled, Hexo will create a folder every time you make a new post with the hexo new [layout]
command. This asset folder will have the same name as the markdown file associated with the post. Place all PDF files related to your post into the associated folder, and you will be able to reference them using a relative path, making for an easier and more convenient workflow.</p>
<p>For example,</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">pdf demo</span>](<span class="link">pdf-demo.pdf</span>).</span><br></pre></td></tr></table></figure>
<p>or</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">pdf demo</span>](<span class="link">./pdfs/pdf-demo.pdf</span>).</span><br></pre></td></tr></table></figure>
<h2 id="Preview-PDF-Embed">Preview PDF Embed</h2>
<p><code>theme-next-pdf</code> is a plugin that allows to preview PDF files embed in the blog pages.</p>
<h3 id="Installation">Installation</h3>
<p>Install module to source/lib directory.</p>
<p>Ihis installation is optional if youe just want to preview external PDF files.</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">Use git submodule add</span></span><br><span class="line"><span class="meta prompt_">$ </span><span class="language-bash">git submodule add https://github.com/next-theme/theme-next-pdf <span class="built_in">source</span>/lib/pdf</span></span><br><span class="line"><span class="meta prompt_"></span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">Or just use git <span class="built_in">clone</span></span></span><br><span class="line"><span class="meta prompt_">$ </span><span class="language-bash">git <span class="built_in">clone</span> https://github.com/next-theme/theme-next-pdf <span class="built_in">source</span>/lib/pdf</span></span><br><span class="line"><span class="meta prompt_"></span></span><br><span class="line"><span class="meta prompt_">$ </span><span class="language-bash">hexo clean</span></span><br></pre></td></tr></table></figure>
<h3 id="Configuration">Configuration</h3>
<p>Enable module in NexT <a href="./_config_next.yml">./_config_next.yml</a> file:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># _config_next.yml</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># PDF tag</span></span><br><span class="line"><span class="comment"># NexT will try to load pdf files natively, if failed, pdf.js will be used.</span></span><br><span class="line"><span class="comment"># So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/next-theme/theme-next-pdf</span></span><br><span class="line"><span class="attr">pdf:</span></span><br><span class="line"> <span class="comment"># DoItYourself</span></span><br><span class="line"> <span class="comment"># enable: false</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># Default height</span></span><br><span class="line"> <span class="attr">height:</span> <span class="string">500px</span></span><br></pre></td></tr></table></figure>
<h3 id="Usage">Usage</h3>
<p>In order to embed PDF files in the article, you just need to create an <code>pdf</code> tag with the URL of your local PDF file, e.g.</p>
<ul>
<li>
<p>Local PDF files</p>
<p>Remember to put <code>file.pdf</code> into the <code>source/path/to/your/file.pdf</code>, such as <code>source/pdfs/file.pdf</code>.</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% pdf /path/to/your/file.pdf %}</span><br></pre></td></tr></table></figure>
</li>
<li>
<p>External PDF files:</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% pdf http://www.africau.edu/images/default/sample.pd %}</span><br></pre></td></tr></table></figure>
</li>
</ul>
<hr>
<p>Notice: Do not use cross-origin PDF files, it might be blocked by the CORS policy, unless you have resoved it.</p>
<hr>
<p>Enjoy it!</p>
<h2 id="References">References</h2>
<p>[1] <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/next-theme/theme-next-pdf">next-theme/theme-next-pdf: PDF.js for NexT. - https://github.com/next-theme/theme-next-pdf</a></p>
<p>[2] <a target="_blank" rel="noopener external nofollow noreferrer" href="https://hexo.io/docs/tag-plugins">Tag Plugins | Hexo - https://hexo.io/docs/tag-plugins</a></p>
<p>[3] <a target="_blank" rel="noopener external nofollow noreferrer" href="https://hexo.io/docs/asset-folders.html">Asset Folders | Hexo - https://hexo.io/docs/asset-folders.html</a></p>
</div>
<footer class="post-footer">
<div class="reward-container">
<div>Buy me a coffee</div>
<button>
Donate
</button>
<div class="post-reward">
<div>
<img src="/images/bitcoin.png" alt="CloudoLife Bitcoin">
<span>Bitcoin</span>
</div>
</div>
</div>
<div class="followme">
<span>Welcome to my other publishing channels</span>
<div class="social-list">
<div class="social-item">
<a target="_blank" class="social-link" href="https://twitter.com/CloudoLife" rel="external nofollow noreferrer">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span class="label">Twitter</span>
</a>
</div>
<div class="social-item">
<a target="_blank" class="social-link" href="https://t.me/CloudoLife" rel="external nofollow noreferrer">
<span class="icon">
<i class="fab fa-telegram"></i>
</span>
<span class="label">Telegram</span>
</a>
</div>
<div class="social-item">
<a target="_blank" class="social-link" href="/atom.xml">
<span class="icon">
<i class="fa fa-rss"></i>
</span>
<span class="label">RSS</span>
</a>
</div>
</div>
</div>
<div class="post-tags">
<a href="/tags/Site/" rel="tag"># Site</a>
<a href="/tags/Blog/" rel="tag"># Blog</a>
<a href="/tags/Hexo/" rel="tag"># Hexo</a>
<a href="/tags/hexo-theme-next-NexT/" rel="tag"># hexo-theme-next (NexT)</a>
<a href="/tags/theme-next-pdf/" rel="tag"># theme-next-pdf</a>
<a href="/tags/Portable-Document-Format-PDF/" rel="tag"># Portable Document Format (PDF)</a>
<a href="/tags/Hexo-Tag-Plugin/" rel="tag"># Hexo Tag Plugin</a>
</div>
<div class="post-nav">
<div class="post-nav-item">
<a href="/2020/10/24/Site/Hexo/Use-Docker-or-Docker-Compose-to-run-Hexo/" rel="prev" title="[Hexo] Use Docker or Docker Compose to run Hexo">
<i class="fa fa-angle-left"></i> [Hexo] Use Docker or Docker Compose to run Hexo
</a>
</div>
<div class="post-nav-item">
<a href="/2020/10/31/Site/Hexo/Use-hexo-generator-searchdb-plugin-and-hexo-theme-next-NexT-theme-to-enable-local-search-in-Hexo/" rel="next" title="[Hexo] Use hexo-generator-searchdb plugin and hexo-theme-next (NexT) theme to enable local search in Hexo">
[Hexo] Use hexo-generator-searchdb plugin and hexo-theme-next (NexT) theme to enable local search in Hexo <i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</footer>
</article>
</div>
<div class="comments gitalk-container"></div>
</div>
</main>
<footer class="footer">
<div class="footer-inner">
<div class="copyright">
©
<span itemprop="copyrightYear">2024</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">CloudoLife</span>
</div>
<div class="wordcount">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="fa fa-chart-line"></i>
</span>
<span title="Word count total">2.6m</span>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="fa fa-coffee"></i>
</span>
<span title="Reading time total">39:34</span>
</span>
</div>
<div class="busuanzi-count">
<span class="post-meta-item" id="busuanzi_container_site_uv">
<span class="post-meta-item-icon">
<i class="fa fa-user"></i>
</span>
<span class="site-uv" title="Total Visitors">
<span id="busuanzi_value_site_uv"></span>
</span>
</span>
<span class="post-meta-item" id="busuanzi_container_site_pv">
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span class="site-pv" title="Total Views">
<span id="busuanzi_value_site_pv"></span>
</span>
</span>
</div>
<div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener external nofollow noreferrer" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/pisces/" rel="noopener external nofollow noreferrer" target="_blank">NexT.Pisces</a>
</div>
</div>
</footer>
<div class="toggle sidebar-toggle" role="button">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</div>
<div class="sidebar-dimmer"></div>
<div class="back-to-top" role="button" aria-label="Back to top">
<i class="fa fa-arrow-up fa-lg"></i>
<span>0%</span>
</div>
<div class="reading-progress-bar"></div>
<a role="button" class="book-mark-link book-mark-link-fixed"></a>
<noscript>
<div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/next-theme-pjax/0.6.0/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/sidebar.js"></script><script src="/js/next-boot.js"></script><script src="/js/bookmark.js"></script><script src="/js/pjax.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.1/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>
<script class="next-config" data-name="pdf" type="application/json">{"object_url":{"url":"https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.3.0/pdfobject.min.js","integrity":"sha256-JJZNsid68vnh3/zyj0lY9BN5ynxVX/12XgOa1TlaYN0="},"url":"/lib/pdf/web/viewer.html"}</script>
<script src="/js/third-party/tags/pdf.js"></script>
<script data-pjax async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gitalk/1.8.0/gitalk.css" integrity="sha256-AJnUHL7dBv6PGaeyPQJcgQPDjt/Hn/PvYZde1iqfp8U=" crossorigin="anonymous">
<script class="next-config" data-name="gitalk" type="application/json">{"enable":true,"github_id":"CloudoLife","repo":"col-hexo-CloudoLife.github.io","client_id":"4ca3ae8fb3a49237db9a","client_secret":"98d6652508799ef4350ab05aabe855e58f549112","admin_user":"benjamincloudolife","distraction_free_mode":true,"proxy":"https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token","language":null,"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/gitalk/1.8.0/gitalk.min.js","integrity":"sha256-MVK9MGD/XJaGyIghSVrONSnoXoGh3IFxLw0zfvzpxR4="},"path_md5":"c1e8a5505546e4d61842f2510f4da4fe"}</script>
<script src="/js/third-party/comments/gitalk.js"></script>
</body>
</html>