今年的计划之一是搭建一个博客,开始写博客。于是在网上找了一些博客程序发现用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

解决Hexo博客导航栏链接URL乱码问题相关推荐

  1. 解决Hexo博客引用网络图片无法显示的问题

    问题 我的博文首发是在CSDN,这样在Hexo博客发布时就可以直接引用CSDN的网络图片.但是在刚deploy上去的时候,预览都是OK的,但是过几天后就全都显示不了,如下图所示 用Chrome浏览器, ...

  2. 解决hexo博客浏览器访问404

    Github Page文档: GitHub Pages可以在公共存储库中使用GitHub Free和GitHub Free用于组织,在公共和私有存储库中可以使用GitHub Pro,GitHub Te ...

  3. hexo博客优化之文章置顶+置顶标签

    本文首发于wangwlj.com 博文置顶 一种方法是手动对相关文件进行修改,具体可参考这篇文章. 另一种方法就是,目前已经有修改后支持置顶的仓库,可以直接用以下命令安装. $ npm uninsta ...

  4. 搭建hexo博客历程二- Gitee版 (主要 解决404和样式丢失)

    前期的GitHub版搭建hexo博客 前期的node .hexo等等都已经配置完成,只需要在Gitee上建库,以及修改一些配置.继续依葫芦画瓢,在Gitee上画出来.例如 https://gitee. ...

  5. hexo博客中插入图片失败——解决思路及个人最终解决办法

    文章目录 1.前言 2.解决方案 2.1 创建图片资源文件夹 2.2 typora中图像设置 2.3 插件下载 2.4 修改md图片路径 小结 1.前言 今天晚上花了大概1个小时在晚上搜寻各种hexo ...

  6. 解决coding上的hexo博客访问不了的问题

    解决coding上的hexo博客访问不了的问题 参考文章: (1)解决coding上的hexo博客访问不了的问题 (2)https://www.cnblogs.com/senup/p/12118336 ...

  7. Hexo博客更换电脑的解决办法

    1.拷贝相关文件 建立hexo博客都会有一个独立的文件夹.电脑转移时安全的做法是将整个文件夹拷贝,这其中包括三个必备的文件:config.yml(站点配置_).theme(主题文件夹).source( ...

  8. Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置

    根据下面的教程搭建的博客见这里 前言 马上要进入研究生了,不能再过浑浑噩噩的日子了,搭建一个小网站,用于记录自己所学的东西.其实,之前在腾讯云1元乞丐版上也搭建过博客,但是呢,只用来扯淡了.这次使用 ...

  9. 11.Hexo博客框架初识入门到进阶

    ​ 关注「WeiyiGeek」公众号 将我设为「特别关注」,每天带你玩转网络安全运维.应用开发.物联网IOT学习! ​ 文章目录 1.Hexo介绍 2.Hexo环境搭建 3.Hexo安装 4.Hexo ...

最新文章

  1. 平方的观测值表概率_中央气象台:“三九”大概率不会比“二九”更冷
  2. asp.net core 2使用本地https证书
  3. [转]ubuntu下ATI/Intel双显卡切换的方法
  4. windows 下redis在后台运行(亲测)
  5. chrome同步_如何在Chrome中打开或关闭同步
  6. matlab绘图白边设定
  7. D1net阅闻:Google Analytics增AI自动化分析功能
  8. 【代码笔记】iOS-获得现在的周的日期
  9. JavaScript数据结构-15.二叉树
  10. 转载:全志一些具体工作
  11. unity商店的Standard Assets自带人物移动插件的bug修改
  12. 实例解读模拟电子技术完全学习与应用
  13. Codeforces 1155F Delivery Oligopoly dp(看题解)
  14. 大数据必学Java基础(三十一):IDEA模板的使用
  15. python3 题解(20)-五位数黑圈
  16. 基于嵌入式ARM工控主板与X86工控主板的比较 1
  17. 基于电影爬虫及Spark数据分析可视化设计
  18. 听说你立志要做数据分析,不如先听听老司机的建议?
  19. org.hibernate.StaleStateException:Batch update returned unexpected row count from update [0]; actua
  20. linux修改内核logo和增加开机进度条

热门文章

  1. Snap Shots 产生的预览缩图
  2. 高效的图像处理云服务-ImageX (image processing)
  3. 计算机图形学+简单算法实现,《计算机图形学》课程设计-简单几何体的消隐算法实现.doc...
  4. 企业如何做好业务监控​?
  5. php去除正斜杠,php怎么去掉斜线
  6. 【bioinfo】二代测序在肿瘤突变检测中的错误来源和解决策略
  7. Android 子线程延时处理操作
  8. 奶爸日记14 - 记性
  9. 杰理之修改提高摄像头源视频输出帧率,确定摄像头源输出高帧率【篇】
  10. AHT10温湿度传感器总结