Hexo系列3：部落格優化

最近把部落格做了一些修改和優化，將做的一些修改記錄如下：

• 把側邊欄頭像變成圓形，並且滑鼠停留在上面發生旋轉效果。

修改主題檔案d:hexo\next\source\css\_common\components\sidebar\sidebar-author.styl中的內容如下

.site-author-image {
  display: block;
  margin: 0 auto;
  max-width: 96px;
  height: auto;
  border: 2px solid #333;
  padding: 2px;

  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}

/* start/
.site-author-image:hover { 
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

//下面的檔案保持原樣

• 修改字型

修改themes\next\source\css\_variable\custome.styl檔案如下：

// 標題，修改成你期望的字型族
$font-family-headings = Georgia, sans

// 修改成你期望的字型族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif

// 程式碼字型
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace

// 正文字型的大小
$font-size-base = 16px

// 程式碼字型的大小
$code-font-size = 14px

• 修改程式碼塊中字型大小

找到\themes\next\source\css\_common\components\highlight\highlight.styl ，修改font-size屬性即可

$code-block
  background: highlight-background
  margin: 20px 0
  padding: 15px
  overflow: auto
  //修改程式碼字型大小
  font-size 14px
  color: highlight-foreground
  line-height:  $line-height-code-block

• 修改頂部選單的字型大小

修改\themes\next\source\css\_common\components\header\menu.styl檔案的font-size屬性即可

• 新增文章熱度的請看這裡
• 為部落格建立留言功能，請看這裡
• 設定社交連線，參考這裡
• 文章開啟打賞功能，看這裡
• next主題官方指南