关于博客的美化
前言Next的安装配置Next的一般配置添加博客自定义图标修改作者头像并旋转主页文章添加阴影效果在网站底部加上访问量实现统计功能点击爆炸效果添加动态背景修改标签样式文章结束标志设置博客底部布局设置RSS订阅其他功能前言
你好！ 如果你打开这篇文章说明你的博客已经搭建完成，并且爱折腾的你开始走上了美化的道路，首先说明的是本教程是针对Next主题所写，别的主题可能会出现问题。
本人公众号：希望星选【欢迎大家来撩，有意想不到你惊喜哦！】
博客地址：http://liybox.top
Next的安装配置
我们刚搭建好的博客默认主题为landscape，但是正如大家所看到的，默认主题是真的low，所以我们首先要换成Next主题。（当然主题种类有很多，Next主题是Github上Star最多的主题，其一直在更新维护，支持非常多的外部插件和功能选项。）
我们要在博客主目录下执行：
git clone /theme-next/hexo-theme-next themes/next
然后设置站点配置文件_config.yml（注意区分站点配置文件和主题配置文件）：
theme: next
这样我们的博客主题就替换成了Next主题。
然后我们需要把主题风格改为Pisces，在主题配置文件blog/themes/next/_config.yml中的scheme改为：
scheme: Pisces
这样初步的设计就已经做好，接下来就是美化过程了。
Next的一般配置
override：false #表示是否将主题置为默认样式cache:enable:true #表示添加缓存功能，这样浏览器后续打开我们的博客网站会更快menu: #设置博客各个页面的相对路径，默认根路径是blog/sourcehome: / || home#首页about: /about/ || user#关于tags: /tags/ || tags#标签categories: /categories/ || th#分类archives: /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: Pisces
这里添加#代表的是是否注释掉，大家可以自己选择。
以上是Next主题配置文件最常规的配置，而相应的站点配置blog/_config.yml文件的基本配置为：
title: 希望星选——liybox个人博客subtitle: 记录互联网的点滴。description: 心有猛虎 | 细嗅蔷薇keywords:author: liyboxlanguage: 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: next #选择博客主题，名字为themes中选择的主题文件夹名称# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: #博客部署type: gitrepo: github: /liybox/liybox.github.io.gitcoding: /liybox/liybox.git#部署到coding时添加的branch: master
添加博客自定义图标
我们博客的默认图标是N，不过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
修改作者头像并旋转
打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：
.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;/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*//* 鼠标经过头像旋转360度 */-webkit-transition: -webkit-transform 1.0s ease-out;-moz-transition: -moz-transform 1.0s ease-out;transition: transform 1.0s ease-out;}img:hover {/* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused;animation-play-state:paused;*//* 鼠标经过头像旋转360度 */-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);transform: rotateZ(360deg);}/* Z 轴旋转动画 */@-webkit-keyframes play {0% {-webkit-transform: rotateZ(0deg);}100% {-webkit-transform: rotateZ(-360deg);}}@-moz-keyframes play {0% {-moz-transform: rotateZ(0deg);}100% {-moz-transform: rotateZ(-360deg);}}@keyframes play {0% {transform: rotateZ(0deg);}100% {transform: rotateZ(-360deg);}}
主页文章添加阴影效果
打开\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);}
在网站底部加上访问量
打开\themes\next\layout_partials\footer.swig文件,在copyright前加上这句话：
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
然后再合适的位置添加显示统计的代码，代码如下：
<div class="powered-by"><i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">本站访客数:<span id="busuanzi_value_site_uv"></span></span></div>
在这里有两中不同计算方式的统计代码：
pv的方式，单个用户连续点击n篇文章，记录n次访问量
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
uv的方式，单个用户连续点击n篇文章，只记录1次访客数
<span id="busuanzi_container_site_uv">本站总访问量<span id="busuanzi_value_site_uv"></span>次</span>
添加之后再执行hexo d -g，然后再刷新页面就能看到效果
实现统计功能
在根目录下安装 hexo-wordcount,运行：
$ npm install hexo-wordcount --save
然后在主题的配置文件中，配置如下：
# Post wordcount display settings# Dependencies: /willin/hexo-wordcountpost_wordcount:item_text: truewordcount: truemin2read: true
点击爆炸效果
跟那个红心是差不多的，首先在themes/next/source/js/src里面建一个叫fireworks.js的文件，代码如下：
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
打开themes/next/layout/_layout.swig,在上面写下如下代码：
{% 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
添加动态背景
上面这种只是其中一种动态背景，新版的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
修改标签样式
博客底部的标签样式默认为#tag，我们可以将其改成：
只需要修改模板/themes/next/layout/_macro/post.swig：
搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>
文章结束标志
在路径 \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
设置博客底部布局
这一部分对应主题配置文件中的：
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>
设置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
其他功能
一般情况下这样就可以了，更多配置，如打赏，订阅请大家参考以下文章：
Next使用文档：http://theme-/
还请参考CSDN，简书等相关文章！
资源干货请移步：公众号【希望星选】
![[转载] 使用hexo+github搭建个人博客详细教程](https://100zi.50zi.cn/uploadfile/img/16/19/811f8f3cbc0d0cc3118e3755c1f82f6b.jpg)
