2019Hexo博客Next主題深度美化 打造一個炫酷博客(2)-奧怪的小棧

219/8/1 更新
本文轉載於：奧怪的小棧

這篇文章告訴你在搭建好博客后,面對網上千篇一律的美化教程怎么才能添加自己獨特點,使人眼前一亮.

本站基於HEXO+Github搭建。
所以你需要准備好HEXO+Github等相關軟件和工具。詳細我會在下面放出。

前言

由於網上已經有很多而且很詳細的hexo搭博客教程了，我就不再學習他們，把全部過程都放出來了，小白可以看我整理的這篇文章。
這里主要寫一下一些平常沒人整理的SEO優化和個性化方法。

---

Next主題移動端優化

參考

---

如何調試查看效果:

以360瀏覽器為例（當然其他瀏覽器效果也差不多），按下F12進入開發者模式后，點擊左下角的手機圖標即可。

---

解決移動端按鈕被遮擋:

配置:

在~\themes\next\source\css_customcustom.styl中任意位置加入以下代碼即可。

.site-nav-toggle {
  top: 0;
  transform:  translateY(78%);
}

---

解決分類、標簽等頁面tablet設備顯示異常

Next主題中mobile與tablet是通過分辨率區分，ipad mini2豎屏是會觸發這種顯示錯誤的。

配置:

在~\themes\next\source\css_schemes\Pisces_layout.styl中如下位置，添加float: none;
介意搜索關鍵字.content-wrap或+tablet() {，回車，在后面加入注釋的那行代碼即可。

.content-wrap {
     +tablet() {
          float: none; //這行是后添加進去的
     }
}

---

解決部分頁面元素無法自適應異常

我也被這個問題困擾了好久，今天突然頓悟了，上網搜索了好久。
明明next主題是自帶自適應的，為什么還是有部分頁面元素超出界面呢？
答案很簡單。

原理：

詳細請看這篇文章
自適應網頁設計（Adaptive Web Design）：指能使網頁自適應顯示在不同大小終端設備上新網頁設計及技術。
主要注意的問題如下：

• 不使用絕對寬度，由於網頁會根據屏幕寬度調整布局，不能使用width: xxx px具體的像素值，使用百分比width:xxx %或者width:auto
• 相對大小的字體，字體也不能使用絕對大小（px），而只能使用相對大小（em）設置body字體為100%，即字體大小是頁面默認大小的100%，也是16px。例如：p{ font-size: 1.5em; }，即p的大小是默認大小的1.5倍（24px（ 24/16=1.5 ））

配置：

打開文件~\themes\next\source\css_custom\custom.styl
然后Ctrl+F，查找關鍵字 width，把所有的width項去掉就行了。
顏色塊樣式建議不要去掉！！！

---

背景圖片自適應

打開文件~\themes\next\source\css_custom\custom.styl
把這段代碼粘貼進去。（如果之前設置過背景圖片的請先刪掉相關自定義（搜索關鍵字body就行））

// 網站背景（自適應）
body {
    background:url(背景圖片路徑或網址);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;

    /*這是設置底部文字, 看個人需要修改*/
     #footer > div > div {
        color:#eee;
    }
}

即可

這里只是簡單進行了一下改進，想要更進一步的話可以看這里，但是沒有一定基礎的同學就不要輕易嘗試了。

---

設置文章目錄全部展開

使用Hexo + Next 主題編寫文章時, Next主題會自動給文章生成TOC目錄，只有當你下拉瀏覽到相應的目錄級時, TOC目錄才會展開。
當我想通過目錄快速定位某段文章的時候就很不友好了。那么如何去修改呢？

配置

打開文件~/themes/next/source/css/_common/components/sidebar/sidebar-toc.styl
找到如下的代碼

.post-toc .nav .nav-child { display: none; }

修改為

.post-toc .nav .nav-child { display: block; }

即可達到效果

---

添加分享文章功能

這個看next主題文檔就有了。
支持JiaThis分享、百度分享、AddThis分享。

---

給文章添加打分功能

這個功能是Next主題自帶的。
首先你要到官網注冊一個賬號。
注冊時候需要填自己的網站，填好就行。
然后記錄下自己的ID，就是我在圖中圈出來的五位數字

然后打開Next主題配置文件：~\themes\next_config.yml，找到關鍵字rating:
將enable: false改為enable: true 下面的Id：填入自己的剛才獲得的ID即可。

---

添加 一言

將下面這段代碼放入頁面內需要展示一句話的位置即可。
<script type="text/javascript" src="https://api.uixsj.cn/hitokoto/w.php?code=js"></script><div id="xsjhitokoto"><script>xsjhitokoto()</script></div>
中英文版 使用方法同上
<script type="text/javascript" src="https://api.uixsj.cn/hitokoto/en.php?code=js"></script><div id="enhitokoto"><script>enhitokoto()</script></div>
你可以放在文章中，側欄中。
示例（中英文版）：

---

添加 天氣預報

代碼來自這里，更多天氣預報樣式可以在這里查看
將下面這段代碼放入頁面內需要展示一句話的位置即可。
<iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tx&skin=sogou" frameborder="0" width="100%" height="30" allowtransparency="true"></iframe>
你可以放在文章中，側欄中。
示例：

當然你可以更換樣式，到這里直接可以復制代碼

---

添加 每日必應 好圖

在需要添加每日必應的頁面，將下列代碼添加上
<img src="https://api.uixsj.cn/bing/bing.php" width="300px" height="auto">
參數說明
width： 圖片寬度，可以自行修改
height="auto": 圖片高度，自動。可自行修改。

也可以作為網頁的背景
打開文件

~\themes\next\source\css_custom\custom.styl

如果你沒有設置過背景，復制粘貼下面的代碼進去即可:

body{
	background:url('https://api.uixsj.cn/bing/bing.php');
}

如果你設置過背景，找到關鍵字background:url將里面的url替換為https://api.uixsj.cn/bing/bing.php即可。
示例：

---

添加 地球儀顯示訪客位置（RevolverMaps）插件

官網
這個插件可以顯示站點上安裝后，來訪客的位置。最近的游客位置是動畫的，新的游客位置出現在全球現場。
單擊“全球”將打開“公共實時統計”頁面，提供有關訪客的詳細信息。
總之就是一個挺炫的東西，可以放在任意位置。（只是好像加載有點慢....我考慮博客速度就沒用）

配置

懶得看官網的可以直接復制這段代碼放入頁面內需要展示的位置即可。放在文章中，側欄中，底部。就不一一舉例了。
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/5.js?i=5b3ac4cx0nk&amp;m=0&amp;c=ff0000&amp;cr1=ffffff" async="async"></script>
放置底部時的效果：

自定義

你可以到官網 來調試代碼，達到你預期的效果，還有多種皮膚等都是能調的。

---

Hexo 在subtile和description中實現換行

這個功能是在寫代碼的時候用的，例如你想說明一句話時候用到換行顯示該怎么辦。
這里用我的打賞部分做個示例。
習慣更改的文本描述用雙引號括起來，同時實現
即可達到換行目的

語法:

reward_comment: "您的支持將用於博客的維護費用。<br>例如：域名續費一年需26￥"

---

添加lazyload 圖片懶加載

懶加載，簡言之就是在html加載的時候，若果img標簽的src是有內容的，在加載的過程中，img標簽就回去請求這個圖片，直到加載完，我們的瀏覽器的刷新那個圖標才會停止轉動，也就是才算請求完
懶加載能夠在你鼠標不動的時候只加載目前電腦窗口內需要展示的圖片，電腦屏幕內部需要展示的圖片就暫時不加載。
從而達到加快訪問網站速度的效果。

配置:

在你的 Hexo 目錄下，執行以下命令：

npm install hexo-lazyload-image --save

然后在你的 Hexo 目錄的配置文件 _config.yml 中任意位置添加配置:

lazyload:
  enable: true
  onlypost: false
  loadingImg: 

參數說明:
onlypost:
是否僅文章中的圖片做懶加載, 如果為 false, 則主題中的其他圖片, 也會做懶加載, 如頭像, logo 等任何圖片.
loadingImg - 圖片未加載時的代替圖:
不填寫使用默認加載圖片,如果需要自定義,添填入loading圖片地址.
如果是本地圖片，不要忘記把圖片添加到你的主題目錄下. Next 主題需將圖片放到~\themes\next\source\images目錄下,然后引用時: loadingImg: /images/圖片文件名

---

調換文章上一篇下一篇的順序

參考
看完一篇文章后，在文章底部，有上下篇的鏈接（< >），但是點 > 發現進入的居然是頁面中的的上面那篇文章？？？
大概是因為博客是從時間角度設計的，> 英語叫 next，而 next 是更新的。不過別扭就改成習慣的好了，從空間位置角度設計。
打開文件 ~/themes/next/layout/_macro/post.swig
分別搜索並修改

{% if post.next %}
<a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
<i class="fa fa-chevron-left"></i> {{ post.next.title }}

改為

{% if post.prev %}
<a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
<i class="fa fa-chevron-left"></i> {{ post.prev.title }}

再搜索（就在下方一點）

{% if post.prev %}
<a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
{{ post.prev.title }} <i class="fa fa-chevron-right"></i>

改為

{% if post.next %}
<a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
{{ post.next.title }} <i class="fa fa-chevron-right"></i>

其實就是把兩處地方的代碼互調即可。

---

自定義文章版權樣式

一直覺得next自帶的主題很丑，於是想修改一下，說干就干。

配置

參考
在目錄~/themes/next/layout/_macro/下添加my-copyright.swig，內容如下：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS庫 sweetalert 可修改路徑 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">

  <p><span>本文標題:</span>{{ page.title }}</a></p>
  <p><span>文章作者:</span>{{ theme.author }}</a></p>
  <p><span>發布時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
  <p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="點擊復制文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="復制成功！"></i></span>
  </p>
  <p><span>許可協議:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業性使用-禁止演繹 4.0 國際</a> 轉載請保留原文鏈接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({   
          title: "",   
          text: '復制成功',   
          html: false,
          timer: 500,   
          showConfirmButton: false
        });
      });
    }));  
</script>
{% endif %}

在目錄~/themes/next/source/css/_common/components/post/下添加my-post-copyright.styl，內容如下:

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #333333; // title color
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #0593d3; // link color
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改~/themes/next/layout/_macro/post.swig,如下：
在代碼

{% if theme.wechat_subscriber.enabled and not is_index %}
    <div>
        {% include 'wechat-subscriber.swig' %}
    </div>
{% endif %}

之前，新增如下代碼：

<div>
    {% if not is_index %}
        {% include 'my-copyright.swig' %}
    {% endif %}
</div>

打開~/themes/next/source/css/_common/components/post/post.styl 文件，在最后一行增加代碼：

@import "my-post-copyright"

設置新建文章自動開啟 copyright ，即新建文章自動顯示自定義的版權聲明，設置 ~/scaffolds/post.md文件，如下：

---
title: {{ title }}
date: {{ date }}
copyright: true #新增,開啟
---

注意：如果你之前發布有文章請一一在文章配置內添加代碼 copyright: true ，例如：

---

SEO優化——nofollow標簽

nofollow標簽是由谷歌領頭創新的一個反垃圾鏈接的標簽，並被百度、yahoo等各大搜索引擎廣泛支持，引用nofollow標簽的目的是：用於指示搜索引擎不要追蹤（即抓取）網頁上的帶有nofollow屬性的任何出站鏈接，以減少垃圾鏈接的分散網站權重。
網絡爬蟲會在當前頁面搜索所有的鏈接，然后一個個查看，所以就很有可能跳到別的網站就不回來了。這個時候nofollow就起作用了。

那么我們如何給添加出站鏈接加上nofollow標簽呢？

配置

打開文件 ~\themes\next\layout_macro\sidebar.swig,將搜索將下面（三處）代碼中的a標簽，並加上rel=”external nofollow”屬性即可。
修改前：

<a href="https://creativecommons.org/{% if theme.creative_commons === 'zero' %}publicdomain/zero/1.0{% else %}licenses/{{ theme.creative_commons }}/4.0{% endif %}/" class="cc-opacity" target="_blank">

<a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>

<a href="{{ link.split('||')[0] | trim }}" target="_blank" title="{{ name }}">

修改后:

<a href="https://creativecommons.org/{% if theme.creative_commons === 'zero' %}publicdomain/zero/1.0{% else %}licenses/{{ theme.creative_commons }}/4.0{% endif %}/" rel="external nofollow" class="cc-opacity" target="_blank">

<a href="{{ link }}" title="{{ name }}" rel="external nofollow" target="_blank">{{ name }}</a>

<a rel="external nofollow" href="{{ link.split('||')[0] | trim }}" target="_blank" title="{{ name }}">

---

寫作:Markdown 技巧與內置樣式

轉載自這篇文章，感謝感謝

基礎語法

看這里

分隔線和空行

這是文字
<hr />
上面是分隔線
<br />
上面是空行

效果

這是文字

---

上面是分隔線
上面是空行(什么？看不見？由於我用了壓縮代碼所以沒了8？)

引用

<blockquote>引用內容</blockquote>
<!-- 如果前后間隙很小，可以像下面這樣寫 -->
<p><blockquote>引用內容</blockquote></p>

效果

引用內容

引用內容

居中和右對齊

<!-- 居中 -->
<center>內容</center>
<!-- 右對齊 -->
<div style="text-align:right">內容</div>

效果

內容

內容

字體大小和顏色

<font color="#187892" size="number">內容</font>
<!-- 詳細請查看 http://www.w3school.com.cn/tags/tag_font.asp -->

效果

內容

Todo list

<ul>
<li><i class="fa fa-check-square"></i> 已完成</li>
<li><i class="fa fa-square"></i> 未完成</li>
</ul>

效果

• 已完成
• 未完成

Note 嵌套 Todo list

<!-- 一共有兩種寫法，效果看下面 -->
<div class="note primary">
  <i class="fa fa-check-square"></i> 已完成
  <i class="fa fa-check-square"></i> 已完成
  <i class="fa fa-check-square"></i> 已完成
  <i class="fa fa-check-square"></i> 已完成
  <i class="fa fa-check-square"></i> 已完成
  <i class="fa fa-square"></i> 未完成
  <i class="fa fa-square"></i> 未完成
  <i class="fa fa-square"></i> 未完成
</div>
<div class="note primary">
  <p>
    <i class="fa fa-check-square"></i> 已完成
    <i class="fa fa-check-square"></i> 已完成
    <i class="fa fa-check-square"></i> 已完成
    <i class="fa fa-check-square"></i> 已完成
    <i class="fa fa-check-square"></i> 已完成
    <i class="fa fa-square"></i> 未完成
    <i class="fa fa-square"></i> 未完成
    <i class="fa fa-square"></i> 未完成
  </p>
</div>

嵌套效果

已完成 已完成 已完成 已完成 已完成 未完成 未完成 未完成

已完成 已完成 已完成 已完成 已完成 未完成 未完成 未完成

Font Awesome

更多請看官網示例

放大圖標

<i class="fa fa-download"></i> 普通
<i class="fa fa-download fa-lg"></i> 變大 33%
<i class="fa fa-download fa-2x"></i> 兩倍大

效果

普通
變大 33%
兩倍大

---

后語

{% centerquote %}更多消息請關注我們: 奧怪的小棧{% endcenterquote %}

待補充......