搭建个人主页保姆级教程（四）

干货时刻

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: truecreate_time: "04/15/2022 13:18:00" #此处修改你的建站时间或者网站上线时间start: 2022-04-15 13:13:00 +0800mobile: false

统计网站访问量和文章阅读量

既然优化到了 网站的页脚，那我们顺带统计一下网站的访问量和文章阅读量。next主题集成了一个第三方插件：busuanzi，中文名也叫不蒜子。

怎么设置呢？我们进入路径themes/next/_config.yml，在主题配置文件中修改busuanzi_count字段：

busuanzi_count:enable: truetotal_visitors: truetotal_visitors_icon: fa fa-usertotal_views: truetotal_views_icon: fa fa-eyepost_views: truepost_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: falseitem_text_post: trueitem_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: trueonmobile: true # Display on mobile or notcolor: "0,0,0" # RGB values, use `,` to separateopacity: 1 # The opacity of line: 0~1zIndex: -1 # z-index property of the backgroundcount: 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 | bottomposition: topcolor: "#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.svgmedium: /images/fa_32x32.svgapple_touch_icon: /images/apple-touch-icon-next.pngsafari_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-lightbulbCSDN: 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: atompath: atom.xmllimit: 20content_limit: 140content_limit_delim: " "order_by: -dateautodiscovery: true

OK，然后我们像上一小节演示的那样，在主题配置文件的social字段中添加上：

social:RSS: /atom.xml || fa fa-rss

添加友情链接

侧边栏空地儿还很大，我们添加个友链耍耍。进入路径themes/next/_config.yml，在主题配置文件中修改links字段：

# Blog rolls
links_settings:icon: fa fa-linktitle: 友情链接# Available values: block | inlinelayout: blocklinks:东曜说: https://www.dongyaoo.com

结束语

想要学习更多优质内容的同学，关注收藏一下作者的个人主页：东曜说 ~~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！