解决Hexo博客导航栏链接URL乱码问题

今年的计划之一是搭建一个博客,开始写博客。于是在网上找了一些博客程序发现用Hexo在gitHub上搭建自己的个人博客是比较简单而且易于维护的做法。
在网上找了一些教程后开始搭建,用自己比较中意的hexo-theme-next模板,发现搭建成功后导航栏链接不对,出现了URL乱码的问题。在网上搜索了一把发现有些网友也碰到了类似的问题不过都还没有解决。
我是从 https://github.com/Doublemine/hexo-theme-next.git 这里Fork下来的。仔细看了一下Fork下来的hexo-theme-next模板代码,尝试自己解决。

问题现象:

URL乱码出现在两个地方,一个是上面的导航栏,一个是右边栏的“日志”菜单部分。
导航栏链接乱码问题
导航栏链接乱码问题
右边栏的“日志”菜单部分链接乱码问题右边栏的“日志”菜单部分
发现链接后面都有乱码
链接乱码

解决方法:

1.解决导航栏URL乱码

查看themes\hexo-theme-next\layout_partials 下面的 header.swig 代码和模板的配置文件 \themes\hexo-theme-next_config.yml,发现导航栏链接乱码是因为菜单配置是有空格造成的。

<li class="menu-item menu-item-{{ itemName | replace(' ', '-') }}">
  <a href="{{ url_for(path.split('||')[0]) | trim }}" rel="section">
	{% if theme.menu_icons.enable %}
	  <i class="menu-item-icon fa fa-fw fa-{{ path.split('||')[1] | trim | default('question-circle') }}"></i> <br />
	{% endif %}
	{{ __('menu.' + name) | replace('menu.', '') }}
  </a>
</li>

因为url_for函数会将字符串转码,碰到空格或其他特殊字符会进行转意,就会出现乱码。
解决的办法是修改模板的配置文件 \themes\hexo-theme-next_config.yml文件去掉空格就是的。
原始配置文件配置如下:
原始配置文件
去掉链接字符串的空格
去掉空格后的配置文件

2.解决右边栏的“日志”菜单部分URL的乱码

在 themes\hexo-theme-next\layout_macro 找到sidebar.swig 文件 找到如下代码

{% if config.archive_dir != '/' and site.posts.length > 0 %}
  <div class="site-state-item site-state-posts">
  {% if theme.menu.archives %}
	<a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">
  {% else %}
	<a href="{{ url_for(config.archive_dir) }}">
  {% endif %}
	  <span class="site-state-item-count">{{ site.posts.length }}</span>
	  <span class="site-state-item-name">{{ __('state.posts') }}</span>
	</a>
  </div>
{% endif %}

<a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">

修改成

<a href="{{ url_for(theme.menu.archives.split('||')[0]) | trim }}">

即可解决。

大家可以直接克隆我的主题https://github.com/xiejava1018/hexo-theme-next.git 这里修复了一些bug如乱码问题等

我的github博客地址:https://xiejava.gitee.io

  • 7
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiejava1018

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值