目录

  1. 1. 前言

LOADING

第一次加载文章图片可能会花费较长时间

要不挂个梯子试试?(x

加载过慢请开启缓存 浏览器默认开启

Hexo主题美化——添加站点运行资讯

2024/1/4 Hexo
  |     |   总文章阅读量:

前言

看butterfly主题那个网站资讯眼红一段时间了

一直想给这个主题加一个

参考:

https://github.com/jerryc127/hexo-theme-butterfly/blob/f74ede6d15ff7b6d78f432cd4f76591c9231d338/layout/includes/widget/card_webinfo.pug#L20

https://www.liujunxiang0076.asia/2023/08/03/hexo%E6%B7%BB%E5%8A%A0%E7%BD%91%E7%AB%99%E8%BF%90%E8%A1%8C%E6%97%B6%E9%97%B4/

初步先在card,即本博客主页的侧边栏卡片下加入一个网站资讯的卡片

<div id="card-div">
    <div class="card-style" style="width: 300px">
        <div class="avatar">
            <img src="<%- url_for(theme.avatar) %>" alt="avatar" />
        </div>
        <div class="name">
            <%= config.author %>
        </div>
        <div class="description">
            <%- markdown(theme.card.description) %>
        </div>
        <% if (Object.keys(theme.card.iconLinks).length) { %>
        <div class="icon-links">
            <% Object.keys(theme.card.iconLinks).forEach(key=> { %>
            <span class="icon-link">
                <a href="<%- url_for(theme.card.iconLinks[key].link) %>">
                    <i
                        class="fa-<%- theme.card.iconLinks[key].theme %> fa-<%- theme.card.iconLinks[key].name %> fa-fw"></i>
                </a>
            </span>
            <% }); %>
        </div>
        <% } %>
        <% if (Object.keys(theme.card.friendLinks).length) { %>
        <div class="friend-links">
            <% Object.keys(theme.card.friendLinks).forEach(key=> { %>
            <div class="friend-link">
                <a href="<%- url_for(theme.card.friendLinks[key]) %>">
                    <%= key %>
                </a>
            </div>
            <% }); %>
        </div>
        <% } %>
    </div>
</div>
<div id="announcement">
    <div class="card-style" style="width: 300px;margin-top: 20px;">
        <span style="font-size: 20px; text-align: left;"><i class="fas fa-bullhorn fa-shake"></i> 公告</span>
        <div class="announcement_content">
            <%- markdown(theme.announcement.content) %>
        </div>
    </div>
</div>
<div id="info">
    <div class="card-style" style="width: 300px;margin-top: 20px;">
        <span style="font-size: 20px; text-align: left;"><i class="fas fa-chart-line"></i> 网站资讯</span>
        <div style="margin-top: 15px;margin-left: 10px;text-align: left;line-height: 30px;font-size: 15px">
            <span id="TotalArtical">文章总数:<%=site.posts.length%></span>
            <br>
            <span id="TotalArtical">本站总字数:<%=totalcount(site)%></span>
            <br>
            <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
            <script>
                var now = new Date();
                function createtime() {
                    var webCreatetime = new Date("02/07/2023 17:30:00");//在此处修改你的建站时间
                    now.setTime(now.getTime() + 250);
                    days = (now - webCreatetime) / 1000 / 60 / 60 / 24;
                    dayNum = Math.floor(days);
                    hours = (now - webCreatetime) / 1000 / 60 / 60 - (24 * dayNum);
                    hourNum = Math.floor(hours);
                    if (String(hourNum).length == 1) { hourNum = "0" + hourNum; }
                    minutes = (now - webCreatetime) / 1000 / 60 - (24 * 60 * dayNum) - (60 * hourNum);
                    monthNum = Math.floor(minutes);
                    if (String(monthNum).length == 1) { monthNum = "0" + monthNum; }
                    seconds = (now - webCreatetime) / 1000 - (24 * 60 * 60 * dayNum) - (60 * 60 * hourNum) - (60 * monthNum);
                    snum = Math.round(seconds);
                    if (String(snum).length == 1) { snum = "0" + snum; }
                    document.getElementById("timeDate").innerHTML = "已运行时间: " + dayNum + " 天 ";
                    document.getElementById("times").innerHTML = hourNum + " 小时 " + monthNum + " 分 " + snum + " 秒";
                }
                setInterval("createtime()", 250);
            </script>
            <span id="busuanzi_container_site_uv">
                本站访客数: <span id="busuanzi_value_site_uv"></span>
            </span>
            <br>
            <span id="busuanzi_container_site_pv">
                本站总访问量: <span id="busuanzi_value_site_pv"></span>
            </span>
        </div>
    </div>
</div>

注意访客数统计需要使用不蒜子,具体的操作方法暂时请自行搜索(等我啥时候改到这个东西再说),FireFox显示数据不对的话请关闭跟踪保护

注意博客需要安装hexo-wordcount依赖,参考:https://blog.jijian.link/2020-04-28/hexo-wordcount/

npm i --save hexo-wordcount