干货时刻
hexo
个人主页系列教程:本文主要讲解next
主题站点以及个人信息的优化。
设置建站时间
OK
,书接上文,我们将博文的相关配置都搞定了。接下来就要好好地美化一下自己的网站~
第一件事就是设置一下自己的建站时间,记录个人主页这一里程碑的时刻。我们首先进入路径themes/next/layout/_partials
,在该目录下新建一个since.swig
文件,键入以下代码:
<div id="site-runtime">
<span class="post-meta-item-icon">
<i class="fa fa-clock-o"></i>
</span>
<span id="runtime"></span>
</div>
<script language="javascript">
function isPC() {
var userAgentInfo = navigator.userAgent;
var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for (var i = 0; i < agents.length; i++) {
if (userAgentInfo.indexOf(agents[i]) > 0) {
return false;
}
}
return true;
}
function siteTime(openOnPC, start) {
window.setTimeout("siteTime(openOnPC, start)", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
{%- if theme.runtime.start %}
start = new Date("{{ theme.runtime.start }}");
{%- endif %}
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var diff = now - start;
var diffYears = Math.floor(diff / years);
var diffDays = Math.floor((diff / days) - diffYears * 365);
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
if (openOnPC) {
if (diffYears == 0){
document.getElementById("runtime").innerHTML = "本站已安全运行: " + diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
}else{
document.getElementById("runtime").innerHTML = "本站已安全运行: " + diffYears + " 年 " + diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
}
} else {
if (y == 0){
document.getElementById("runtime").innerHTML = "本站已安全运行: " + diffDays + "天 " + diffHours + "小时 " + diffMinutes + "分钟 " + diffSeconds + "秒";
}else{
document.getElementById("runtime").innerHTML = "本站已安全运行: " + diffYears + "年 " + diffDays + "天 " + diffHours + "小时 " + diffMinutes + "分钟 " + diffSeconds + "秒";
}
}
}
var showOnMobile = {{ theme.runtime.mobile }};
var openOnPC = isPC();
var start = new Date();
siteTime(openOnPC, start);
if (!openOnPC && !showOnMobile) {
document.getElementById('site-runtime').style.display = 'none';
}
</script>
接着,我们在该目录下找到footer.swig
,在文件的最后键入以下代码:
{%- if theme.runtime.enable %} {% include 'since.swig' %} {%- endif %}
最后,我们进入路径themes/next/_config.yml
,在主题配置文件中键入以下代码:
# 网站运行时间
runtime:
enable: true
create_time: "04/15/2022 13:18:00" #此处修改你的建站时间或者网站上线时间
start: 2022-04-15 13:13:00 +0800
mobile: false
统计网站访问量和文章阅读量
既然优化到了 网站的页脚,那我们顺带统计一下网站的访问量和文章阅读量。next
主题集成了一个第三方插件:busuanzi
,中文名也叫不蒜子。
怎么设置呢?我们进入路径themes/next/_config.yml
,在主题配置文件中修改busuanzi_count
字段:
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: fa fa-eye
统计文章字数以及阅读时长
统计文章字数以及阅读时长,需要用到额外的依赖包,我们首先下载到本地中,在终端中进入你的项目根目录blog
,键入:
npm install hexo-symbols-count-time --save
顺带提一嘴,还没安装淘宝镜像的同学,赶紧麻溜地去安装,这下载速度提升得不是一点半点:
npm install cnpm -g --registry=https://registry.npm.taobao.org
安装完cnpm
后,凡是用到npm
命令的时候,都换成cnpm
。
OK
,安装完hexo-symbols-count-time
后,我们进入项目根目录blog
,找到站点配置文件_config.yml
,找个空地键入:
# 统计字数和阅读市场
symbols_count_time:
time: true # 文章阅读时长
symbols: true # 文章字数统计
total_time: true # 站点总阅读时长
total_symbols: true # 站点总字数统计
exclude_codeblock: true # 排除代码字数统计
然后进入路径themes/next/_config.yml
,在主题配置文件中修改symbols_count_time
字段:
symbols_count_time:
separated_meta: false
item_text_post: true
item_text_total: false
启用动态背景
next
主题集成了多种风格的动态背景,例如canvas nest
和JS 3D library
。笔者使用的是线条风格的canvas nest
。
首先我们在终端中键入命令(此时你的终端路径应该是项目根目录blog
,例如笔者的是E:\System_disk_app\blog
):
cd themes/next
此时,路径切换到了next
主题下,然后键入:
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
安装好后,键入以下命令回滚到原项目路径:
cd ../..
进入路径themes/next/_config.yml
,在主题配置文件中修改canvas_nest
字段:
canvas_nest:
enable: true
onmobile: true # Display on mobile or not
color: "0,0,0" # RGB values, use `,` to separate
opacity: 1 # The opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # The number of lines
布置背景图片
不少同学是二次元死忠粉,想要往自己网站部署动漫背景图。我们进入路径blog/source/_data/styles.styl
(如果找不到这个文件,请移步:搭建个人主页保姆级教程(三)完成之前的配置),添加以下代码:
/*添加背景图*/
body {
background: url(images/background.png); /*自定义的图片*/
background-size: 100% 100%; /*拉伸到全屏显示*/
background-repeat: no-repeat; /*拒绝重复填充*/
background-attachment: fixed; /*固定图层,不随鼠标滚动而滚动*/
}
/*文章透明度*/
.post-block {
opacity: 0.9;
}
/*侧边框的透明度设置*/
.sidebar {
background-color: transparent;
opacity: 0.9;
}
/*菜单栏的透明度设置*/
.header-inner {
background: rgba(255, 255, 255, 0.9);
}
/*如果设置了本地搜索,设置它的透明度*/
.popup {
opacity: 0.9;
}
其中,background
字段是你的图片地址,存放的路径为:themes/next/source/images
。
设置页面顶部阅读进度条
我们依旧在终端中依次执行以下命令,切换到next
主题路径下载依赖包:
cd themes/next
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress
cd ../..
然后进入路径themes/next/_config.yml
,在主题配置文件中修改reading_progress
字段:
reading_progress:
enable: true
# Available values: top | bottom
position: top
color: "#fc6423"
height: 3px
设置回到顶部按钮
进入路径themes/next/_config.yml
,在主题配置文件中修改back2top
字段:
back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true
设置个人头像
进入路径themes/next/_config.yml
,在主题配置文件中修改avatar
字段,url
可以是本地图片,我们只需要把头像放到themes/next/source/images
路径下即可:
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/avatar.jpg
# If true, the avatar will be dispalyed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: true
修改网站图标
现在可以看到网站的图标还是next
图片,我们可以将其替换为自己喜欢的icon
图标。例如,可以到iconfont去逛逛。
下载16x16
和32x32
尺寸的图标后,进入路径themes/next/_config.yml
,在主题配置文件中修改favicon
字段。small
是16x16
的,medium
是32x32
。
favicon:
small: /images/fa_16x16.svg
medium: /images/fa_32x32.svg
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
添加社交链接
进入路径themes/next/_config.yml
,在主题配置文件中修改social
字段:
social:
GitHub: https://github.com/dongyaoo || fab fa-github
知乎: https://www.zhihu.com/people/wei-xue-guang-33 || fa fa-lightbulb
CSDN: https://blog.csdn.net/qq_41911142?type=blog || fa fa-bolt
其中,||
前面的url
是你想要链接的网址。fab
或者fa
是默认的图标样式,像我这样配置即可,不用修改。fa-xxx
是fontAwesome
网站上的图标名。不知道怎么设置的同学还请移步搭建个人主页保姆级教程(三)。
设置 RSS 订阅
大家可以看到,上一小节的图中,我们没有设置RSS
。RSS
是什么呢?
RSS
的全称为Really Simple Syndication
,中文名为简易信息聚合。它是一种使用XML
向其它网站分发某个网站上的网络内容的方法。这样其它人可以对该网站的新闻和更新进行快速浏览。换句话来讲,RSS
可以让别人快速知道你的网站是干啥的。
怎么配置呢?工欲善其事必先利其器,我们先下载插件:
cnpm install hexo-generator-feed --save
在项目的根目录blog
中找到站点配置文件_config.yml
,找个空地添加以下代码:
# RSS
feed:
type: atom
path: atom.xml
limit: 20
content_limit: 140
content_limit_delim: " "
order_by: -date
autodiscovery: true
OK
,然后我们像上一小节演示的那样,在主题配置文件的social
字段中添加上:
social:
RSS: /atom.xml || fa fa-rss
添加友情链接
侧边栏空地儿还很大,我们添加个友链耍耍。进入路径themes/next/_config.yml
,在主题配置文件中修改links
字段:
# Blog rolls
links_settings:
icon: fa fa-link
title: 友情链接
# Available values: block | inline
layout: block
links:
东曜说: https://www.dongyaoo.com
结束语
想要学习更多优质内容的同学,关注收藏一下作者的个人主页:东曜说 ~~