-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
61 lines (29 loc) · 7.75 KB
/
Copy pathsearch.xml
File metadata and controls
61 lines (29 loc) · 7.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>如何向hexo博客中插入图片</title>
<link href="/2022/08/15/boke/"/>
<url>/2022/08/15/boke/</url>
<content type="html"><![CDATA[<h2 id="如何向hexo博客中插入图片"><a href="#如何向hexo博客中插入图片" class="headerlink" title="如何向hexo博客中插入图片"></a><strong>如何向hexo博客中插入图片</strong></h2><p>在md文件中插入图片的语法为<code>![]()</code>。</p><p>其中<strong>方括号</strong>是图片描述，<strong>圆括号</strong>是图片路径。</p><p>一般来说有三种图片路径，分别是<strong>相对路径，绝对路径和网络路径</strong>。</p><p>网络路径就是直接引用网上的图片，直接复制图片地址，放在圆括号中。</p><p>这种方式十分的方便，但是也存在一定的问题：</p><ul><li>图片失效导致无法加载；</li><li>打开网页后要再请求加载图片；</li><li>原网站限制，如微信公众号的图片会变得不可见等。</li></ul><p>这种方式算是有利有弊。</p><p>绝对路径是图片在计算机中的绝对位置，相对路径是相对于当前文件的路径。</p><p>由于我们的博客是要部署在网站上，部署后会生成新的文件目录，所以我们选择使用相对路径的方式。</p><p>在hexo中使用<strong>文章资源文件夹</strong>需要在<code>config.yaml</code>文件中更改一下配置：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">post_asset_folder</span><span class="token operator">:</span> <span class="token boolean">true</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>复制</p><p>当该配置被应用后，使用<code>hexo new</code>命令创建新文章时，会生成相同名字的文件夹，也就是文章资源文件夹。</p><p>由于项目会生成新的文件目录，同时会解析Markdown中的图片路径，会导致一个问题。</p><p>如在一个文件目录下，博客名为<code>1.md</code>，相应的存在一个<code>1</code>文件夹存放图片<code>image.jpg</code>。</p><p>在Typora编辑器中，普通的md文件使用<code></code>能在编辑器中正常显示图片。</p><p>在hexo中，按理说应该是使用<code></code>，但网页中却无法正常显示。</p><p>此时应该使用这样的方式来引入图片：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token punctuation">{</span><span class="token operator">%</span> asset_img image<span class="token punctuation">.</span>jpg 这是一张图片 <span class="token operator">%</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>复制</p><p>虽然可以正常引用图片了，但是这种引用图片的方式只有一句话能形容，wtf。</p><h2 id="图片插件"><a href="#图片插件" class="headerlink" title="图片插件"></a><strong>图片插件</strong></h2><p>插件hexo-renderer-marked解决了这个问题。可以只用<code>npm install hexo-renderer-marked</code>命令直接安装，之后在<code>config.yaml</code>中更改配置如下：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token literal-property property">post_asset_folder</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token literal-property property">marked</span><span class="token operator">:</span> <span class="token literal-property property">prependRoot</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token literal-property property">postAsset</span><span class="token operator">:</span> <span class="token boolean">true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>复制</p><p>之后就可以在使用<code></code>的方式愉快的插入图片了。</p><p>我们做了这么多都是为了方便，那么为什么不再方便一点呢。</p><h2 id="hexo与Typora的完美结合"><a href="#hexo与Typora的完美结合" class="headerlink" title="hexo与Typora的完美结合"></a><strong>hexo与Typora的完美结合</strong></h2><p>上述是从文章资源文件夹中引用图片，前提是<strong>先将图片放入到文章资源文件夹</strong>，如果图片数量众多的话，一张一张的放很影响效率。但是不用怕，我们有很方便的解决方法。</p><p><strong>Typora</strong>是我非常喜欢的Markdown文本编辑器，在之前的文章中也介绍过一点。</p><p>Typora对于插入图片的支持做得非常好，在<code>文件->偏好设置</code>或者直接<code><C-,></code>进入设置。</p><p>使用该配置后，可以直接复制网页中的图片地址，粘贴到Typora中后，会直接复制该图片到文章资源文件夹，同时自动更改路径。</p><p>如复制网络路径的图片<code>https://...../image.jpg</code>粘贴到Typora中叫<code>文章名</code>的文章后，图片会自动变为<code></code>。</p><p>但我们知道部署后，文件路径是不同的，所以当我们插入完所有的图片后，我们还需要删除每个图片路径中的<code>文件名/</code>。不慌，也很简单。</p><p>在Typora编辑器中，使用<code><C-f></code>快捷键，将所有的<code>文章名/</code>替换为空即可删除。</p><p>删除文件名</p><p>然后再将博客上传，图片就会随着文章一起打包。在网页中就可以看到正常显示的图片。</p>]]></content>
<categories>
<category> hexo博客 </category>
</categories>
<tags>
<tag> hexo博客 </tag>
</tags>
</entry>
<entry>
<title>精美动漫壁纸一</title>
<link href="/2022/08/12/1/"/>
<url>/2022/08/12/1/</url>
<content type="html"><![CDATA[<p>失去了约定之地的世界，即便如此，从此以后，我们要开始新的生活。——《云之彼端，约定的地方》</p><p><img src="/2022/08/12/1/14431H1I-0.jpg" alt="14431H1I-0"></p><p><img src="/2022/08/12/1/14431I429-1.jpg" alt="14431I429-1"></p><p><img src="/2022/08/12/1/14431KG3-9.jpg" alt="14431KG3-9"></p><p><img src="/2022/08/12/1/14493R2E-11.jpg" alt="14493R2E-11"></p><p><img src="/2022/08/12/1/142122GC-14.jpg" alt="142122GC-14"></p><p><img src="/2022/08/12/1/14154335E-14.jpg" alt="14154335E-14"></p><p><img src="/2022/08/12/1/1421225032-18.jpg" alt="1421225032-18"></p><p><img src="/2022/08/12/1/pic_003.jpg" alt="pic_003"></p><p><img src="/2022/08/12/1/pic_010.jpg" alt="pic_010"></p><p><img src="/2022/08/12/1/pic_011.jpg" alt="pic_011"></p><p><img src="/2022/08/12/1/pic_013.jpg" alt="pic_013"></p><p><img src="/2022/08/12/1/pic_017.jpg" alt="pic_017"></p><p><img src="/2022/08/12/1/pic_020.jpg" alt="pic_020"></p><p><img src="/2022/08/12/1/21-161023163QQ53.jpg" alt="21-161023163QQ53"></p><p><img src="/2022/08/12/1/14393Q139-13.jpg" alt="14393Q139-13"></p><p><img src="/2022/08/12/1/14393TS8-0.jpg" alt="14393TS8-0"></p>]]></content>
<categories>
<category> 动漫高清壁纸 </category>
</categories>
<tags>
<tag> 壁纸 </tag>
<tag> 动漫 </tag>
<tag> 二次元 </tag>
</tags>
</entry>
</search>