Day 15：移除 Hexo 文章點擊「閱讀全文」後網址出現的 `#more`

發表文章時，如果文章內容太長，我們會善用 <!-- more --> 這段語法，以至於讓首頁與文章列表不會太過於落落長，要看更深入內容進入該篇文章即可。但是網友如果點擊的是閱讀全文按鈕進去文章時，文章後面卻會出現 #more 的後綴詞，如下圖所示：

原先

會造成什麼影響？

如果是經由閱讀全文進入文章的，文章網址後面不但會有 #more 的後綴詞，而且瀏覽器會自動跳到閱讀全文後的網頁內容，而不是最上層。原因是 #more 是 HTML 元素裡的一個 ID，如果進入以 ID 為 more 的文章網址，就會自動跳到 ID 為 more 的區塊。

或許這是一個滿貼心的設計，能夠讓網友在文章列表看完前面內文後，點擊閱讀全文後瀏覽器還直接跳到下一段內文，不過以我個人為例，我是希望網友不管是點擊標題還是閱讀全文，他都能夠連到同一個網址，而且都可以是從最頂層開始瀏覽。

如何解決這個問題？

修改檔案：themes/next/lauout/_macro/post.swig

找到以下這段語法：

1
2
3
4
5
6
7
8
9
10
11
12
        <!--/noindex-->
{% elif post.excerpt %}
        {{ post.excerpt }}
        <!--noindex-->
        {%- if theme.read_more_btn %}
    <div class="post-button">
            <a class="btn" href="{{ url_for(post.path) }}#more" rel="contents">
        {{ __('post.read_more') }} &raquo;
            </a>
    </div>
        {%- endif %}
        <!--/noindex-->

程式碼

截圖中，我特地將 #more 反白，這就是重點了。這個 a 鏈結即是閱讀全文按鈕，其中 href 要連線的位置為 {{ url_for(post.path) }}#more，就是文章網址。

1
<a class="btn" href="{{ url_for(post.path) }}#more"

此時，我們要做的就是將 #more 刪除即可，如此一來之後網友點擊閱讀全文，就會指向後綴沒有 #more 的文章網址了。

後記

我們都力求網址愈短、愈簡單愈好，因此如果能夠讓網站所有指向的鏈結愈短，我認為是一件比較好的事情。不過如果你認為想要將文章從頭看到尾按標題、在文章列表看文內容想接續看的就按閱讀全文，我認為也是可以，就看各位如何選擇了。

本篇文章同步發布於 iT 邦幫忙