Hexo on 夜云泊 https://lifeislife.cn/tags/hexo/ feedId:57980998056508425+userId:73222296380546048 Recent content in Hexo on 夜云泊 Hugo -- 0.166.0 zh Sat, 03 Sep 2022 17:01:48 +0000 HEXO 博客嵌入 PDF https://lifeislife.cn/posts/hexo%E5%8D%9A%E5%AE%A2%E5%B5%8C%E5%85%A5pdf/ Sat, 03 Sep 2022 17:01:48 +0000 https://lifeislife.cn/posts/hexo%E5%8D%9A%E5%AE%A2%E5%B5%8C%E5%85%A5pdf/ <h1 id="效果">效果</h1> <iframe src="https://lifeislife.cn/myjs/pdfjs/web/viewer.html?file=/misc/Markdown书写PDF输出优雅的解决方案.pdf" style="width:100%;height:600px"></iframe> <h1 id="下载-pdfjs">下载 pdf.js</h1> <p>前往<a href="https://mozilla.github.io/pdf.js">官网</a>下载<code>pdf.js</code>。</p> <p>为了保证兼容性，建议下载旧版：</p> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img//2022/09/03/18-02-32-6b30daefccbd074fc4a35844850845ea-20220903180230-1223af.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img//2022/09/03/18-02-32-6b30daefccbd074fc4a35844850845ea-20220903180230-1223af.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img//2022/09/03/18-02-57-878391ebdd45d2771db4af95418070bf-20220903180256-c4617f.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img//2022/09/03/18-02-57-878391ebdd45d2771db4af95418070bf-20220903180256-c4617f.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <h1 id="添加-pdfjs-到主题中">添加 pdfjs 到主题中</h1> <p>将下载文件夹命名为 <code>pdfjs</code>，拷贝到 <code>themes/fluid/source/myjs</code> 中。<code>myjs</code>目录为自己新建目录。并将该目录<code>skip_render</code>。</p> <p>打开 HEXO 的配置文件（不是主题的配置文件）<code>_config.yml</code>，搜索<code>skip_render</code>，配置如下：</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">skip_render</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="l">myjs/**]</span><span class="w"> </span></span></span></code></pre></div><p>如果不配置该选项，嵌入的 PDF 将会带有博客主题边框。如图：</p> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img//2022/09/03/18-19-02-472a12f30ba4cce15617de591e302e71-20220903181901-b9ca63.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img//2022/09/03/18-19-02-472a12f30ba4cce15617de591e302e71-20220903181901-b9ca63.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <h1 id="修改-viewerjs">修改 viewer.js</h1> <p>直接使用下载的文件会报错：</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">Error: file origin does not match viewer<span class="err">&#39;</span>s </span></span></code></pre></div><p>注释<code>web/viewer.js</code>文件中的相应内容：</p> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img//2022/09/03/18-06-10-4b25b5f59c41c12783fedd145161003d-20220903180609-33dea8.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img//2022/09/03/18-06-10-4b25b5f59c41c12783fedd145161003d-20220903180609-33dea8.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <h1 id="使用方法">使用方法</h1> <p>在 Markdown 文档中使用 <code>&lt;iframe&gt;</code> 控件配合<code>pdf.js</code> 库完成 pdf 显示</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">iframe</span> <span class="na">src</span><span class="o">=</span><span class="s">&#39;/myjs/pdfjs/web/viewer.html?file=&lt;src-to-pdf&gt;&#39;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#39;width:100%;height:100%&#39;</span><span class="p">&gt;&lt;/</span><span class="nt">iframe</span><span class="p">&gt;</span> </span></span></code></pre></div><ul> <li><code>&lt;src-to-pdf&gt;</code>：需要显示的 pdf 文件的链接</li> <li><code>/myjs/pdfjs/web/viewer.html</code>：改为自己的 pdfjs 目录</li> </ul> <h1 id="参考">参考</h1> <ol> <li><a href="https://www.zywvvd.com/notes/hexo/theme/fluid/fluid-pdf/fluid-pdf/">Fluid -3- pdf.js PC，移动端查看 PDF - 又见苍岚</a></li> </ol> 效果

下载 pdf.js

前往官网下载pdf.js。

为了保证兼容性，建议下载旧版：

Responsive Image

Responsive Image

添加 pdfjs 到主题中

将下载文件夹命名为 pdfjs，拷贝到 themes/fluid/source/myjs 中。myjs目录为自己新建目录。并将该目录skip_render。

打开 HEXO 的配置文件（不是主题的配置文件）_config.yml，搜索skip_render，配置如下：

skip_render: [myjs/**]

如果不配置该选项，嵌入的 PDF 将会带有博客主题边框。如图：

Responsive Image

修改 viewer.js

直接使用下载的文件会报错：

Error: file origin does not match viewer's

注释web/viewer.js文件中的相应内容：

Responsive Image

使用方法

在 Markdown 文档中使用 <iframe> 控件配合pdf.js 库完成 pdf 显示

<iframe src='/myjs/pdfjs/web/viewer.html?file=<src-to-pdf>' style='width:100%;height:100%'></iframe>
  • <src-to-pdf>：需要显示的 pdf 文件的链接
  • /myjs/pdfjs/web/viewer.html：改为自己的 pdfjs 目录

参考

  1. Fluid -3- pdf.js PC，移动端查看 PDF - 又见苍岚
]]> 解决 OpenSSL SSL_connect: Connection was reset in connection to github.com:443 https://lifeislife.cn/posts/%E8%A7%A3%E5%86%B3openssl-ssl-connect-connection-was-reset-in-connection-to-github-com-443/ Mon, 09 Aug 2021 18:20:51 +0000 https://lifeislife.cn/posts/%E8%A7%A3%E5%86%B3openssl-ssl-connect-connection-was-reset-in-connection-to-github-com-443/ <p>在向 GitHub 推送博客时，推送失败报了这个错。也不知道是改了什么设置突然报错。SSL 的错之前遇到一次，就是刚开始配置 Git 时用的<code>https</code>协议，每次<code>push</code>都需要重新输入一次密码。改成<code>ssl</code>协议就 OK 了。当时把 Linux 环境的 Git 改了，但是现在的 Windows 下没改，猜测可能和这也有关，于是就把 URL 改了一下，结果还真好了。 在本地仓库的<code>.git</code>文件里找到<code>config</code>文件，打开后将<code>url</code>改为<code>ssl</code>协议，<code>git@github.com:XXX</code>格式的。</p> <p>将 Hexo 的配置也改了，找到仓库下的<code>_config.yml</code></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">deploy: </span></span><span class="line"><span class="cl"> type: git </span></span><span class="line"><span class="cl"> repository: 改成ssl协议地址 </span></span><span class="line"><span class="cl"> branch: master </span></span></code></pre></div> 在向 GitHub 推送博客时，推送失败报了这个错。也不知道是改了什么设置突然报错。SSL 的错之前遇到一次，就是刚开始配置 Git 时用的https协议，每次push都需要重新输入一次密码。改成ssl协议就 OK 了。当时把 Linux 环境的 Git 改了，但是现在的 Windows 下没改，猜测可能和这也有关，于是就把 URL 改了一下，结果还真好了。 在本地仓库的.git文件里找到config文件，打开后将url改为ssl协议，git@github.com:XXX格式的。

将 Hexo 的配置也改了，找到仓库下的_config.yml

deploy:
  type: git
  repository: 改成ssl协议地址
  branch: master
]]> Hexo 搭建 GitHub 博客如何添加 README 文件 https://lifeislife.cn/posts/hexo%E6%90%AD%E5%BB%BAgithub%E5%8D%9A%E5%AE%A2%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0readme%E6%96%87%E4%BB%B6/ Wed, 21 Jul 2021 12:14:46 +0000 https://lifeislife.cn/posts/hexo%E6%90%AD%E5%BB%BAgithub%E5%8D%9A%E5%AE%A2%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0readme%E6%96%87%E4%BB%B6/ <p>刚开始搭建的时候并没有为仓库添加 Readme 文件，但是后期添加也不能直接在仓库里直接添加，因为每次部署都会被自动删除。 添加方法：</p> <ul> <li>在博客根目录的<code>source</code>文件夹下新建<code>README.md</code>文件</li> <li>在根目录的<code>_config.yml</code>文件中搜索<code>skip_render</code>，并做如下更改</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">skip_render</span><span class="p">:</span><span class="w"> </span><span class="l">README.md</span><span class="w"> </span></span></span></code></pre></div><p>因为在每次<code>hexo g</code>时候，README 文件都会被自动渲染为 HTML 文件，所以在配置文件中告诉渲染器跳过这个文件不要渲染它。</p> 刚开始搭建的时候并没有为仓库添加 Readme 文件，但是后期添加也不能直接在仓库里直接添加，因为每次部署都会被自动删除。 添加方法：

  • 在博客根目录的source文件夹下新建README.md文件
  • 在根目录的_config.yml文件中搜索skip_render，并做如下更改
skip_render: README.md

因为在每次hexo g时候，README 文件都会被自动渲染为 HTML 文件，所以在配置文件中告诉渲染器跳过这个文件不要渲染它。

]]> Hexo 实时更新预览 https://lifeislife.cn/posts/hexo%E5%AE%9E%E6%97%B6%E6%9B%B4%E6%96%B0%E9%A2%84%E8%A7%88/ Tue, 20 Jul 2021 14:32:12 +0000 https://lifeislife.cn/posts/hexo%E5%AE%9E%E6%97%B6%E6%9B%B4%E6%96%B0%E9%A2%84%E8%A7%88/ <p>在项目目录下安装 <code>hexo-browsersync</code> 插件</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">npm install hexo-browsersync --save </span></span></code></pre></div><p><code>hexo s</code>启动服务后，每次保存 Markdown 文件都会实时更新页面。</p> 在项目目录下安装 hexo-browsersync 插件

npm install hexo-browsersync --save

hexo s启动服务后，每次保存 Markdown 文件都会实时更新页面。

]]> Hexo 和 GitHub 搭建博客以及更换电脑同步博客 https://lifeislife.cn/posts/hexo%E5%92%8Cgithub%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E4%BB%A5%E5%8F%8A%E6%9B%B4%E6%8D%A2%E7%94%B5%E8%84%91%E5%90%8C%E6%AD%A5%E5%8D%9A%E5%AE%A2/ Tue, 20 Jul 2021 12:04:37 +0000 https://lifeislife.cn/posts/hexo%E5%92%8Cgithub%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E4%BB%A5%E5%8F%8A%E6%9B%B4%E6%8D%A2%E7%94%B5%E8%84%91%E5%90%8C%E6%AD%A5%E5%8D%9A%E5%AE%A2/ <p>只要有<code>source</code>文件夹下所有源文件就可以重新部署，按照正常的搭建 Hexo 环境开始搭建，搭建好以后将<code>source</code>文件夹替换即可，需要应用主题就下载主题然后替换。</p> <p>注意：</p> <ul> <li>主题更换需要更改<code>_config_yml</code>文件</li> <li><code>_config_yml</code>文件中的部署配置，<code>branch:master</code>就是每次<code>hexo d</code>操作推送的分支。而在命令行每次<code>git push</code>推送的分支是设置的默认分支<code>hexo</code></li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">deploy: </span></span><span class="line"><span class="cl"> type: git </span></span><span class="line"><span class="cl"> repository: https://github.com/Dunky-Z/Dunky-Z.github.io.git </span></span><span class="line"><span class="cl"> branch: master </span></span></code></pre></div><p><a href="https://www.jianshu.com/p/0b1fccce74e0">利用 Hexo 在多台电脑上提交和更新 GitHub pages 博客 </a></p> 只要有source文件夹下所有源文件就可以重新部署，按照正常的搭建 Hexo 环境开始搭建，搭建好以后将source文件夹替换即可，需要应用主题就下载主题然后替换。

注意：

  • 主题更换需要更改_config_yml文件
  • _config_yml文件中的部署配置，branch:master就是每次hexo d操作推送的分支。而在命令行每次git push推送的分支是设置的默认分支hexo
deploy:
  type: git
  repository: https://github.com/Dunky-Z/Dunky-Z.github.io.git
  branch: master

利用 Hexo 在多台电脑上提交和更新 GitHub pages 博客

]]>