解决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 }}">

即可解决。

目录
相关文章
|
7月前
|
搜索推荐 BI
从百度搜索结果列表里点击 CSDN 博客时 url 参数的含义
从百度搜索结果列表里点击 CSDN 博客时 url 参数的含义
110 3
|
9月前
|
JavaScript 前端开发
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
187 0
删除url指定链接上的参数
删除url指定链接上的参数
url链接后面加随机数-随机时间
url链接后面加随机数-随机时间
|
8月前
|
存储 JavaScript
vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title
vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title
|
9月前
|
移动开发 JavaScript
js对H5链接url进行解密实现过程(vue)
js对H5链接url进行解密实现过程(vue)
103 0
|
9月前
|
Web App开发
谷歌直链下载云盘数据集,使用谷歌云盘生成直接下载的url,示例: NeRFStudio-nerfacto默认训练数据集poster下载,nerfstudio 数据集下载链接
谷歌直链下载云盘数据集,使用谷歌云盘生成直接下载的url,示例: NeRFStudio-nerfacto默认训练数据集poster下载,nerfstudio 数据集下载链接
399 0
谷歌直链下载云盘数据集,使用谷歌云盘生成直接下载的url,示例: NeRFStudio-nerfacto默认训练数据集poster下载,nerfstudio 数据集下载链接
|
12月前
Python-爬取自己博客文章的URL
Python-爬取自己博客文章的URL
50 0
|
数据库 Python
Python实战:通过内置函数urljoin优雅的实现url链接的拼接
Python实战:通过内置函数urljoin优雅的实现url链接的拼接
150 0
|
23天前
|
JavaScript
vue截取URL中的参数
vue截取URL中的参数
13 0