hexo头像无法显示【解决办法】

28

问题:

头像与动画不能显示,查看源代码会发现,设置了头像链接之后,会自动在http前加上null,导致链接失效。

解决方法

解析头像图片时路径中多了个null,yiliaConfig没有定义,实际上是因为在主题配置文件中
root: 为空引起的,需要修改以下部分的代码
修改../yilia/layout/_partial/after-footer.ejs中的第5~18行代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
var yiliaConfig = {
fancybox: <%=theme.fancybox%>,
mathjax: <%=theme.mathjax%>,
animate: <%=theme.animate%>,
isHome: <%=is_home()%>,
isPost: <%=is_post()%>,
isArchive: <%=is_archive()%>,
isTag: <%=is_tag()%>,
isCategory: <%=is_category()%>,
open_in_new: <%=theme.open_in_new%>
}
</script>

修改../yilia/source/js/main.js中的第4~8行为:

1
2
3
4
5
6
var loadMobile = function(){
require(['/js/mobile.js'], function(mobile){
mobile.init();
isMobileInit = true;
});
}

修改../yilia/source/js/main.js中的第11~16行为:

1
2
3
4
5
6
var loadPC = function(){
require(['/js/pc.js'], function(pc){
pc.init();
isPCInit = true;
});
}

修改../yilia/source/js/main.js中的第58行和第75行为:
fhg4

修改../yilia/layout/_partial/left-col.ejs中的5~9行代码为:

1
2
3
4
5
<% if (theme.animate){ %>
<img lazy-src="<%=theme.avatar%>" class="js-avatar">
<%}else{%>
<img src="<%=theme.avatar%>" class="js-avatar" style="width: 100%;height: 100%;opacity: 1;">
<%}%>

修改../yilia/layout/_partial/mobile-nav.ejs中的9~13行代码为:

1
2
3
4
5
<% if (theme.animate){ %> 
<img lazy-src="<%=theme.avatar%>" class="js-avatar">
<%}else{%>
<img src="<%=theme.avatar%>" class="js-avatar" style="width: 100%;height: 100%;opacity:1;">
<%}%>

修改../yilia/source/css/_partial/highlight.styl中的第66~69行代码为:

1
2
3
    .line
font-size: 15px
.gist

去掉了height: 15px可以使显示代码的时候没有滚动条

修改后,重新执行一下,显示正常,点击小房子也有反应了

终极办法

使用 Git Shell 进入 Hexo 文件夹,输入以下两条命令:

cd Hexo
git clone https://github.com/LinuxSzp/hexo-theme-yilia themes/yilia