解決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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章