Hexo中如何添加本地图片
插件安装
首先我们需要安装一个图片路径转换的插件,这个插件名字是hexo-asset-imagenpm install hexo-asset-image --save
但是这个插件的内容需要修改【不然可能会出Bug】(坑…)
打开/node_modules/hexo-asset-image/index.js,将内容更换为下面的代码
1 | 'use strict'; |
2 | var cheerio = require('cheerio'); |
3 | |
4 | // http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string |
5 | function getPosition(str, m, i) { |
6 | return str.split(m, i).join(m).length; |
7 | } |
8 | |
9 | var version = String(hexo.version).split('.'); |
10 | hexo.extend.filter.register('after_post_render', function(data){ |
11 | var config = hexo.config; |
12 | if(config.post_asset_folder){ |
13 | var link = data.permalink; |
14 | if(version.length > 0 && Number(version[0]) == 3) |
15 | var beginPos = getPosition(link, '/', 1) + 1; |
16 | else |
17 | var beginPos = getPosition(link, '/', 3) + 1; |
18 | // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html". |
19 | var endPos = link.lastIndexOf('/') + 1; |
20 | link = link.substring(beginPos, endPos); |
21 | |
22 | var toprocess = ['excerpt', 'more', 'content']; |
23 | for(var i = 0; i < toprocess.length; i++){ |
24 | var key = toprocess[i]; |
25 | |
26 | var $ = cheerio.load(data[key], { |
27 | ignoreWhitespace: false, |
28 | xmlMode: false, |
29 | lowerCaseTags: false, |
30 | decodeEntities: false |
31 | }); |
32 | |
33 | $('img').each(function(){ |
34 | if ($(this).attr('src')){ |
35 | // For windows style path, we replace '\' to '/'. |
36 | var src = $(this).attr('src').replace('\\', '/'); |
37 | if(!/http[s]*.*|\/\/.*/.test(src) && |
38 | !/^\s*\//.test(src)) { |
39 | // For "about" page, the first part of "src" can't be removed. |
40 | // In addition, to support multi-level local directory. |
41 | var linkArray = link.split('/').filter(function(elem){ |
42 | return elem != ''; |
43 | }); |
44 | var srcArray = src.split('/').filter(function(elem){ |
45 | return elem != '' && elem != '.'; |
46 | }); |
47 | if(srcArray.length > 1) |
48 | srcArray.shift(); |
49 | src = srcArray.join('/'); |
50 | $(this).attr('src', config.root + link + src); |
51 | console.info&&console.info("update link as:-->"+config.root + link + src); |
52 | } |
53 | }else{ |
54 | console.info&&console.info("no src attr, skipped..."); |
55 | console.info&&console.info($(this)); |
56 | } |
57 | }); |
58 | data[key] = $.html(); |
59 | } |
60 | } |
61 | }); |
修改配置
1.把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true
2.再运行hexo n “xxxx”来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹
3.最后在xxxx.md中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照markdown的格式引入图片:![你想输入的替代文字](xxxx/图片名.jpg)
4.最后检查一下,hexo g生成页面后,进入public\2020\01\04\index.html文件中查看相关字段,可以发现,html标签内的语句是<img src="2020/01/04/xxxx/图片名.jpg">
,而不是<img src="xxxx/图片名.jpg>
。
解决hexo中表格显示问题
加入以下代码即可:
1 | {% raw %} |
2 | html tags & content |
3 | {% endraw %} |
本文链接: http://wyg0514.github.io/article/7fe0cd5a.html
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!