hexo的图片大小、非域名为根目录等大坑

---

title: hexo的图片大小、非域名为根目录等大坑
date: 2016-05-26
tags: [hexo,图片大小,坑]

安装hexo和yilia主题已经有段时间了，这里的坑已经记不得了。
发布博客时，还是遇到了很多坑，如果有幸和我遇到一样的问题，可能在这里你能找到解决办法。

hexo/yilia主题坑1：language

刚搭建完，就看到language不正常：如图：

_config.yml 默认的中文写法是：language: zh-ch
我们看yilia/languages/de.yml 第一个德语目录里才搜得到Über，事实上中文语言应为zh-Hans.yml。
所以此处应改为：language: zh-Hans 即可变成中文。（注意，大小写敏感）

hexo/yilia主题坑2：img 大小自定义

hexo不能处理图片大小，这真是一件头疼的事情。但是其实js源码拿来改改就能用了哈。
首先，我想我需要对图片用html格式直接书写，定义height/width/class。

<img src="/img/xxx.png" height="100px" width="200px" class="imgclass" title="title" alt="alt" />

我们进去main.js有一段处理图片的脚本

	for(var i=0,len=imgArr.length;i<len;i++){
	    var src = imgArr.eq(i).attr("src");
	    var title = imgArr.eq(i).attr("alt");
	    imgArr.eq(i).replaceWith("<a href='"+src+"' title='"+title+"' rel='fancy-group' class='fancy-ctn fancybox'><img src='"+src+"' title='"+title+"'></a>");
	}

这样写，生成的html只有src和title属性，自然识别不出height和width：

<img src="/img/xxx.png" title="alt" />
那么思路来了，我重新加些属性处理，就搞定自定义图片大小了：

	for(var i=0,len=imgArr.length;i<len;i++){
	    var src = imgArr.eq(i).attr("src");
	    var title = imgArr.eq(i).attr("alt")? imgArr.eq(i).attr("alt") : imgArr.eq(i).attr("title");
	    var height = imgArr.eq(i).attr("height")? imgArr.eq(i).attr("height") : "" ;
	    var width = imgArr.eq(i).attr("width")? imgArr.eq(i).attr("width") : "";
	    var imgclass = imgArr.eq(i).attr("class")? imgArr.eq(i).attr("class") :"" ;
	    imgArr.eq(i).replaceWith("<a href='"+src+"' title='"+title+"' rel='fancy-group' class='fancy-ctn fancybox'><img src='"+src+"' style='height:"+height+";width="+width+";' class='"+imgclass+"' title='"+title+"'></a>");
	}

我处理的js不是很美观，但是好在简单，又兼容markdown写法，够用啦！ （ 重要的是我自己看得懂 ）

hexo/yilia主题坑3：路径问题

其实yilia这个主题的样例litten是以git的根目录作为博客的站点的。http://litten.github.io/
而我搭建的hexo博客，是以/index/作为博客站点的。http://sherleysong.github.io/index/
由此引发了很多路径读取不到的问题。比如图片、js、URL，F12打开控制台一片红。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t5sjKRDH-1571989415126)(/img/hexo-error.png)]
本来对git就很不了解，之前装hexo的时候真的就吓跑了。
过了两个月，硬着头皮重新捡起来，耐心的解决这些问题，其实也不是什么大不了的。
半天就定位完毕，解决完毕。
其实就是因为litten用了域名作为根目录，部分js和img的路径写死了绝对路径，是从域名开始读取的，当然看不到问题。
换成我的/index/作为博客的根目录就有问题啦，我图片的路径其实需要在域名之后加一个/index/
所以一一找对应的地方:
几个图片出不来：关键字： weibo.png， 找到 main.styl , 更改路径：

background:url(’/index/img/weibo.png’) center no-repeat #aaaaff;

几个js出不来： 关键字：jquery.fancybox.js ， 找到 main.js ， 更改路径：

require([’/index/fancybox/jquery.fancybox.js’], function(pc){

还有一处URL会报404错误：点击头像处，url不带/index。 本地server看不出来，点了还没感觉，上了git后就404了。
url报错： 关键字：profilepic ，找到left-col.ejs , 果然，路径用了/ ， 改成：

<a href="<%- url_for(theme.menu[i]) %>" class="profilepic">

好几处坑呢，一一改掉就是赖。三个大坑捋毕。
打算加点表情，不然博文太孤单……
哈哈哈
哈哈
哈