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

简介: 今年的计划之一是搭建一个博客,开始写博客。于是在网上找了一些博客程序发现用Hexo在gitHub上搭建自己的个人博客是比较简单而且易于维护的做法。在网上找了一些教程后开始搭建,用自己比较中意的hexo-theme-next模板,发现搭建成功后导航栏链接不对,出现了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 }}">

即可解决。

目录
相关文章
|
5月前
Jsoup获取url所有链接
Jsoup获取url所有链接
33 1
|
5月前
|
文字识别 算法 API
视觉智能开放平台产品使用合集之在调用接口传入的图片URL参数,文件在本地或者非上海地域OSS链接,该怎么办
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
5月前
|
Windows
iis配置http重定向302转发get请求并去掉最后的斜杠/ iis重定向 iis去除url最后的斜杠 iis重定向链接斜杠(已解决)
iis配置http重定向302转发get请求并去掉最后的斜杠/ iis重定向 iis去除url最后的斜杠 iis重定向链接斜杠(已解决)
161 0
|
存储 JavaScript
vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title
vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title
|
移动开发 JavaScript
js对H5链接url进行解密实现过程(vue)
js对H5链接url进行解密实现过程(vue)
176 0
|
2月前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
48 0
|
3月前
|
开发框架 前端开发 .NET
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
|
3月前
|
Java
JAVA 获取 URL 指定参数的值
JAVA 获取 URL 指定参数的值
46 0