1200字范文 > Hexo博客优化之Next主题美化

Hexo博客优化之Next主题美化

时间：2022-12-05 07:48:02

相关推荐

Hexo博客优化之Next主题美化

前言

有了前面几篇博客的介绍，我们就可以很容易的搭建并编辑我们的博客了，不过既然是属于自己的博客网站，自然也就想让其更加美观，更有意思，所以呢我下面介绍一下Hexo博客的主题美化操作。

1. Next主题

Hexo博客支持很多主题风格，其中Next主题是Github上Star最多的主题，其一直在更新维护，支持非常多的外部插件和功能选项。我目前使用的是Next6.0版本，下面我会介绍基于Next6主题的界面美化手法。

1.1 Next主题的安装配置

Next主题的安装方式很简单，只需要在博客主目录下执行：

git clone /theme-next/hexo-theme-next themes/next

然后设置站点配置文件_config.yml：

theme: next

即可将我们的Hexo博客主题替换为Next主题。

1.2 主题简单配置

Next主题提供很多方便的功能，我们来一一介绍：

Next主题风格：

Next提供了四中主题风格scheme，可以在主题配置文件blog/themes/next/_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini：

这里我选择的是Gemini主题，也就是最后一种样式；

Next主题一般配置：

override：false #表示是否将主题置为默认样式cache:enable:true #表示添加缓存功能，这样浏览器后续打开我们的博客网站会更快menu: #设置博客各个页面的相对路径，默认根路径是blog/sourcehome: / || homeabout: /about/ || usertags: /tags/ || tagscategories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar #日历#sitemap: /sitemap.xml || sitemap #站点地图，供搜索引擎爬取#commonweal: /404/ || heartbeat # 腾讯公益404# Enable/Disable menu icons / item badges.menu_settings:icons: true # 是否显示各个页面的图标badges: true # 是否显示分类/标签/归档页的内容量# Schemesscheme: Gemini

以上是Next最常规的配置，而相应的站点配置blog/_config.yml文件的基本配置为：

title: 见渊の博客subtitle: 记录生活中的点点滴滴description: 直到这一刻微笑着说话为止，我至少留下了一公升眼泪keywords:author: 黄飘language: zh-CN # 主题语言timezone: Asia/Shanghai #中国的时区，不要乱改城市# URL## If your site is put in a subdirectory, set url as '/child' and root as '/child/'url: https://huangpiao.tech #绑定域名root: / #默认根路径，指向实际的sourcepermalink: :year/:month/:day/:title/permalink_defaults:# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render: README.md # 部署的时候不包含的文件# Writingnew_post_name: :title.md # 默认的新博文名称default_layout: post # 默认布局titlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0 #把博客名称改成小写/大写（1,2）render_drafts: false # 是否显示草稿post_asset_folder: false #是否启用资源文件夹（用来存放相对路径图片或文件）relative_link: false # 把链接改为与根目录的相对位址future: truehighlight:enable: true #是否开启代码高亮line_number: true #是否增加代码行号auto_detect: true #自动判断代码语言tab_replace:# 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: 10 #每页博客数量上限order_by: -date #博客排序# Date / Time format## Hexo uses Moment.js to parse and display date## You can customize the date format as defined in## /docs/#/displaying/format/date_format: YYYY-MM-DD #博客日期格式time_format: HH:mm:ss #博客时间格式# Pagination## Set per_page to 0 to disable paginationper_page: 10 #同上#归档页的分页设置archive_generator: #归档页的配置per_page: 30 #归档页每页博客数yearly: true #按年归档monthly: true #按月归档#标签页的分页设置tag_generator:per_page: 20 #标签页每页博客数theme: next6 #选择博客主题，名字为themes中选择的主题文件夹名称# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: #博客部署type: gitrepo: github: /nightmaredimple/nightmaredimple.github.io.gitcoding: /nightmaredimple/nightmaredimple.gitbranch: master

以上的效果如下：

2.添加博客自定义图标

我们博客的默认图标是H，不过Next支持修改图标，下面是我的图标：

博客网站的图标可以在easyicon、bitbug、iconfont等网站选择和制作，然后选择或者创建相应大小的图标文件，放置在blog/themes/next/sources/images目录下，并在主题配置文件中进行如下配置，只需要设置small和medium两个就可以：

favicon:small: /images/16x16.pngmedium: /images/32x32.pngapple_touch_icon: /images/128x128.pngsafari_pinned_tab: /images/logo2.svg

3. 鼠标点击特效

鼠标的点击红心特效如下：

具体步骤如下：

在/themes/next/source/js/src下新建文件 clicklove.js ，接着把下面的代码拷贝粘贴到 clicklove.js 文件中：

在\themes\next\layout\_layout.swig文件末尾添加：

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

当然，还有一种特效(只能选一个)：

跟那个红心是差不多的，首先在themes/next/source/js/src里面建一个叫fireworks.js的文件，代码如下：

"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};

打开themes/next/layout/_layout.swig,在</body>上面写下如下代码：

{% if theme.fireworks %}<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> <script type="text/javascript" src="///animejs/2.2.0/anime.min.js"></script> <script type="text/javascript" src="/js/src/fireworks.js"></script>{% endif %}

打开主题配置文件，在里面最后写下：

# Fireworksfireworks: true

4.添加动态背景

上面这种只是其中一种动态背景，新版的Next主题集成了该功能，只需要在主题配置中设置如下即可，下面每个模块只设置其中一个为true，具体效果如何可自己尝试：

# Canvas-nest# Dependencies: /theme-next/theme-next-canvas-nestcanvas_nest: # 网络背景enable: trueonmobile: true # display on mobile or notcolor: '0,0,0' # RGB values, use ',' to separateopacity: 0.5 # the opacity of line: 0~1zIndex: -1 # z-index property of the backgroundcount: 150 # the number of lines# JavaScript 3D library.# Dependencies: /theme-next/theme-next-three# three_wavesthree_waves: false# canvas_linescanvas_lines: false# canvas_spherecanvas_sphere: false# Canvas-ribbon# Dependencies: /theme-next/theme-next-canvas-ribbon# size: The width of the ribbon.# alpha: The transparency of the ribbon.# zIndex: The display level of the ribbon.canvas_ribbon:enable: falsesize: 300alpha: 0.6zIndex: -1

另外需要在blog中下载相应资源包，具体见上面的链接，下面我给出canvas_nest的下载方式：

git clone /theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

5. 修改标签样式

博客底部的标签样式默认为#tag，我们可以将其改成：

只需要修改模板/themes/next/layout/_macro/post.swig，搜索rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

6. 作者头像设置

可以设置当鼠标放置在头像上时，头像自动旋转，具体设置如下：

avatar:# in theme directory(source/images): /images/avatar.gif# in site directory(source/uploads): /uploads/avatar.gif# You can also use other linking images.url: /images/author.jpg #将我们的头像图片放置在blog/themes/next/source/images目录下，填写具体地址# If true, the avatar would be dispalyed in circle.rounded: true #鼠标放在头像上时是否旋转# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.opacity: 1 #头像放缩指数# If true, the avatar would be rotated with the cursor.rotated: true #头像是否设为圆形，否则为矩形

7.文章结束标志

在路径\themes\next\layout\_macro中新建passage-end-tag.swig文件,并添加以下内容：

<div>{% if not is_index %}<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>{% endif %}</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body之后(END POST BODY)，post-footer之前添加如代码：

<div>{% if not is_index %}{% include 'passage-end-tag.swig' %}{% endif %}</div>

然后打开主题配置文件（_config.yml),在末尾添加：

# 文章末尾添加“本文结束”标记passage_end_tag:enabled: true

8.侧边栏设置

设置主题配置文件，其中social表示社交信息，我们可以填入我们相关的链接，格式为链接名:链接地址 || 链接图标，其中链接图标必须是FontAwesome网站中存在的图标名。

# Posts / Categories / Tags in sidebar.site_state: true # 是否在侧边栏加入日志、分类、标签等跳转链接# Social Links# Usage: `Key: permalink || icon`# Key is the link label showing to end users.# Value before `||` delimeter is the target permalink.# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.social:GitHub: /nightmaredimple || github #CSDN: /nightmare_dimple || crosshairs#E-Mail: mailto:yourname@ || envelope#Weibo: /yourname || weibo#Google: /yourname || google#Twitter: /yourname || twitter#FB Page: /yourname || facebook#VK Group: /yourname || vk#StackOverflow: /yourname || stack-overflow#YouTube: /yourname || youtube#Instagram: /yourname || instagram#Skype: skype:yourname?call|chat || skypesocial_icons:enable: true #是否显示社交图标icons_only: false #是否仅显示社交图标transition: true # Follow me on GitHub banner in right-top corner.# Usage: `permalink || title`# Value before `||` delimeter is the target permalink.# Value after `||` delimeter is the title and aria-label name.github_banner: /nightmaredimple || Follow me on GitHub #添加右上角github绑带# Blog rollslinks_icon: linklinks_title: Linkslinks_layout: block#links_layout: inline#links:#Title: # Sidebar Avataravatar: #头像设置# in theme directory(source/images): /images/avatar.gif# in site directory(source/uploads): /uploads/avatar.gif# You can also use other linking images.url: /images/author.jpg# If true, the avatar would be dispalyed in circle.rounded: true# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.opacity: 1# If true, the avatar would be rotated with the cursor.rotated: true# Table Of Contents in the Sidebartoc:enable: true #是否自动生成目录# Automatically add list number to toc.number: false #目录是否自动产生编号# If true, all words will placed on next lines if header width longer then sidebar width.wrap: false #标题过长是否换行# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.max_depth: 6 #最大标题深度sidebar:# Sidebar Position, available values: left | right (only for Pisces | Gemini).position: left #侧边栏位置#position: right# Manual define the sidebar width.# If commented, will be default for:# Muse | Mist: 320# Pisces | Gemini: 240#width: 300# Sidebar Display, available values (only for Muse | Mist):# - 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#display: always#display: hide#display: remove# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).offset: 12 #侧边栏相对主菜单像素距离# Back to top in sidebar.b2t: true #是否提供一键置顶# Scroll percent label in b2t button.scrollpercent: true #是否显示当前阅读进度# Enable sidebar on narrow view (only for Muse | Mist).onmobile: false #手机上是否显示侧边栏

9.文章阴影设置

打开\themes\next\source\css\_custom\custom.styl,向里面加入：

// 主页文章添加阴影效果.post {margin-top: 60px;margin-bottom: 60px;padding: 25px;-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);}

10. 添加文章版权信息

要想开启博客的版权功能，需要设置主题配置文件：

creative_commons:license: by-nc-sasidebar: truepost: true

11.设置博客底部布局

这一部分对应主题配置文件中的：

footer:# Specify the date when the site was setup.# If not defined, current year will be used.since: #建站时间# Icon between year and copyright info.icon:# Icon name in fontawesome, see: /v4.7.0/icons/# `heart` is recommended with animation in red (#ff0000).name: heart #作者图标（默认是author人像)# 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 main config will be used.copyright: 黄飘 #别填bool型，最后显示的东西是copyright || author，即左边没有设置的话就显示作者# -------------------------------------------------------------powered:# Hexo link (Powered by Hexo).enable: false #是否显示 Powered by hexo# Version info of Hexo after Hexo link (vX.X.X).version: false #是否显示Hexo版本theme:# Theme & scheme info link (Theme - NexT.scheme).enable: false #是否显示主题信息# Version info of NexT after scheme info (vX.X.X).version: false #是否显示主题版本# -------------------------------------------------------------# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.# http://www.beian:enable: false #是否显示网站备案信息icp:# -------------------------------------------------------------# Any custom text can be defined here.#custom_text: Hosted by <a href="https://pages.coding.me" class="theme-link" rel="noopener" target="_blank">Coding Pages</a>

12. 添加打赏

在主题配置文件中设置如下：

reward:enable: truecomment: 坚持原创技术分享，您的支持将鼓励我继续创作！wechatpay: /images/wechatpay.jpgalipay: /images/alipay.jpg#bitcoin: /images/bitcoin.jpg

自己获取自己的支付收款码，放置在next/source/images中

13. 添加页面宠物

首先在博客目录下执行：

npm install -save hexo-helper-live2d

然后在站点配置文件中加入：

live2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/tagMode: falsemodel:use: live2d-widget-model-wanko #选择哪种模型display: #放置位置和大小position: rightwidth: 150height: 300mobile:show: false #是否在手机端显示

上面模型的选择可在lived2d中选择，并下载相应的模型：

npm install live2d-widget-model-wanko

14.设置代码块样式

代码块的行号显示在上面已经介绍了，位于站点配置文件，对于代码块的主题我么还能设置其背景，增加复制按钮等，可修改主题配置文件如下：

# Code Highlight theme# Available values: normal | night | night eighties | night blue | night bright# /chriskempson/tomorrow-themehighlight_theme: nightcodeblock:# Manual define the border radius in codeblock# Leave it empty for the default 1border_radius:# Add copy button on codeblockcopy_button:enable: true# Show text copy resultshow_result: true

15.设置博客摘要显示

对于摘要显示，首先我们需要开启摘要功能，修改主题配置文件：

# Automatically scroll page to section which is under  mark.scroll_to_more: true #选取博客正文前的内容# Automatically saving scroll position on each post/page in cookies.save_scroll: false# Automatically excerpt description in homepage as preamble text.excerpt_description: true #自动截取摘要# Automatically Excerpt. Not recommend.# Use  in the post to control excerpt accurately.auto_excerpt: enable: false #自动截取一定程度的摘要length: 150# Read more button# If true, the read more button would be displayed in excerpt section.read_more_btn: true #显示阅读全文按钮

16.设置RSS订阅

在博客主目录下执行：

npm install --save hexo-generator-feed

在站点配置文件中修改：

# Extensions## Plugins: http://hexo.io/plugins/plugins: hexo-generate-feed

然后设置主题配置文件：

# Set rss to false to disable feed link.# Leave rss as empty to use site's feed link.# Set rss to specific value if you have burned your feed already.rss: /atom.xml

17.修改文章链接样式

修改文件themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式，：

// 文章内链接文本样式.post-body p a{color: #0593d3;border-bottom: none;border-bottom: 1px solid #0593d3;&:hover {color: #fc6423;border-bottom: none;border-bottom: 1px solid #fc6423;}}

18.增加阅读次数/时长和访客数

Next6版本集成了多种相关功能，除了已有的busuanzi，目前又加入了symbols-count-time，二者在主题配置文件中的相关设置方法如下：

# Post wordcount display settings# Dependencies: /theme-next/hexo-symbols-count-timesymbols_count_time:separated_meta: true #分隔符|item_text_post: true #是否统计站点总字数item_text_total: true #是否同级文章总字数awl: 2 #平均每个字符的长度wpm: 300 #words per minutebusuanzi_count:enable: true #是否开启不蒜子统计功能total_visitors: true #是否统计总访客数total_visitors_icon: user #访客数图标为人像total_views: true #是否同级总访问数total_views_icon: eye #访问数图标为眼睛post_views: true #是否统计文章访问数post_views_icon: eye #访问数图标为眼睛

其中前者还需在站点配置文件中加入：

symbols_count_time:symbols: true #是否统计字数time: false #是否统计阅读时长total_symbols: true #是否统计总字数total_time: false #是否统计总阅读时长