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

干货时刻

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

结束语

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