关于博客的美化
前言
你好! 如果你打开这篇文章说明你的博客已经搭建完成,并且爱折腾的你开始走上了美化的道路,首先说明的是本教程是针对Next主题所写,别的主题可能会出现问题。
本人公众号:希望星选【欢迎大家来撩,有意想不到你惊喜哦!】
博客地址:http://liybox.top
Next的安装配置
我们刚搭建好的博客默认主题为landscape,但是正如大家所看到的,默认主题是真的low,所以我们首先要换成Next主题。(当然主题种类有很多,Next主题是Github上Star最多的主题,其一直在更新维护,支持非常多的外部插件和功能选项。)
- 我们要在博客主目录下执行:
git clone https://github.com/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/source
home: / || 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 # 是否显示分类/标签/归档页的内容量
# Schemes
scheme: Pisces
这里添加#代表的是是否注释掉,大家可以自己选择。
以上是Next主题配置文件最常规的配置,而相应的站点配置blog/_config.yml文件的基本配置为:
title: 希望星选——liybox个人博客
subtitle: 记录互联网的点滴。
description: 心有猛虎 | 细嗅蔷薇
keywords:
author: liybox
language: zh-CN # 主题语言
timezone: Asia/Shanghai #中国的时区,不要乱改城市
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://huangpiao.tech #绑定域名
root: / #默认根路径,指向实际的source
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: README.md # 部署的时候不包含的文件
# Writing
new_post_name: :title.md # 默认的新博文名称
default_layout: post # 默认布局
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0 #把博客名称改成小写/大写(1,2)
render_drafts: false # 是否显示草稿
post_asset_folder: false #是否启用资源文件夹(用来存放相对路径图片或文件)
relative_link: false # 把链接改为与根目录的相对位址
future: true
highlight:
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
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD #博客日期格式
time_format: HH:mm:ss #博客时间格式
# Pagination
## Set per_page to 0 to disable pagination
per_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.html
deploy: #博客部署
type: git
repo:
github: https://github.com/liybox/liybox.github.io.git
coding: https://git.coding.net/liybox/liybox.git #部署到coding时添加的
branch: master
添加博客自定义图标
我们博客的默认图标是N,不过Next支持修改图标。
博客的图标可以在easyicon、bitbug、iconfont等网站选择和制作,然后选择或者创建相应大小的图标文件,放置在blog/themes/next/sources/images目录下,并在主题配置文件中进行如下配置,只需要设置small和medium两个就可以:
favicon:
small: /images/16x16.png
medium: /images/32x32.png
apple_touch_icon: /images/128x128.png
safari_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: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: 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="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}
打开主题配置文件,在里面最后写下:
# Fireworks
fireworks: true
添加动态背景
上面这种只是其中一种动态背景,新版的Next主题集成了该功能,只需要在主题配置中设置如下即可,下面每个模块只设置其中一个为true,具体效果如何可自己尝试:
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: # 网络背景
enable: true
onmobile: true # display on mobile or not
color: '0,0,0' # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 150 # the number of lines
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
# Canvas-ribbon
# Dependencies: https://github.com/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: false
size: 300
alpha: 0.6
zIndex: -1
另外需要在blog中下载相应资源包,具体见上面的链接,下面我给出canvas_nest的下载方式:
git clone https://github.com/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: 2019 #建站时间
# Icon between year and copyright info.
icon:
# Icon name in fontawesome, see: https://fontawesome.com/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.miitbeian.gov.cn
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-next.iissnan.com/
还请参考CSDN,简书等相关文章!
资源干货请移步:公众号【希望星选】