Hexo+next主題配置踩的坑

下載安裝完next主題后才發現一堆的坑。由于next的版本不同。所以有的配置文件和網上的教程不大一樣。自己踩了N多坑，于是打算記錄一下。于是自己試了好幾天才差不多配置好。但是網站圖標就是顯示不出來。我是真哭遼。 下面開始具體配置：

下載安裝next主題

下載next主題，只需輸入指令：

git clone https://github.com/theme-next/hexo-theme-next themes/next

但是速度會比較慢。因為眾所周知的原因?？梢远鄧L試幾下。然后如果要想更新主題的話，可以

cd themes/next git pull

安裝完成后到博客的根目錄下的_config.yml文件中更改為next主題即可。

Next主題下_config.yml的配置

SITE設置

title: 填寫標題
subtitle: 填寫副標題
description: 簡介
keywords: 關鍵詞
author: 作者，文章中顯示的作者名稱
language: 設置語言，zh-CN是簡體中文，en是英語

# Site title: 嵌入式的一只菜鳥 subtitle: '' description: '永遠相信美好的事情即將發生' keywords: author: WYW@HD language: zh-CN timezone: 'Asia/Shanghai'

URL設置

我用的是國內的碼云搭建的博客。url設置的時候一般情況就是設置為你創建的倉庫名字?；蛘呔褪悄悴┛偷木W址。root這里的話就寫你博客的倉庫名字。其余都默認就可以。

# URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://xxxxxx/xxxxx root: /blog2 permalink: :year/:month/:day/:title/ permalink_defaults: pretty_urls:trailing_index: true # Set to false to remove trailing 'index.html' from permalinkstrailing_html: true # Set to false to remove trailing '.html' from permalinks

翻頁設置

per_page用于控制每頁顯示多少篇博客文章。

# Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (Order by date descending by default) index_generator:path: ''per_page: 10order_by: -date

Deployment設置

這里的設置就是你上傳博客內容到你的倉庫的方式。也就是git方式。repo替換為你自己的就可以。獲取這個repo在各個平臺都是大同小異的。分支的話我們這里填寫master.因為初始化倉庫默認是master分支。

# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy:type: 'git'repository: git@gitee.com:yourname/blog2.gitbranch: master

Next主題下的_config.yml的配置。

網站logo設置：

反正我配置Logo就是不好使，圖片路徑什么都是正確的，結果就是不好使。有毒。你把你要想要的圖片放進\themes\next\source\images這個路徑下。但是圖片尺寸要正確。下面我推薦一個網站，上面的圖標很多。

favicon:small: http://xxxxxx/xxxxxx/images/favicon-16x16-next.pngmedium: http://xxxxxx/xxxxxx/images/favicon-32x32-next.png# apple_touch_icon: /images/apple-touch-icon-next.png# safari_pinned_tab: /images/logo.svg#android_manifest: /images/manifest.json#ms_browserconfig: /images/browserconfig.xml

頁腳設置：

footer:# Specify the date when the site was setup. If not defined, current year will be used.since: 2020# Icon between year and copyright info.icon:# Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/# `heart` is recommended with animation in red (#ff0000).name: heart# If you want to animate the icon, set it to true.animated: true# Change the color of icon, using Hex Code.color: "#808080"# If not defined, `author` from Hexo `_config.yml` will be used.copyright: WYW@HDpowered:# Hexo link (Powered by Hexo).enable: false# Version info of Hexo after Hexo link (vX.X.X).version: falsetheme:# Theme & scheme info link (Theme - NexT.scheme).enable: false# Version info of NexT after scheme info (vX.X.X).version: false

頁腳設置就是網頁最底下那一部分。鴿了n天后決定接著寫。指的是下面圖這一部分。

since指的是你博客開始的年份，icon的話默認的是心形。animated設置為true是顯示。false則是關閉。colour指的是Icon的顏色。copyright如果沒有提到的話則默認用的是你根目錄下_config.yml中設置的作者名字，這里我設置的都是一樣的。都是一個名字。powered指的是頁面下是否顯示hexo和hexo的版本。true就是顯示。反之false。theme也是類似的。

Next主題風格：

# Schemes #scheme: Muse #scheme: Mist # scheme: Pisces scheme: Gemini

next的主題風格一共是有四種，在這里我用的是最后一種： Gemini。其它類型的風格可能配置后略有不同，自己可以嘗試一下。

菜單欄設置：

菜單欄的設置剛開始配置文件中都是注釋起來的，自己需要哪個把注釋取消掉即可。效果如圖所示：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ceobQoPU-1585462696655)(https://s1.ax1x.com/2020/03/23/877Urd.png)]

# --------------------------------------------------------------- # Menu Settings # ---------------------------------------------------------------# Usage: `Key: /link/ || icon` # Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive. # Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon. # When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives). # External url should start with http:// or https:// menu:home: / || homeabout: /about/ || usertags: /tags/ || tagscategories: /categories/ || tharchives: /archives/ || archive# schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeatlinks: /links/ || link# Enable / Disable menu icons / item badges. menu_settings:icons: truebadges: true

舉個例子，home對應的就是圖片上方的首頁。那么這個中文名稱是在哪個文件更改呢？下面就是在博客根目錄下的\themes\next\languages這個路徑下的zh-CN.yml.打開后就可以看到了:

menu:home: 首頁archives: 時間軸categories: 文章分類tags: 文章標簽about: 關于作者search: 搜索schedule: 日歷links: 友情鏈接sitemap: 站點地圖commonweal: 公益 404

meau_settings下面的倆個參數默認即可。

側邊欄設置：

# --------------------------------------------------------------- # Sidebar Settings # See: https://theme-next.org/docs/theme-settings/sidebar # ---------------------------------------------------------------sidebar:# Sidebar Position.# position: leftposition: right# Manual define the sidebar width. If commented, will be default for:# Muse | Mist: 320# Pisces | Gemini: 240width: 320# Sidebar Display (only for Muse | Mist), available values:# - post expand on posts automatically. Default.# - always expand for all pages automatically.# - hide expand only when click on the sidebar toggle icon.# - remove totally remove sidebar including sidebar toggle.display: post# Sidebar padding in pixels.padding: 18# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).offset: 12# Enable sidebar on narrow view (only for Muse | Mist).onmobile: true# Sidebar Avatar avatar:# Replace the default image and set the url here.url: /images/avatar.png# 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

position設置的是側邊欄的位置，width設置的是寬度，默認即可，avatar指的頭像的具體設置，url指的是你頭像的路徑，你可以把你想用的圖像照片放進博客根目錄下的\themes\next\source\images這個路徑下，但是頭像尺寸大小要符合，大小為512*512.rounded:指的是頭像是否以圓形展示，true就是開啟。rotated指的是把鼠標放在頭像上的時候是否旋轉。

社交鏈接：

社交鏈接下面需要什么把相應的注釋去掉即可。加上自己的鏈接即可。或者可以將它原來的名字修改為你要的。

# Social Links # Usage: `Key: permalink || icon` # Key is the link label showing to end users. # Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon. social:GitHub: https://github.com/wywaihandan || githubE-Mail: 2838177495@qq.com|| envelopeCSDN: https://me.csdn.net/qq_44219883 ||stack-overflow嗶哩嗶哩: https://space.bilibili.com/390161354 ||skype#Weibo: https://weibo.com/yourname || weibo#Google: https://plus.google.com/yourname || google#Twitter: https://twitter.com/yourname || twitter#FB Page: https://www.facebook.com/yourname || facebook#StackOverflow: https://stackoverflow.com/yourname || stack-overflow#YouTube: https://youtube.com/yourname || youtube#Instagram: https://instagram.com/yourname || instagram#Skype: skype:yourname?call|chat || skypesocial_icons:enable: trueicons_only: falsetransition: false

打賞設置：

# Reward (Donate) # Front-matter variable (unsupport animation). reward_settings:# If true, reward will be displayed in every article by default.enable: trueanimation: truecomment: 堅持原創技術分享，您的支持將鼓勵我繼續創作！.reward:wechatpay: /images/wechat.jpgalipay: /images/alipay.jpg#paypal: /images/paypal.png#bitcoin: /images/bitcoin.png# Subscribe through Telegram Channel, Twitter, etc. # Usage: `Key: permalink || icon` (Font Awesome) follow_me:#Twitter: https://twitter.com/username || twitter#Telegram: https://t.me/channel_name || telegramWeChat: http://wyw_hd.gitee.io/blog2/images/6.jpg || wechat嗶哩嗶哩: https://space.bilibili.com/390161354?share_medium=android&share_source=copy_link&bbid=XY4332D4EDDC2E23C34503D72EE3B1E71BE02&ts=1582201848748 || rss# RSS: /atom.xml || rss

enable設置為true則是開啟打賞設置，comment則是顯示的一句話，可以換成自己喜歡的，微信和支付寶的照片依舊放在博客根目錄下的\themes\next\source\images中。followe_me下面的設置可以設置你的其他發布渠道，wechat我放的是我的公眾號，嗶哩嗶哩的文章也有，只不過我最近太懶了，鴿了好久，具體設置完后的效果圖如圖所示：

文章底部評論設置：

# Valine # For more information: https://valine.js.org, https://github.com/xCss/Valine valine:enable: trueappid: *************** # Your leancloud application appidappkey: ***************** # Your leancloud application appkeynotify: false # Mail notifierverify: false # Verification codeplaceholder: 留下你的評論吧 # Comment box placeholderavatar: mm # Gravatar styleguest_info: nick,mail,link # Custom comment headerpageSize: 10 # Pagination sizelanguage: # Language, available values: en, zh-cnvisitor: true # Article reading statisticcomment_count: true # If false, comment count will only be displayed in post page, not in home pagerecordIP: true # Whether to record the commenter IPserverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)#post_meta_order: 0

文章底部評論我剛開始用的github的gittalk，后來由于github的服務器在國外，速度太慢了。而且每次用都要初始化下評論，就放棄了gittalk評論。改用valine評論。使用valine需要先注冊下賬號然后實名認證。然后創建應用得到appid和appkey.該網站的鏈接為：https://valine.js.org/quickstart.html。

之后把appid和appkey填入即可。使能打開即可。

Github角標

# `Follow me on GitHub` banner in the top-right corner. github_banner:enable: truepermalink: https://github.com/Siriusqtitle: Follow me on GitHub

enable:用于設置是否在頁面右上角顯示Github三角標
permalink:后面填寫你的Github地址
title:用于設置鼠標移動到圖標后顯示的文字

返回頂部按鈕

back2top:enable: true# Back to top in sidebar.sidebar: true# Scroll percent label in b2t button.scrollpercent: true

enable:用于設置是否開啟回到頂部按鈕
sidebar:用于設置是否將按鈕放到側邊欄中
scrollpercent:用于設置是否顯示閱讀進度百分比

文章搜索：

可以方便快捷的搜索文章，但是需要安裝插件：

具體指令：

npm install hexo-generator-searchdb --save

之后找到以下內容改為下圖即可。

# Local Search # Dependencies: https://github.com/theme-next/hexo-generator-searchdb local_search:enable: true# If auto, trigger search by changing input.# If manual, trigger search by pressing enter key or search button.trigger: auto# Show top n results per article, show all results by setting to -1top_n_per_article: 1# Unescape html strings to the readable one.unescape: false# Preload the search data when the page loads.preload: false

動態背景

Next主題默認提供了三種動態背景

• Canvas-nest
• JavaScript 3D library
• Canvas-ribbon

Canvas-nest

這是在網頁背景顯示的動態效果。

安裝

切換到Next主題文件夾

cd themes/next

安裝模塊

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

修改配置文件

打開Next主題路徑下的配置文件_config.yml修改下列代碼

# Canvas-nest # Dependencies: https://github.com/theme-next/theme-next-canvas-nest canvas_nest:enable: trueonmobile: true # 是否在手機上顯示color: "255,51,51" # RGB顏色設置opacity: 0.5 # 線條透明度zIndex: -1 # 顯示級別count: 160 # 線條的數量，越多越卡

如果想使用CDN加速的話需要設置

vendors:...canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest.min.jscanvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0

網站運行時間

打開.\themes\next\layout\_partials\footer.swig并添加下列代碼

<div> <span id="timeDate">載入天數...</span><span id="times">載入時分秒...</span> <script>var now = new Date();function createtime() {var grt= new Date("03/04/2020 00:00:00");now.setTime(now.getTime()+250);days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}document.getElementById("timeDate").innerHTML = "本站已安全運行 "+dnum+" 天 ";document.getElementById("times").innerHTML = hnum + " 小時 " + mnum + " 分 " + snum + " 秒";} setInterval("createtime()",250); </script> </div>

上面的代碼可以修改為你創建博客的時間，

訪客統計 ：

# Show Views / Visitors of the website / page with busuanzi. # Get more information on http://ibruce.info/2015/04/04/busuanzi busuanzi_count:enable: truetotal_visitors: truetotal_visitors_icon: usertotal_views: truetotal_views_icon: eyepost_views: truepost_views_icon: eye

next主題中已經內置了訪客統計的功能，所以這里我們只需開啟就行。

文章目錄：

文章目錄我們用markdown寫東西的時候會有一級標題，二級標題，文章目錄就是由這些構成的。然后網上有的教程是讓修改那個_custom文件。但是那個文件這個版本的next實際是沒有的，然后有另外一種方法，就是在根目錄下source\data新建一個styles.styl文件。然后找到next主題下的：

# Define custom file paths. # Create your custom files in site directory `source/_data` and uncomment needed files below. custom_file_path:#head: source/_data/head.swig#header: source/_data/header.swig#sidebar: source/_data/sidebar.swig#postMeta: source/_data/post-meta.swig#postBodyEnd: source/_data/post-body-end.swig#footer: source/_data/footer.swig#bodyEnd: source/_data/body-end.swig#variable: source/_data/variables.styl#mixin: source/_data/mixins.stylstyle: source/_data/styles.styl

將style前的注釋取消掉即可。接下來就可以編輯在styles.styl編輯一些東西：比如網頁背景以及透明度。

//文章目錄默認展開 .post-toc .nav .nav-child { display: block; } .post-toc ol { font-size : 13px; }

接下來初始化文章目錄我們來到主題配置文件位于themes/next/_config.yml。

可以找到如下：

# Table of Contents in the Sidebar # Front-matter variable (unsupport wrap expand_all). 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

按照上面配置即可。

網站背景：

寫的我自己要吐了。網站沒有背景其實真的很空洞，所以我們可以加上背景并設置透明度…肝不動了。。。。明天再說。接著來寫了。關于主題配置的話網上有好多說的仍舊是那個_custom文件。但是這個next主題是沒有這個文件的。所以我們仍舊在style.styl文件中配置。配置內容如下：

body {background:url(http://***********/******/images/bg.jpg);//圖片路徑background-repeat: no-repeat;//是否重復平鋪background-attachment:fixed;//是否隨著網頁上下滾動而滾動，fixed為固定background-position:50% 50%;//圖片位置background-size: cover;//圖片展示大小-webkit-background-size: cover;-o-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;opacity: 0.6;//設置整個頁面的透明度。該透明度如果不加在這里會出現bug，bug就是菜單欄無法點擊。#footer > div > div {color:#000000;//底部文字顏色} } .header-inner {background: #fff;//設置側邊欄透明opacity: 1;//這里設置為1，否則搜索欄會消失 } .main-inner {background: #fff;opacity: 1; }

圖片的url照著替換為你博客的網址+images即可。

文章分類以及標簽：

還記得_config.yml中有關于meau的設置把。我們如果想將文章分類以及添加標簽的話。首先在根目錄執行 hexo new page categories。之后你會發現在博客根目錄下source文件夾會生成一個categories文件夾。我們進入這個文件夾。用VSCODE打開里面的index.md進行編輯，在當中添加type類型。

--- title: categories date: 2020-02-19 22:27:43 type: categories ---

標簽的操作也是類似這樣。輸入指令 hexo new page tags。接下來編輯index.md這個文件即可。添加type屬性即可。

以上完成后我們就可以在文章中添加分類以及標簽了。類似這樣：

--- title: hexo+next主題配置 date: 2020-03-04 23:22 categories: hexo博客主題配置 tags: Next主題美化 mathjax: true ---

這樣我們就可以查看我們自己文章的分類以及標簽了。

友情鏈接links:

菜單欄中還有一項友情鏈接。這里可以放上常用的網站。具體設置如下:首先在根目錄下\themes\next\layout新建一個links.swig并添加如下內容：

{% block content %}{######################}{### LINKS BLOCK ###}{######################}<div id="links"><style>#links{margin-top: 5rem;}.links-content{margin-top:1rem;}.link-navigation::after {content: " ";display: block;clear: both;}.card {width: 300px;font-size: 1rem;padding: 10px 20px;border-radius: 4px;transition-duration: 0.15s;margin-bottom: 1rem;display:flex;}.card:nth-child(odd) {float: left;}.card:nth-child(even) {float: right;}.card:hover {transform: scale(1.1);box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);}.card a {border:none;}.card .ava {width: 3rem!important;height: 3rem!important;margin:0!important;margin-right: 1em!important;border-radius:4px;}.card .card-header {font-style: italic;overflow: hidden;width: 236px;}.card .card-header a {font-style: normal;color: #2bbc8a;font-weight: bold;text-decoration: none;}.card .card-header a:hover {color: #d480aa;text-decoration: none;}.card .card-header .info {font-style:normal;color:#a3a3a3;font-size:14px;min-width: 0;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}</style><div class="links-content"><div class="link-navigation">{% for link in theme.mylinks %}<div class="card"><img class="ava" src="{{ link.avatar }}"/><div class="card-header"><div><a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a><a href="{{ link.site }}" target="_blank"><span class="focus-links">關注</span></a></div><div class="info">{{ link.info }}</div></div></div>{% endfor %}</div>{{ page.content }}</div></div>{##########################}{### END LINKS BLOCK ###}{##########################} {% endblock %}

然后修改 hexo/themems/next/layout/page.swig 文件，在

復制

文件位置：hexo/themems/next/layout/page.swig#}{% elif page.type === "tags" and not page.title %}{##}{{ __('title.tag') + page_title_suffix }}{#

位置添加如下代碼：

復制

<!-- 友情鏈接--> #}{% elif page.type === 'links' and not page.title %}{##}{{ __('title.links') + page_title_suffix }}{#

然后還是在這個 page.swig 文件中，引入剛才新建的 swig 頁面：

復制

<!-- 友情鏈接--> {% elif page.type === 'links' %}{% include 'links.swig' %}

這個代碼位置可以放到下面

復制

{% elif page.type === 'categories' %}<div class="category-all-page"><div class="category-all-title">{{ _p('counter.categories', site.categories.length) }}</div><div class="category-all">{{ list_categories() }}</div></div> + {% elif page.type === 'links' %} + {% include 'links.swig' %}{% else %}{{ page.content }}{% endif %}</div>

然后我們使用 GitBash 新建一個菜單欄：

復制

命令位置：hexo根目錄hexo new page "links"

這樣在 hexo/source 目錄下會生成一個 links 文件夾，打開其中的 index.md 文件，在標題頭中寫入 type = "links" 這個屬性頭，如下：

復制

--- title: 友情鏈接 date: 2019-06-28 20:46:16 + type: "links" ---

如果需要關閉這個頁面的評論的話，可以設置如下：

復制

--- title: 友情鏈接 date: 2019-06-28 20:46:16 type: "links" + comments: false ---

最后，我們添加友鏈的話，需要在主題配置文件根目錄下/themes/next/_config.xml 文件末尾添加：

mylinks:- nickname: CSDNavatar: http://wyw_hd.gitee.io/blog2/images/csdn.pngsite: https://www.csdn.net/info: 各類知識都有- nickname: 電子開源網avatar: http://wyw_hd.gitee.io/blog2/images/naruto.pngsite: http://openedv.com/info: 正點原子STM32系列知識- nickname: 嗶哩嗶哩avatar: http://wyw_hd.gitee.io/blog2/images/jake.pngsite: https://www.bilibili.com/info: 各類教學視頻都有啊，學習的小破站- nickname: githubavatar: http://wyw_hd.gitee.io/blog2/images/hah.pngsite: https://github.com/info: 上面各種開源代碼。值得學習

然后我們還需要在該配置文件下添加links即可;

# --------------------------------------------------------------- # Menu Settings # ---------------------------------------------------------------# Usage: `Key: /link/ || icon` # Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive. # Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon. # When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives). # External url should start with http:// or https:// menu:home: / || homeabout: /about/ || usertags: /tags/ || tagscategories: /categories/ || tharchives: /archives/ || archive# schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat 添加： links: /links/ || link# Enable / Disable menu icons / item badges. menu_settings:icons: truebadges: true

閱讀全文按鈕開啟：

我們首先找到在next主題下的_config.yml代碼：

auto_excerpt:enable: falselength: 150

然后把false改為true即可。length是顯示摘要的長度。然后在文章添加 這個標簽即可。

感覺寫的差不多了?？邮怯悬c多。踩的多就明白了。希望疫情早日結束，能夠開學早點見到她。嘿嘿。

參考博客：

1：next主題美化

有時間再把這個坑再填下。歡迎來到我的博客http://wyw_hd.gitee.io/blog2/。會有一些技術類的很菜的個人總結。

總結

以上是生活随笔為你收集整理的Hexo+next主题配置踩的坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。