前言
看butterfly主题那个网站资讯眼红一段时间了
一直想给这个主题加一个
参考:
初步先在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