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 邦幫忙