NexT主題的設置 - hexo新版主題next7.x設置

hexo 新版主題 next7.x 設置

內容提要

• 開啟贊賞打賞碼

• 設置閱讀時長和本文字數

• 添加背景動畫效果

• 閱讀全文設置

• 閱讀全文 去掉自動定位 more

• 修改文章及主題樣式

• 代碼段調整上下行距及樣式

• 代碼塊背景色缺失問題

開啟贊賞打賞碼

1.獲取支付寶和微信打賞碼

• 支付寶打賞碼
  • https://qr.alipay.com/paipai/open.htm
• 微信打賞碼
  • 打開手機微信
  • 選擇我的–支付
  • 選擇收付款–贊賞碼
  • 生成

2.把生成的二維碼下載放到 next 主題

• 放到 themes\next\source\images 文件夾中

3.配置主題_config.yml

reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: false #是否開啟動畫效果 可以自己調整樣式
  comment: 原創技術分享，您的支持將鼓勵我繼續創作!

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

4.修改按鈕樣式

//路徑 next/source/css/_common/components/post/post-reward.styl
//簡單的改了一下按鈕樣式
button {
  background: transparent;
  border: 1px solid #fc6423;
  border-radius: 5px;
  color: #fc6423;
  cursor: pointer;
  line-height: 2;
  outline: none;
  padding: 0 15px;
  vertical-align: text-top;

  &:hover {
    background: #fc6423;
    border: 1px solid transparent;
    color: #fff;
  }
}

5.展示效果

設置閱讀時長和本文字數

1.配置主題_config.yml

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 2 #平均字長
  wpm: 200 #每分鍾字數

詳細配置介紹 https://github.com/theme-next/hexo-symbols-count-time

2.對應文字修改

#路徑 next\languages\zh-CN.yml
symbols_count_time:
  count: 本文字數
  count_total: 站點總字數
  time: 閱讀時長
  time_total: 站點閱讀時長
  time_minutes: 分鍾

3.展示效果

設置閱讀次數和評論

建議添加 gitalk 評論系統

參考文章：https://www.jianshu.com/p/02fc71f3633f

展示效果

顯示閱讀次數

1.配置主題_config.yml

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

展示效果

添加背景動畫效果

1.配置主題_config.yml

# 進度條
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace  更改配置詳情看github說明
# For more information: https://github.com/HubSpot/pace
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
# 3D背景
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three  更改配置詳情看github說明
three:
  enable: true
  three_waves: true
  canvas_lines: true
  canvas_sphere: true
# 彩帶背景
# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon 更改配置詳情看github說明
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: true
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbo

#關鍵配置CDN
vendors:
  # 進度條
  pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
  pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
  # 3D背景
  three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
  three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js
  canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js
  canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js
  # 彩帶背景
  canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js

2.本地查看效果

1. 轉到 NexT 目錄

$ cd themes/next
$ ls
_config.yml  crowdin.yml  docs  gulpfile.js  languages  layout  LICENSE.md  package.json  README.md  scripts  source

2. 將模塊安裝到source/lib目錄

git clone https://github.com/theme-next/theme-next-three source/lib/three

3. 啟動服務查看效果

hexo s

3.展示效果

閱讀全文設置

1.配置主題_config.yml

# Automatically excerpt description in homepage as preamble text.  自動摘要
excerpt_description: true
# Read more button
# If true, the read more button will be displayed in excerpt section. 顯示閱讀全文按鈕
read_more_btn: true

2.install 自動摘錄生成器

npm install hexo-excerpt --save

• 比較不好的一點是這個只能自動讀取摘要 不是很智能 ，讀取的摘要狠多 ，推薦編寫文章時自己設置摘要

• 若想保留了樣式並且自行選擇顯示哪些內容來預覽。就可以在寫 md 博文時，在想要顯示預覽的部分后加上<I--more-->，這樣這樣首頁和列表頁展示的文章內容就是<!-- more -->之前的文字，而之后的就不會顯示了，同時也保留文章原樣式。

3.展示效果

閱讀全文 去掉自動定位 more

老版本中可以使用scroll_to_more: false 這個選項

最新版本已經移除此選項，官方認為 scroll_to_more 是個默認行為 for 任何 hexo 主題

新版本解決方案：強制修改\themes\next\layout_macro\post.swig 中

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

修改為 去除#more 錨點即可

<a class="btn" href="{{ url_for(post.path) }}" rel="contents"></a>

修改文章及主題樣式

修改文件位置

//themes\next\source\css\_common\scaffolding\base.styl
//將樣式手動調整
//修改行距只需要修改p標簽的margin
p {
  margin: 0 0 10px 0;
}
//引用樣式調整
blockquote {
  border-left: 4px solid $grey-lighter;
  color: var(--blockquote-color);
  margin: 10px 0;
  padding: 0 15px;

  cite::before {
    content: "-";
    padding: 0 5px;
  }
}

代碼段調整上下行距及樣式

1.配置主題_config.yml

#代碼塊樣式
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme  白色主題 normal
  highlight_theme: normal
  # Add copy button on codeblock 復制按鈕
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

2.調整樣式文件

//文件位置：themes\next\source\css\_common\scaffolding\highlight\highlight.styl

搜索 pre 將對應的 padding 值調整為自己想要的樣式

pre {
  @extend $code-block;
  overflow: auto;
  padding: 2px 10px; //我這里上下調整為2px
}

3.展示效果

代碼塊背景色缺失問題

1.問題展示

有時候編輯后的 md 文檔會發生背景色缺失現象 如圖

2.形成原因

原因：編輯時回車 換行，會導致當前行渲染后元素高度無法達到正常高度，如圖：

正常的 pre 也就是當前行如圖：

而每行 tr 都有自己的背景色 （一般是白色），一但 pre 沒有高度 ,就會造成背景色的混亂

//mian.css 下有段用於區分斑馬紋表格和 hover樣式的代碼影響到了代碼段的tr
tbody tr:nth-of-type(odd) {
  background: var(--table-row-odd-bg-color);
}
tbody tr:hover {
  background: var(--table-row-hover-bg-color);
}

3.解決方案

1.在編輯 md 文檔代碼塊時 回車換行都加個空格防止 pre 沒有正常高度的情況

但是很麻煩 ， 所以還是用 css 調調樣式吧

因為 pre 沒有高度 tr 把背景色覆蓋成了其他顏色， 但是 td 還是正常大小啊 ，把 td 的背景色調調成 pre 的就可以了

2.修改 css 樣式

//文件位置：themes\next\source\css\_common\scaffolding\highlight\highlight.styl
//找到td修改樣式
td {
  border: 0;
  padding: 0;
  background: $highlight-background; //防止背景色缺失
}
td {
  border: 0;
  background: $highlight-background; //防止背景色缺失
}

字母溢出不自動換行問題

中文漢字不會溢出，英文字母會溢出
這個時候添加屬性
word-break: break-all;
修改 css 樣式

// themes\next\source\css\_common\components\post\post-header.styl
.posts-expand .post-title-link {
  // ...
  word-break: break-all; // 添加樣式防止字母不換行
}
// themes\next\source\css\_common\components\post\post-header.styl
.post-body {
  // ...
  word-break: break-all; // 添加樣式防止字母不換行
}

Hexo + Next 主題博客提交百度谷歌收錄

原文地址：https://www.luanzhuxian.com/post/82d92ad4.html

建議使用自動推送

也可以調用百度 api