用Hexo搭建一个GitHub博客——创建一个炫酷的NexT主题——进阶（四）
时间：2023-04-05 00:12:31
HTML5
介绍篇一Hexo搭建一个GitHub博客——创建一个炫酷的NexT主题——进阶（三）主要配置NexT的整体布局实现非常喜欢布局格式。接下来继续配置NexT主题博客。本文主要添加一些常用的第三方接入或服务。请跟随脚步，开启新的征程。配置1.MathEquationsRenderSupportMathEquationsRenderSupport文章中有时可能需要用到数学公式，所以在这里设置。math:enable:true#默认为falseper_page:trueengine:mathjax#两种方式mathjax/katexmathjax:cdn://cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML#默认这里大家根据自己的需要katex:cdn://cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css#Default2.HanSupportsupportsChinesecharactersSetChinesecharacter支持，我没有配置，如果你想配置它，请按照以下步骤操作：1.打开GitBashHere，进入theme/next目录$cdtheme/next2.获取汉字支持Git模块，执行如下命令获取$gitclonehttps://github.com/theme-next/theme-next-hansource/lib/Han3.设置汉字支持han:true4.updateupdate$cdthemes/next/source/lib/Han$gitpull注意：可以使用这个链接检查上面的步骤https://github.com/theme-next...3.添加图标链接到GitHub，一般在右上角或者左上角，如下图我的博客配置。在右上角配置Fork_me_on_GitHub，步骤如下1.打开Fork_me_on_GitHub链接，里面有很多样式，选择你喜欢的样式，复制。2.打开博客项目中的themes/next/layout/_layout.swig文件，搜索
，将复制的内容粘贴到
下面，如下：注意：需要将红框中的连接修改为自己在GitHub上的连接。在右上角配置Fork_me_on_GitHub。本例的方法与上述方法相同，只是获取的连接不同。本例连接地址为GitHubCorners4。把文章底部的#标签改成有图标的形式，在博客项目/themes/next/layout/_macro/post.swig中找到，搜索rel="tag"，把#换成
把原来#的样式改成图标的样式5.字体字体设置在themes/next/_config.yml中搜索fontfont:enable:true#默认false如果你想修改字体，设置为trueglobal:external:truefamily:Lato#设置字体下同字号：#下字号同标题：external:truefamily:size:posts:external:truefamily:logo:external:truefamily:size:codes:external:truefamily:size:6.设置背景动画样式NexT有几种动画背景样式canvas_nest、three_waves、canvas_lines、canvas_sphere等，canvas_nest如下图所示以下步骤完成1.打开GitBashHere进入自己文件夹下的/themes/next文件夹$cd/themes/next2.下载并安装canvas_nest模块执行$gitclonehttps://github.com/theme-next/theme-next-canvas-nestsource/lib/canvas-nest在/themes/next/source/lib中，你会看到canvas_nest文件夹3.在/themes/next/_config.yml中设置canvas_nest:true注意：canvas_nest连接注意：也可以在这里查看设置步骤：canvas_nest设置三_waves如图打开three_waves查看设置步骤。这个和canvas_nest步骤是一样的，这里就不写了。下载完成后，在/themes/next/_config.yml中设置three_waves:true适合schemePisces，这里不做测试。可以输入canvas_ribbon安装7.在网站底部添加流量1.进入\themes\next\layout\_partials\footer.swig，添加2.搜索{%iftheme.footer.powered.enable%}并在此位置添加以下代码spanid="busuanzi_container_site_uv">本站访客数： 注意：这里可以选择两个id值#busuanzi_value_site_uv表示用户连续点击n篇文章，只记录1个访问者#busuanzi_value_site_pv表示用户连续点击n篇文章，记录+n次访问次数#这对应2上的id值。8.给每篇文章添加分类和标签。创建的文章在source/_post目录下，为每篇文章添加标签和分类。9、添加进度条注意：添加进度条也就是说，在手机浏览时，一般都会内置进度条，比如微信浏览，浏览器浏览等，这样就会出现重复的进度条.这里，就看你加不加了。不过在电脑浏览器上浏览还是可以的。本例设置的pace-theme-center-circle显示如下注：或者在这里进入Progress配置查看如何配置1.打开GitBashHere，进入自己文件夹下的/themes/next文件夹$cd/themes/接下来下载并安装Progress模块执行$gitclonehttps://github.com/theme-next/theme-next-pacesource/lib/pace签入/themes/next/source/lib你会看到pace文件夹3.在/themes/next/_config.yml中设置pace:true#settotrue#Themeslist:#pace-theme-big-counter#pace-theme-bounce#pace-theme-barber-shop#pace-主题中心原子#pace-theme-center-circle#pace-theme-center-radar#pace-theme-center-simple#pace-theme-corner-indicator#pace-theme-fill-left#pace-theme-flash#pace-theme-loading-bar#pace-theme-mac-osx#pace-theme-minimal#例如#pace_theme:pace-theme-center-simplepace_theme:pace-theme-center-circle#在这里选择其中之一并注意这里的每个人，用你想要的任何风格自己测试一下。10、添加站内搜索由于我可能需要快速找到相关文章，那么我需要添加站内搜索。按照以下步骤注意：或进入NexT配置站点搜索文档，查看如何配置和安装站点搜索插件$npminstallhexo-generator-searchdb--save或$cnpminstallhexo-generator-searchdb--保存2。在根目录_config.yml中添加#表示站内搜索：路径：search.xml字段：post格式：htmllimit：100003在themes/next/_config.yml文件中搜索local_search并设置local_search:enable:true#设置为truetrigger:auto#auto/manual，auto自动搜索，manual:按[enter]键手动搜索top_n_per_article:1unescape:true11.添加打赏功能查看配置如下NexT主要提供三种打赏方式：微信、支付宝、比特币在themes/next中搜索Reward，将这三种都打开#rewardreward_comment:在这里发表评论#说明wechatpay:/images/wechatpay.jpgalipay:/images/alipay.jpgbitcoin:/images/bitcoin.png这篇文章的总结我们进行了NexT主题的相关配置，使得我们的博客非常漂亮。接下来主要是添加NexT评论系统，添加百度、谷歌搜索等高级配置。希望读者在配置过程中遇到问题可以随时评论。我们一起解决相关问题。推荐大家也看看Hexo的相关文章。用Hexo搭建GitHub博客--初级（一）用Hexo搭建GitHub博客--初级（二）用Hexo搭建GitHub博客--创建炫酷的NexT主题--高级（三）用Hexo搭建GitHub博客---创建炫酷的NexT主题--进阶（四）我的博客欢迎大家随时进入我的博客学习，一起探索。
