Day 15：移除 Hexo 文章点击「阅读全文」後网址出现的 `#more`

发表文章时，如果文章内容太长，我们会善用 <!-- more --> 这段语法，以至於让首页与文章列表不会太过於落落长，要看更深入内容进入该篇文章即可。但是网友如果点击的是阅读全文按钮进去文章时，文章後面却会出现 #more 的後缀词，如下图所示：

会造成什麽影响？

如果是经由阅读全文进入文章的，文章网址後面不但会有 #more 的後缀词，而且浏览器会自动跳到阅读全文後的网页内容，而不是最上层。原因是 #more 是 HTML 元素里的一个 ID，如果进入以 ID 为 more 的文章网址，就会自动跳到 ID 为 more 的区块。

或许这是一个满贴心的设计，能够让网友在文章列表看完前面内文後，点击阅读全文後浏览器还直接跳到下一段内文，不过以我个人为例，我是希望网友不管是点击标题还是阅读全文，他都能够连到同一个网址，而且都可以是从最顶层开始浏览。

如何解决这个问题？

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

找到以下这段语法：

        <!--/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，就是文章网址。

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

此时，我们要做的就是将 #more 删除即可，如此一来之後网友点击阅读全文，就会指向後缀没有 #more 的文章网址了。

後记

我们都力求网址愈短、愈简单愈好，因此如果能够让网站所有指向的链结愈短，我认为是一件比较好的事情。不过如果你认为想要将文章从头看到尾按标题、在文章列表看文内容想接续看的就按阅读全文，我认为也是可以，就看各位如何选择了。

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