Day 17：Next 布景客制化 - 将 Social Link 移到主选单

使用 Hexo 经营部落格也有一阵子了，渐渐也慢慢地上手！但发现 Next 这个布景主题有一个问题是，在比较小的装置或是手机上浏览时，sidebar 会不见；但我又希望 Social Link 不会因此而消失。此时该怎麽做才能够达成呢？

实作方法：将 Social Link 移到主选单

我自己使用的方式是将 Social Link 整个区块移动到主选单，让访客点击手机版主选单的下拉式方块时，所弹出的主选单下方就会显示 Social Link。实作方式如下：

修改档案：themes/next/layout/_partials/sidebar/site-overview.swig

找到以下整串语法，差不多在第 77 行处：

{%- if theme.social %}
    <div class="links-of-author motion-element">
      {%- for name, link in theme.social %}
        <span class="links-of-author-item">
        {%- set sidebarURL = link.split('||')[0] | trim %}
        {%- if theme.social_icons.enable %}
          {%- set sidebarIcon = '<i class="' + link.split('||')[1] | trim + ' fa-fw"></i>' %}
        {%- else %}
          {%- set sidebarIcon = '' %}
        {%- endif %}
        {%- if theme.social_icons.enable and theme.social_icons.icons_only %}
          {%- set sidebarText = '' %}
        {%- else %}
          {%- set sidebarText = name %}
        {%- endif %}
          {{ next_url(sidebarURL, sidebarIcon + sidebarText, {title: name + ' → ' + sidebarURL}) }}
        </span>
      {%- endfor %}
    </div>
{%- endif %}

这整段语法即是有关於 Social Link 的部分，如果要移动到主选单，就要将它移动到主选单区块内，而主选单部分要找到另外一个档案。

修改档案：themes/next/layout/_partials/header/menu.swig

找到以下这串语法：

    {%- if theme.algolia_search.enable or theme.local_search.enable %}
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger">
          {%- if theme.menu_settings.icons %}<i class="fa fa-search fa-fw"></i>{%- endif %}{{ __('menu.search') }}
        </a>
      </li>
    {%- endif %}

将刚刚复制的那段语法贴到这後面即可。

成果

以我自己部落格（使用 Scheme 为 Pisces）为例，Social Link 移动到主选单区块里了。至於在手机版，只要点击主选单下拉选单，主选单下方就会出现 Social Link。

PC 版

手机版

後记

为了解决这个问题，在网路上搜寻了已久都找不到相关资讯。因此後来是到 Hexo Taiwan Facebook 社团询问方向，因此最後就照了以上的实作方式进行。真的非常感谢 XD

所以当遇到问题且真正已经 Google 过後仍然无法解决，我认为就该到社团或是一些讨论区上询问了。也因为如此社群才能变得更加强大，而且当自己真实解决问题了之後，更能够透过分享将整个心路历程分享到网路上，毕竟取之於网路、回馈於网路嘛！

本篇文章同步发布於我的部落格 Gui Blog