个人博客: https://www.crystalblog.xyz/

备用地址: https://wang-qz.gitee.io/crystal-blog/

上篇hexo博客建设和主题优化(1) 下篇hexo博客建设和主题优化(3)

主题目录下_config.yml 配置文件：

# 配置网站favicon和网站LOGO ## 本地 #favicon: /favicon.png #logo: /medias/logo.png # 此处我用的CDN，本地文件也可以使用 favicon: https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png logo: https://cdn.jsdelivr.net/gh/guixinchn/image/blog/logo.png 

图片资源在主题目录中\themes\hexo-theme-matery\source\medias下面 , 外链图片也可以使用.

实现方法，介绍 js 主题文件下的文件 /source/js/ 下新建 funnyTitle.js，添加以下代码：

var OriginTitle = document.title;  var titleTime;  document.addEventListener('visibilitychange', function () { 
              if (document.hidden) { 
                  $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png");          document.title = 我相信你会回来的！;          clearTimeout(/span>titleTime); } else { 
          $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png"); document.title = '哈哈，我就知道！' + OriginTitle; titleTime = setTimeout(function () { 
          document.title = OriginTitle; }, 2000); } }); 

然后在主题目录下的/layout/layout.ejs 引入

<script src="<%- theme.jsDelivr.url %><%- url_for('/js/funnyTitle.js') %>"></script>

打开主题目录下的 /layout/about.ejs 文件，新增如下代码：

<div class="card-content article-card-content">
   <div class="title center-align" data-aos="zoom-in-up">
      <i class="fa fa-address-book"></i>&nbsp;&nbsp;<%- __('个人简历') %>
   </div>
   <div id="articleContent" data-aos="fade-up">
      <%- page.content %>
   </div>
</div>

在主题目录下的/layout/about.ejs 文件里面关于下面代码中的profile相关信息从主题的 _config.yml 配置文件中获取.

<div class="profile center-align">
    <div class="avatar">
        <img src="<%- theme.jsDelivr.url %><%- url_for(theme.profile.avatar) %>" alt="<%- config.author %>" class="circle responsive-img avatar-img">
    </div>
    <div class="author">
        <div class="post-statis hide-on-large-only" data-aos="zoom-in-right">
            <%- partial('_partial/post-statis') %>
        </div>
        <div class="title"><%- config.author %></div>
        <div class="career"><%- theme.profile.career %></div>
        <div class="social-link hide-on-large-only" data-aos="zoom-in-left">
            <%- partial('_partial/social-link') %>
        </div>
    </div>
</div>

主题目录下的 _config.yml 配置文件中profile信息配置, 可以修改…

# profile in about page, including avatars, career, and personal introductions.
# 在”关于”页面中配置个人信息，包括头像、职业和个人介绍.
profile:
  avatar: /medias/avatar.jpg
  career: Software Engineer
  introduction: If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as your brother and hope as your sentry.

原来的主题没有404页面，首先在主题目录下的/source/目录下新建一个404.md，内容如下：

---
title: 404
date: 2017-07-19 16:41:10
type: "404"
layout: "404"
description: "你访问的页面被外星人叼走了 :("
---

然后在主题目录下新建一个/layout/404.ejs文件，内容如下：

<style type="text/css"> /* don't remove. */ .about-cover { 
           height: 90.2vh; } </style>
<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<% if (theme.banner.enable) { %>
    <script> // 每天切换 banner 图. Switch banner image every day. var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.jpg'; $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')'); </script>
<% } else { %>
    <script> $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.jpg') %>)'); </script>
<% } %>

根据自己需要修改主题目录下的/layout/_partial/footer.ejs文件, 可以设置站点访问量, 访问人数, 字数统计, 站点运行时间, 网站备案等信息.

<footer class="page-footer bg-color">
    <% if (theme.music.enable && theme.music.fixed) { %>
        <%- partial('_widget/music') %>
    <% } %>

    <div class="container row center-align" style="margin-bottom: <% if (theme.time.enable) { 
             %>15<% } else { 
             %>0<% } %>px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            <% if (theme.time.year !== new Date().getFullYear()) { %>
                <span id="year"><%- theme.time.year %>-<%- new Date().getFullYear() %></span>
            <% } else { %>
                <span id="year"><%- theme.time.year %></span>
            <% } %>
            <i class="fa fa-heart" style="color: #ff71a8"></i>
            <a href="<%- url_for('/about') %>" target="_blank"><%- config.author %></a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>

            <% if (theme.postInfo.totalCount) { %>
                <span style="margin-left: -20px; display: inline">
                &nbsp;  <i class="fas fa-chart-area"></i>&nbsp;<%- __('siteTotalWords') %>:&nbsp;<span class="white-color"><%= totalcount(site) %></span>
                <span/>
            <% } %>

            <% let socialClass = '' %>
            <% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
                <% socialClass = 'social-statis' %>
            <% } %>
            <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
                <span id="busuanzi_container_site_pv3" style="display: inline">
                &nbsp;|&nbsp;<i class="far fa-eye"></i>&nbsp;<%- __('siteTotalVisits') %>:&nbsp;<span id="busuanzi_value_site_pv" class="white-color"><%= totalcount(site) %></span>
                </span>
            <% } %>
            <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
                <span id="busuanzi_container_site_uv3" style="display: inline">
                &nbsp;|&nbsp;<i class="fas fa-users"></i>&nbsp;<%- __('siteTotalVisitors') %>:&nbsp;<span id="busuanzi_value_site_uv" class="white-color"><%= totalcount(site) %></span>
                </span>
            <% } %>
            <br>

            <!-- 运行天数提醒. -->
            <% if (theme.time.enable) { %>
                <span id="sitetime"> Loading ...</span>
                <script> var calcSiteTime = function () { 
           var seconds = 1000; var minutes = seconds * 60; var hours = minutes * 60; var days = hours * 24; var years = days * 365; var today = new Date(); var startYear = "<%- theme.time.year %>"; var startMonth = "<%- theme.time.month %>"; var startDate = "<%- theme.time.date %>"; var startHour = "<%- theme.time.hour %>"; var startMinute = "<%- theme.time.minute %>"; var startSecond = "<%- theme.time.second %>"; var todayYear = today.getFullYear(); var todayMonth = today.getMonth() + 1; var todayDate = today.getDate(); var todayHour = today.getHours(); var todayMinute = today.getMinutes(); var todaySecond = today.getSeconds(); var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond); var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond); var diff = t2 - t1; var diffYears = Math.floor(diff / years); var diffDays = Math.floor((diff / days) - diffYears * 365); var diffHours = Math.floor((diff / hours) - diffYears * 365 * 24 - diffDays * 24); var diffMinutes = Math.floor((diff / minutes) - diffYears * 365 * 24 * 60 - diffDays * 24 * 60 - diffHours * 60); var diffSeconds = Math.floor((diff / seconds) - diffYears * 365 * 24 * 60 * 60 - diffDays * 24 * 60 * 60 - diffHours * 60 * 60 - diffMinutes * 60); // 区分是否有年份. var language = '<%- config.language %>'; if (startYear === String(todayYear)) { 
           document.getElementById("year").innerHTML = todayYear; var daysTip = 'This site has been running for ' + diffDays + ' days'; if (language === 'zh-CN') { 
           daysTip = '本站已运行 ' + diffDays + ' 天'; } else if (language === 'zh-HK') { 
           daysTip = '本站已運行 ' + diffDays + ' 天'; } document.getElementById("sitetime").innerHTML = daysTip; } else { 
           document.getElementById("year").innerHTML = startYear + " - " + todayYear; var yearsAndDaysTip = 'This site has been running for ' + diffYears + ' years and ' + diffDays + ' days'; if (language === 'zh-CN') { 
           yearsAndDaysTip = '本站已运行 ' + diffYears + ' 年 ' + diffDays + ' 天 ' + diffHours + ' 小时 ' + diffMinutes + ' 分钟 ' + diffSeconds + ' 秒'; } else if (language === 'zh-HK') { 
           yearsAndDaysTip = '本站已運行 ' + diffYears + ' 年 ' + diffDays + ' 天'; } document.getElementById("sitetime").innerHTML = yearsAndDaysTip; } } var timer = setInterval(calcSiteTime); // calcSiteTime(); </script>
            <% } %>
                    &nbsp;|&nbsp;
            <% if (theme.icp.enable) { %>
                <span id="icp">
                    <img src="<%- theme.jsDelivr.url %><%- url_for('/medias/icp.png') %>" style="vertical-align: text-bottom;"/>
                    <a href="<%- url_for(theme.icp.url) %>" target="_blank"><%=                                 theme.icp.text %></a>
                </span>
            <% } %>
        </div>

        <div class="col s12 m4 l4 social-link <%- socialClass %>">
            <%- partial('_partial/social-link') %>
        </div>
    </div>
</footer>

还可以添加百度不蒜子统计

找到/layout/_partial/footer.ejs 文件，修改对应样式为

<!--总访问人数-->
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { 
         %>
<span id="busuanzi_container_site_uv" style="display: inline">
   &nbsp;|&nb