前言

筆者在用 Jekyll 搭建個人博客時踩了很多的坑，最後發現了一款不錯的主題 jekyll-theme-next，但網上關於 Jekyll 版的 Next 主題優化教程少之又少，於是就決定自己寫一篇以供參考。

本文僅講述 Next (Jekyll) 主題的深度優化操作，關於主題的基礎配置請移步官方文檔。

主題優化

修改內容區域的寬度

打開 _sass/_custom/custom.scss 文件，新增變量：

// 修改成你期望的寬度
$content-desktop = 700px

// 當視窗超過 1600px 後的寬度
$content-desktop-large = 900px

此方法不適用於 Pisces Scheme

當你使用Pisces風格時可以用下面的方法：

編輯 Pisces Scheme 的 _sass/_schemes/Pisces/_layout.scss 文件，在最底部添加如下代碼：
```
header{ width: 90%; }
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }
```
對於有些瀏覽器或是移動設備，效果可能不是太好

編輯 Pisces Scheme 的 _sass/_schemes/Pisces/_layout.scss 文件，修改以下內容：

// 將 .header 中的 
width: $main-desktop;
// 改爲：
width: 80%;

// 將 .container .main-inner 中的：
width: $main-desktop;
// 改爲：
width: 80%;

// 將 .content-wrap 中的：
width: $content-desktop;
// 改爲：
width: calc(100% - 260px);

還是不知道如何修改的話，可以直接賦值筆者改好的 👉 傳送門

背景透明度

打開 _sass/_custom/custom.scss 文件，新增變量：

//文章內容背景改成了半透明
.content-wrap {
    background: rgba(255, 255, 255, 0.8);
}
.sidebar {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 6px #dbdbdb;
}
.site-nav{
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.8);
}
.sidebar-inner {
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 2px 6px #dbdbdb;
}
.header-inner {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 6px #dbdbdb;
}
.footer {
    font-size: 14px;
    color: #434343;
}

自定義背景圖片

打開 _sass/_custom/custom.scss 文件，新增變量：

body{
    background:url(https://images8.alphacoders.com/929/929202.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

url() 中可以時本地圖片，也可以是圖片鏈接

彩色時間軸

打開 _sass/_custom/custom.scss 文件，新增變量：

// 時間軸樣式
.posts-collapse {
    margin: 50px 0px;
}
@media (max-width: 1023px) {
    .posts-collapse {
        margin: 50px 20px;
    }
}

// 時間軸左邊線條
.posts-collapse::after {
    margin-left: -2px;
    background-image: linear-gradient(180deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);
}

// 時間軸左邊線條圓點顏色
.posts-collapse .collection-title::before {
    background-color: rgb(255, 255, 255);
}

// 時間軸文章標題左邊圓點顏色
.posts-collapse .post-header:hover::before {
    background-color: rgb(161, 102, 171);
}

// 時間軸年份
.posts-collapse .collection-title h1, .posts-collapse .collection-title h2 {
    color: rgb(102, 102, 102);
}

// 時間軸文章標題
.posts-collapse .post-title a {
    color: rgb(80, 115, 184);
}
.posts-collapse .post-title a:hover {
    color: rgb(161, 102, 171);
}

// 時間軸文章標題底部虛線
.posts-collapse .post-header:hover {
    border-bottom-color: rgb(161, 102, 171);
}

// archives頁面頂部文字
.page-archive .archive-page-counter {
    color: rgb(0, 0, 0);
}

// archives頁面時間軸左邊線條第一個圓點顏色
.page-archive .posts-collapse .archive-move-on {
    top: 10px;
    opacity: 1;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

友鏈居中

打開 _sass/_custom/custom.scss 文件，新增變量：

//友鏈居中
.links-of-blogroll-title {
  text-align: center;
}

修改友鏈文本顏色

打開 _sass/_custom/custom.scss 文件，新增變量：

//友鏈文本顏色
//將鏈接文本設置爲藍色，鼠標劃過時文字顏色加深，並顯示下劃線
.post-body p a{
  text-align: center;
  color: #434343;
  border-bottom: none;
  &:hover {
    color: #5073b8;
    text-decoration: underline;
  }
}

修改友鏈樣式

打開 _sass/_custom/custom.scss 文件，新增變量：

//修改友情鏈接樣式
.links-of-blogroll-item a{
  text-align: center;
  color: #434343;
  border-bottom: none;
  &:hover {
    color: #5073b8;
    text-decoration: underline;
  }
}

自定義頁腳的心樣式

打開 _sass/_custom/custom.scss 文件，新增變量：

// 自定義頁腳的心樣式
@keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 168);
}

設置頭像邊框爲圓形框

打開 _sass/_common/components/sidebar/sidebar-author.scss 文件，新增變量：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  
  /* 頭像圓形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

特效：鼠標放置頭像上旋轉

打開 _sass/_common/components/sidebar/sidebar-author.scss 文件，新增變量：

  /* 設置循環動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線爲以低速結束 
    (1s)等待1秒然後開始動畫 (1)動畫播放次數(infinite爲循環播放) ]*/
 

  /* 鼠標經過頭像旋轉360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠標經過停止頭像旋轉 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠標經過頭像旋轉360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 軸旋轉動畫 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

Bug 修復

打賞文字抖動修復

打開 _sass/_common/components/post/post-reward.scss 文件，然後註釋其中的函數 wechat:hover 和 alipay:hover ，如下：

/*
  #wechat:hover p{
      animation: roll 0.1s infinite linear;
      -webkit-animation: roll 0.1s infinite linear;
      -moz-animation: roll 0.1s infinite linear;
  }
  #alipay:hover p{
      animation: roll 0.1s infinite linear;
      -webkit-animation: roll 0.1s infinite linear;
      -moz-animation: roll 0.1s infinite linear;
  }
*/

修改文章底部的帶#號標籤

打開 _includes/_macro/post.html 文件,搜索 rel="tag"># ,將 # 換成 <i class="fa fa-tag"></i>

<div class="post-tags">
    {% for tag in post.tags %}
    {% assign tag_url_encode = tag | url_encode | replace: '+', '%20' %}
    <a href="{{ '/tag/#/' | relative_url | append: tag_url_encode }}" rel="tag"><i class="fa fa-tag"></i> {{ tag }}</a>
    {% endfor %}
</div>

插件配置

閱讀次數統計（LeanCloud）

請查看爲NexT主題添加文章閱讀量統計功能
打開 config.yml 文件，搜索 leancloud_visitors , 進行如下更改：
```
leancloud_visitors:
  enable: true
  app_id: <app_id>
  app_key: <app_key>
```
app_id 和 app_key 分別是你的LearnCloud 賬號的 AppID 和 AppKey

閱讀次數美化

效果👇：

打開 _data/languages/zh-Hans.yml 文件，將 post 中的 visitors:閱讀次數 改爲：visitors: 熱度。

打開 _includes/_macro/post.html 文件,搜索 leancloud-visitors-count ,在 <span></span> 之間添加 ℃

<span id="{{ post.url | relative_url }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
  <span class="post-meta-divider">|</span>
  <span class="post-meta-item-icon">
    <i class="fa fa-eye"></i>
  </span>
  {% if site.post_meta.item_text %}
    <span class="post-meta-item-text">{{__.post.visitors}} </span>
  {% endif %}
    <span class="leancloud-visitors-count"></span>
    <span>℃</span>
</span>

在網站底部加上訪問量

效果👇：

打開 _includes/_partials/footer.html 文件，在 <div class="copyright" > 之前加入下面的代碼：
```
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
```

在 {% if site.copyright %} 之後加入下面的代碼：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站訪客數:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

部分樣式可參考我的博客👉：Laugh’s Blog

參考文章：

Hexo+Next主題優化

hexo的next主題個性化教程:打造炫酷網站

參考博客：

DS Blog

Jekyll + NexT + GitHub Pages 主題深度優化

前言

主題優化

修改內容區域的寬度

背景透明度

自定義背景圖片

彩色時間軸

友鏈居中

修改友鏈文本顏色

修改友鏈樣式

自定義頁腳的心樣式

設置頭像邊框爲圓形框

特效：鼠標放置頭像上旋轉

Bug 修復

打賞文字抖動修復

修改文章底部的帶#號標籤

插件配置

閱讀次數統計（LeanCloud）

閱讀次數美化

在網站底部加上訪問量

矩陣分解在推薦系統中的應用及實踐

梯度下降法實現（Python語言描述）

線性迴歸之梯度下降詳解

《C程序設計新思維》PDF電子書

《深入理解C指針》PDF電子書

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結