Top

博客主题修改日志



本人P不出好看的博客 LOGO,因此决定把图片 LOGO 改成文字 LOGO。

相关代码:

layout/_partial/header.ejs
1
2
3
<a class="logo flat-box" href='<%= url_for("/") %>' >
<img class="xwbk-logo" src="<%= config.nav_logo %>">
</a>

修改后代码:

layout/_partial/header.ejs
1
2
3
4
5
6
7
8
9
<a class="logo flat-box" href='<%= url_for("/") %>' >
<% if (config.nav_logo) { %>
<img class="xwbk-logo" src="<%= config.nav_logo %>">
<% } else if (config.nav_title) { %>
<span><%= config.nav_title %></span>
<% } else { %>
<span>CrazyKid's Blog</span>
<% } %>
</a>

在 HEXO 配置文件里增加字段 nav_title用于配置博客 LOGO 文字。


添加导航栏图标

这个图标好像主题原来是有的,但是后来原作者更新把他给删了,我还是比较喜欢有图标的版本,自己又把他加回来了。

相关代码:

layout/_partial/header.ejs
1
2
3
4
5
6
<!-- 导航栏图标和菜单 -->
<li>
<a class='nav-<%=value.slug%> flat-box' href='<%=url_for(value.url)%>'>
<%=value.name%>
</a>
</li>

修改后代码:

layout/_partial/header.ejs
1
2
3
4
5
6
7
8
9
<!-- 导航栏图标和菜单 -->
<li>
<a class='nav-<%=value.slug%> flat-box' href='<%=url_for(value.url)%>'>
<% if (value.icon) { %>
<i class="fas <%=value.icon%> fa-fw"></i>
<% } %>
<%=value.name%>
</a>
</li>

在 HEXO 配置文件 social: 下增加字段 icon用于配置导航条项目图标。例:

_config.yml
1
2
3
4
5
nav_menu:
- name: XXX
slug: XXX
icon: fa-home #新增
url: XXX

SEO优化

相关代码:

layout/_partial/header.ejs
1
2
3
4
5
6
7
8
<meta name="description" content="<%= config.description %>" />
<% if (page.keywords && config.keywords){ %>
<meta name="keywords" content="<%= page.keywords %>, <%= config.keywords %>">
<% } else if (page.keywords) { %>
<meta name="keywords" content="<%= page.keywords %>">
<% } else if (config.keywords) { %>
<meta name="keywords" content="<%= config.keywords %>">
<% } %>

可以看到主题原作者也是有做 SEO 优化的,而且也允许文章页面自定义 keywords,但是 description 只能固定的从配置文件读取。

Hexo 官方提供了一个辅助函数叫 open_graph(),可以快速生成对搜索引擎友好的 meta 。官方文档在这里:https://hexo.io/zh-cn/docs/helpers.html#open-graph

将以上代码全部删除之,并用一句话代替:

1
<%- open_graph() %>

它还可以针对如 Twitter、Facebook、Google、Discord 等社交网站让其支持以卡片形式显示你的网页链接,如:

Twitter卡片展示效果

Discord卡片展示效果


优化文章img的配置

因为我没有使用图床,我的图片是储存在网站本地的,img 这一项就会填写相对路径,这么做就会有一个问题:文章 img 在首页可以正常显示,但是如果在文章搜索结果里就嗝屁了,网页路径变了所以显示不出来。

相关代码:

layout/_partial/post.ejs
1
2
3
4
5
<% if(post.img) { %>
<img style="margin-right: 20px;" class="post_list_img" src="<%= post.img %>">
<% } else { %>
<img style="margin-right: 20px;" class="post_list_img" src="/img/post-default-img.png">
<% } %>

修改后代码:

layout/_partial/post.ejs
1
2
3
4
5
6
7
<% if (post.img && (post.img.indexOf('/')==0 || post.img.indexOf("http")==0)) { %>
<img style="margin-right: 20px;" class="post_list_img" src="<%= post.img %>">
<% } else if(post.img) { %>
<img style="margin-right: 20px;" class="post_list_img" src="<%= config.url+config.root+config.article_icons_path+post.img %>">
<% } else { %>
<img style="margin-right: 20px;" class="post_list_img" src="/img/post-default-img.png">
<% } %>

更改后,当 img 是相对路径或完整网址的话,还是跟原来一样;否则,路径会输出一个你配置好的专门用于存放文章 img 的文件夹。

在 HEXO 配置文件里新增字段 article_icons_path,例如:

1
article_icons_path: article-icons/ #文章首页缩略图图标路径

然后存放一个例如名字叫 1.png的图片在 /source/article-icons里,文章里面这样引用:

1
img: 1.png

这样就解决了文章搜索结果里显示不出来图片的问题,也方便我管理文章的首页展示 img。

不直接把 img 写死的原因是考虑到博客网址可能以后会变,到时候修改起来麻烦。


修正评论区无法显示出来的问题

问题:在关闭文章推荐功能的文章页或自定义页面,评论系统无法显示出来

相关原代码:

layout/_partial/article.ejs
1
2
<!-- 显示推荐文章和评论 -->
<% if (post && ((config.recommended_posts && config.recommended_posts.autoDisplay == false && post.recommended_posts != false) || (post.comments && (config.livere_shortname)) )) { %>

解决办法: 这里面对于评论系统的判断不完整,追加条件 || config.changyan.enable == true

修改后代码:

layout/_partial/article.ejs
1
2
<!-- 显示推荐文章和评论 -->
<% if (post && ((config.recommended_posts && config.recommended_posts.autoDisplay == false && post.recommended_posts != false) || (post.comments && (config.livere_uid || config.changyan.enable == true)) )) { %>

备注: 上面的代码顺便将 config.livere_shortname 改为 config.livere_uid,因为在hexo配置文件中我没有发现 config.livere_shortname 这个字段,可能是原作者写错了。


修正目录高亮定位不准的问题

问题:目录有时候目录高亮块与当前页面位置不对应

相关原代码:

source/js/app.js
1
2
3
4
5
6
7
8
$(window)
.resize(() => {
anchor = getAnchor();
scrollListener();
})
.scroll(() => {
scrollListener()
});

解决办法:在 .scroll() 里增加 anchor = getAnchor();

修改后代码:

source/js/app.js
1
2
3
4
5
6
7
8
9
$(window)
.resize(() => {
anchor = getAnchor();
scrollListener();
})
.scroll(() => {
anchor = getAnchor();
scrollListener()
});

个人猜测出现这种问题的原因是,刚载入文章页面的一瞬间,图片还未显示出来(此时该<img>元素不占用高度),而 JS 已读取好各标题的位置,待图片载入后(<img>具有高度),页面的高度发生变化,而 JS 读取的标题位置未及时更新,所以显示会错误。只要每次滚动页面都重新读取,就不会有这种问题了。(其实这样做会不会产生优化方面的问题呢…?)