Matery主题美化教程

1. 鼠标滑动效果

设置鼠标在滑动时的线条效果，在 matery/layout/layout.ejs 文件最后添加如下内容，可以调整 Color 中的参数来设置线条颜色。

<script
  type="text/javascript"
  color="230,230,150"
  opacity="0.9"
  zIndex="-2"
  count="200"
  src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"
></script>

2. 网站时间统计

默认的主题页面底部信息比较单调，这里我添加了建站时间统计，效果如下：

配置步骤如下：在 matery/layout/_partial/footer.ejs 文件中添加如下内容：

<% if (theme.time.enable) { %>
    <span id="sitetime"> Loading ...</span>
    <script>
        var calcSiteTime = function () {
            // 控制每秒刷新
            window.setTimeout("calcSiteTime()", 1000);
            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 - (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);

            // 区分是否有年份.
            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 = '本站已运行 ' + diffYears + ' 年 ' + diffDays + ' 天 ' + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                } else if (language === 'zh-HK') {
                    daysTip = '本站已運行 ' + diffDays + ' 天';
                }
                document.getElementById("sitetime").innerHTML = '本站已运行 ' + diffYears + ' 年 '  + diffDays + ' 天 ' + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";;
            } 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 + ' 天';
                } else if (language === 'zh-HK') {
                    yearsAndDaysTip = '本站已運行 ' + diffYears + ' 年 ' + diffDays + ' 天';
                }
                document.getElementById("sitetime").innerHTML = '本站已平稳运行 ' + diffYears + ' 年 ' + diffDays + ' 天 ' + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";;
            }
        }

        calcSiteTime();
    </script>
<% } %>