快速搭建博客-高級篇-增加功能

側欄設置

側欄設置包括:側欄位置、側欄顯示與否、文章間距、返回頂部按鈕等等
打開 主題配置文件 找到sidebar字段

sidebar:
# Sidebar Position - 側欄位置(只對Pisces | Gemini兩種風格有效)
  position: left        //靠左放置
  #position: right      //靠右放置

# Sidebar Display - 側欄顯示時機(只對Muse | Mist兩種風格有效)
  #display: post        //默認行爲,在文章頁面(擁有目錄列表)時顯示
  display: always       //在所有頁面中都顯示
  #display: hide        //在所有頁面中都隱藏(可以手動展開)
  #display: remove      //完全移除

  offset: 12            //文章間距(只對Pisces | Gemini兩種風格有效)

  b2t: false            //返回頂部按鈕(只對Pisces | Gemini兩種風格有效)

  scrollpercent: true   //返回頂部按鈕的百分比

頭像設置

打開 主題配置文件 找到Sidebar Avatar字段

# Sidebar Avatar
avatar: /images/header.jpg

這是頭像的路徑,只需把你的頭像命名爲header.jpg(隨便命名)放入themes/next/source/images中,將avatar的路徑名改成你的頭像名就OK啦!

//最新方法-配置

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/head_logo.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

# Posts / Categories / Tags in sidebar.
site_state: true

標籤

//命令創建
hexo new page "tags" 
//修改創建的文件
---
title: 標籤
date: 2019-12-26 19:23:43
type: "tags"
---
//打開主題的tag
//給文章加個標籤

分類

//命令創建
hexo new page "categories"
//修改新生成的文件
---
title: 分類
date: 2019-12-26 19:37:01
type: "categories"
---
//打開categories 

媒體外鏈

//配置文件
social:
GitHub: https://github.com/bennyrhys || github
E-Mail: mailto:[email protected] || envelope
QQ: 2389992466 || qq
WeiChat: bennyrhys-sir || weixin
CSDN: https://blog.csdn.net/weixin_43469680 || fa-link
//修改圖標
圖標網站:點擊訪問

關於

//創建
hexo new page "about" 
//配置文件
//啓用

相冊

//命令創建
hexo new page "photos"
//第三方github工具
justified-gallery

閱讀量

//打開配置busuanzi

busuanzi_count:
  enable:true

\themes\next\layout_third-party\下的busuanzi.swing

src=“https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js”
修改爲
src=“https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js”

添加動態背景

js文件放在\themes\next\source\js\src
更新\themes\next\layout_layout.swig文件,在末尾(在前面引用會出現找不到的bug)添加以下 js 引入代碼:

<script type="text/javascript" src="/js/src/back.js" ></script>

//法二
配置文件,不太靠譜
canvas_nest:
  enable: false

gitalk評論

gitalk:一個基於 Github Issue 和 Preact 開發的評論插件
詳情Demo可見:https://gitalk.github.io/
在GitHub上註冊新應用,鏈接:https://github.com/settings/applications/new
參數說明:
Application name: # 應用名稱,隨意
Homepage URL: # 網站URL,如https://asdfv1929.github.io
Application description # 描述,隨意
Authorization callback URL:# 網站URL,https://asdfv1929.github.io

點擊註冊後,頁面跳轉如下,其中Client ID和Client Secret在後面的配置中需要用到,到時複製粘貼即可:
Client ID
-52515de43eada8e083b
Client Secret
-ee2994d96e2d4a5684188df17a49fe8e9a6c3d6
gitalk.swig
新建/layout/_third-party/comments/gitalk.swig文件,並添加內容:

valine評論

//註冊LeanCloud
註冊地址 https://leancloud.cn/
獲取key,添加安全,網站鏈接
配置文件valine對應id

頭像圓形旋轉

介紹一下實現頭像圓形,鼠標經過旋轉或者一直讓旋轉效果,主要是修改 Hexo 目錄下 \themes\next\source\css_common\components\sidebar\sidebar-author.styl 文件。
修改 sidebar-author.styl 文件中 .site-author-image CSS 樣式如下:

.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;

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

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

閱讀進度條

reading_progress:
enable: true

百度推送

//配置文件
baidu_push: true

優化SEO

更改網站副標題(將是主要網站描述)和所有文章/頁面標題的標題層次結構,以便更好地

seo: true //建議 true

搜索

npm install hexo-generator-searchdb --save

友鏈

# Blog rolls
links_settings:
  icon: link
  title: 友鏈
  # Available values: block | inline
  layout: block

links:
  #Title: http://yoursite.com
  吉他易學網/EasyGuitar: https://www.996cloud.work

開啓打賞

reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: true
  comment: 請作者喝杯茶~

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.jpg
  #bitcoin: /images/bitcoin.jpg

開啓訂閱公衆號

有些版本在,wechat屬性配置,升級版沒有

閱讀更多

老版本auto_excer屬性配置高度
新版替代法

//夾在文章中

分享

配置文件jiathis:true
已經淘汰

加載效果

pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

字數統計,閱讀時長

標題toc優化

toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: true
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  # Maximum heading depth of generated toc.
  max_depth: 6
發佈了153 篇原創文章 · 獲贊 121 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章