Day 17：Next 佈景客製化 - 將 Social Link 移到主選單 - Gui Blog

使用 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 %}