mirror of https://github.com/jkjoy/hugoblog.git
Update hotmap.html f0a338e584
This commit is contained in:
jkjoy
parent
0506ee994b
commit
346419bf27
190
index.html
190
index.html
|
|
@ -1,195 +1,7 @@
|
||||||
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
||||||
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
||||||
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
||||||
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script>class HeatmapCard extends HTMLElement{constructor(){super(),this.rss_url="",this.attachShadow({mode:"open"}),this.colorSchemeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.colorSchemeMediaQuery.addEventListener("change",this.handleColorSchemeChange.bind(this))}connectedCallback(){this.shadowRoot.innerHTML=`
|
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script src=https://blogcdn.loliko.cn/heatmap.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
--ht-main: #334155;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #ebedf0;
|
|
||||||
--ht-lv-1: #9be9a8;
|
|
||||||
--ht-lv-2: #40c463;
|
|
||||||
--ht-lv-3: #30a14e;
|
|
||||||
--ht-lv-4: #216e39;
|
|
||||||
}
|
|
||||||
:host([data-theme="dark"]) {
|
|
||||||
--ht-main: #94a3b8;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #161b22;
|
|
||||||
--ht-lv-1: #0e4429;
|
|
||||||
--ht-lv-2: #006d32;
|
|
||||||
--ht-lv-3: #26a641;
|
|
||||||
--ht-lv-4: #39d353;
|
|
||||||
}
|
|
||||||
.heatmap_container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
color: var(--ht-main);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-end;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_week {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_month {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.heatmap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 84px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_footer {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level {
|
|
||||||
display: flex;
|
|
||||||
gap: 2px;
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
width: max-content;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level_item {
|
|
||||||
display: block;
|
|
||||||
border-radius: 0.125rem;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
.heatmap_level_0 {
|
|
||||||
background: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_level_1 {
|
|
||||||
background: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_level_2 {
|
|
||||||
background: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_level_3 {
|
|
||||||
background: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_level_4 {
|
|
||||||
background: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
.heatmap_day {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 1px;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 12px;
|
|
||||||
left: 50%;
|
|
||||||
width: max-content;
|
|
||||||
color: var(--ht-tooltip);
|
|
||||||
background-color: var(--ht-tooltip-bg);
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 3px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
opacity: 1;
|
|
||||||
transition: 0.3s;
|
|
||||||
z-index: 1000;
|
|
||||||
text-align: right;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_count,
|
|
||||||
.heatmap_tooltip_post {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title,
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title a {
|
|
||||||
text-decoration: none; /* 去除下划线 */
|
|
||||||
color: inherit; /* 继承父元素的字体颜色 */
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
}
|
|
||||||
.heatmap_day_level_0 {
|
|
||||||
background-color: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_1 {
|
|
||||||
background-color: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_2 {
|
|
||||||
background-color: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_3 {
|
|
||||||
background-color: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_4 {
|
|
||||||
background-color: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="heatmap_container">
|
|
||||||
<div class="heatmap_content">
|
|
||||||
<div class="heatmap_week">
|
|
||||||
<span>Mon</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Wed</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Fri</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Sun</span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_main">
|
|
||||||
<div class="month heatmap_month"></div>
|
|
||||||
<div id="heatmap" class="heatmap"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_footer">
|
|
||||||
<div class="heatmap_less">Less</div>
|
|
||||||
<div class="heatmap_level">
|
|
||||||
<span class="heatmap_level_item heatmap_level_0"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_1"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_2"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_3"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_4"></span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_more">More</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,this.generateMonthLabels(),this.fetchData(),this.updateTheme()}fetchData(){fetch(this.rss_url).then(e=>e.text()).then(e=>(new window.DOMParser).parseFromString(e,"text/xml")).then(e=>{var n=e.querySelectorAll("item"),t={pages:[]};n.forEach(e=>{var n={title:e.querySelector("title").textContent,link:e.querySelector("link").textContent,date:new Date(e.querySelector("pubDate").textContent).toISOString().split("T")[0],word_count:(new DOMParser).parseFromString(e.querySelector("description").textContent,"text/html").body.textContent.trim().length.toString()};t.pages.push(n)}),this.createHeatmap(t)}).catch(e=>{console.log("Request failed: "+e.message)})}generateMonthLabels(){const n=this.shadowRoot.querySelector(".month"),s=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];let e;window.innerWidth<768?e=5:e=12;const o=new Date,t=(o.getMonth()-(e-1)+12)%12;for(let o=t;o<t+e;o++){const i=document.createElement("span"),a=o%12;i.textContent=s[a],n.appendChild(i)}}createHeatmap(e){const s=this.shadowRoot.getElementById("heatmap"),o=this.getStartDate(),i=new Date;let n=this.createWeek();s.appendChild(n);let t=o;for(;t<=i;){const i=`${t.getFullYear()}-${("0"+(t.getMonth()+1)).slice(-2)}-${("0"+t.getDate()).slice(-2)}`,o=e.pages.filter(e=>e.date===i);if(o.length>0){let t=o.map(e=>({title:`《${e.title}》`,link:e.link})),e=0,s=o.length;o.forEach(t=>{e+=parseInt(t.word_count,10)});const a=this.createDay(i,t,e,s);n.appendChild(a)}else{const e=this.createDay(i,[],"0","0");n.appendChild(e)}t.getDay()===0&&(n=this.createWeek(),s.appendChild(n)),t.setDate(t.getDate()+1)}}createDay(e,t,n,s){const o=document.createElement("div");return o.className="heatmap_day",o.setAttribute("data-titlesAndLinks",JSON.stringify(t)),o.setAttribute("data-count",n),o.setAttribute("data-post",s),o.setAttribute("data-date",e),o.addEventListener("mouseenter",function(){const a=document.createElement("div");a.className="heatmap_tooltip";let i="";s&&parseInt(s,10)!==0&&(i+='<span class="heatmap_tooltip_post">共 '+s+" 篇</span>"),n&&parseInt(n,10)!==0&&(i+='<span class="heatmap_tooltip_count"> '+n+" 字；</span>"),t.length>0&&t.forEach(e=>{i+='<span class="heatmap_tooltip_title"><a href="'+e.link+'" target="_blank">'+e.title+"</a></span>"}),e&&(i+='<span class="heatmap_tooltip_date">'+e+"</span>"),a.innerHTML=i,o.appendChild(a)}),o.addEventListener("mouseleave",function(){const e=o.querySelector(".heatmap_tooltip");e&&o.removeChild(e)}),n==0?o.classList.add("heatmap_day_level_0"):n>0&&n<1e3?o.classList.add("heatmap_day_level_1"):n>=1e3&&n<2e3?o.classList.add("heatmap_day_level_2"):n>=2e3&&n<3e3?o.classList.add("heatmap_day_level_3"):o.classList.add("heatmap_day_level_4"),o}createWeek(){const e=document.createElement("div");return e.className="heatmap_week",e}getStartDate(){const e=new Date;let n;window.innerWidth<768?n=4:n=12;const t=new Date(e.getFullYear(),e.getMonth()-n+1,1,e.getHours(),e.getMinutes(),e.getSeconds());for(;t.getDay()!==1;)t.setDate(t.getDate()+1);return t}setTheme(e){e==="light"?this.setAttribute("data-theme","light"):this.setAttribute("data-theme","dark")}handleColorSchemeChange(e){e.matches?this.setTheme("dark"):this.setTheme("light")}updateTheme(){const t=this.colorSchemeMediaQuery.matches,e=document.documentElement.getAttribute("data-theme");e?this.setTheme(e):this.setTheme(t?"dark":"light")}}customElements.define("heatmap-card",HeatmapCard),document.addEventListener("DOMContentLoaded",()=>{const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e));const t=new MutationObserver(e=>{e.forEach(e=>{if(e.type==="attributes"&&e.attributeName==="data-theme"){const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e))}})});t.observe(document.documentElement,{attributes:!0})})</script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
|
||||||
<a datetime='2024-06-06 14:05:06' class=humane--time href=https://www.sunpeiwen.com/memo/2024-06-06/ itemprop=datePublished>June 6, 2024</a></header><div class=description itemprop=about><p>把这个主题移植到typecho去了</p></div></div></article><article class=post--item itemtype=http://schema.org/Article itemscope data-id=1e95c8acdab321338fd980bf45f0727c><div class=content><h2 class=post--title itemprop=headline><a href=https://www.sunpeiwen.com/posts/mastodon-html/>使用mastodon为自己的博客新建说说页面</a></h2><div class=description itemprop=about>项目 https://gitlab.com/idotj/mastodon-embed-feed-timeline …</div><div class=meta><svg class="icon" viewBox="0 0 1024 1024" width="16" height="16"><path d="M512 97.52381c228.912762.0 414.47619 185.563429 414.47619 414.47619S740.912761 926.47619 512 926.47619 97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381zm0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512S323.486477 853.333333 512 853.333333 853.333333 700.513523 853.333333 512 700.513524 170.666667 512 170.666667zm36.571429 89.697523v229.86362h160.865523v73.142857H512a36.571429 36.571429.0 01-36.571429-36.571429V260.388571h73.142858z"/></svg><time datetime='2024-05-31 06:59:05' class=humane--time itemprop=datePublished>May 31, 2024</time>
|
<a datetime='2024-06-06 14:05:06' class=humane--time href=https://www.sunpeiwen.com/memo/2024-06-06/ itemprop=datePublished>June 6, 2024</a></header><div class=description itemprop=about><p>把这个主题移植到typecho去了</p></div></div></article><article class=post--item itemtype=http://schema.org/Article itemscope data-id=1e95c8acdab321338fd980bf45f0727c><div class=content><h2 class=post--title itemprop=headline><a href=https://www.sunpeiwen.com/posts/mastodon-html/>使用mastodon为自己的博客新建说说页面</a></h2><div class=description itemprop=about>项目 https://gitlab.com/idotj/mastodon-embed-feed-timeline …</div><div class=meta><svg class="icon" viewBox="0 0 1024 1024" width="16" height="16"><path d="M512 97.52381c228.912762.0 414.47619 185.563429 414.47619 414.47619S740.912761 926.47619 512 926.47619 97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381zm0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512S323.486477 853.333333 512 853.333333 853.333333 700.513523 853.333333 512 700.513524 170.666667 512 170.666667zm36.571429 89.697523v229.86362h160.865523v73.142857H512a36.571429 36.571429.0 01-36.571429-36.571429V260.388571h73.142858z"/></svg><time datetime='2024-05-31 06:59:05' class=humane--time itemprop=datePublished>May 31, 2024</time>
|
||||||
<svg class="icon" viewBox="0 0 1024 1024" width="16" height="16"><path d="M408.551619 97.52381A73.142857 73.142857.0 01460.288 118.954667L539.306667 197.973333a73.142857 73.142857.0 0051.760762 21.455238h213.504a73.142857 73.142857.0 0173.142857 73.142858v560.761904a73.142857 73.142857.0 01-73.142857 73.142857H219.428571a73.142857 73.142857.0 01-73.142857-73.142857V170.666667a73.142857 73.142857.0 0173.142857-73.142857h189.123048zm0 73.142857H219.428571v682.666666h585.142858V292.571429h-213.504a146.285714 146.285714.0 01-98.499048-38.13181L487.619048 249.734095l-79.067429-79.067428zM365.714286 633.904762v73.142857h-73.142857v-73.142857h73.142857zm365.714285.0v73.142857H414.47619v-73.142857h316.952381zM365.714286 438.857143V512h-73.142857v-73.142857h73.142857zm365.714285.0V512H414.47619v-73.142857h316.952381z"/></svg>
|
<svg class="icon" viewBox="0 0 1024 1024" width="16" height="16"><path d="M408.551619 97.52381A73.142857 73.142857.0 01460.288 118.954667L539.306667 197.973333a73.142857 73.142857.0 0051.760762 21.455238h213.504a73.142857 73.142857.0 0173.142857 73.142858v560.761904a73.142857 73.142857.0 01-73.142857 73.142857H219.428571a73.142857 73.142857.0 01-73.142857-73.142857V170.666667a73.142857 73.142857.0 0173.142857-73.142857h189.123048zm0 73.142857H219.428571v682.666666h585.142858V292.571429h-213.504a146.285714 146.285714.0 01-98.499048-38.13181L487.619048 249.734095l-79.067429-79.067428zM365.714286 633.904762v73.142857h-73.142857v-73.142857h73.142857zm365.714285.0v73.142857H414.47619v-73.142857h316.952381zM365.714286 438.857143V512h-73.142857v-73.142857h73.142857zm365.714285.0V512H414.47619v-73.142857h316.952381z"/></svg>
|
||||||
<a href=/categories/%E5%88%86%E4%BA%AB/>分享</a>
|
<a href=/categories/%E5%88%86%E4%BA%AB/>分享</a>
|
||||||
|
|
|
||||||
|
|
@ -1,195 +1,7 @@
|
||||||
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
||||||
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
||||||
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
||||||
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script>class HeatmapCard extends HTMLElement{constructor(){super(),this.rss_url="",this.attachShadow({mode:"open"}),this.colorSchemeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.colorSchemeMediaQuery.addEventListener("change",this.handleColorSchemeChange.bind(this))}connectedCallback(){this.shadowRoot.innerHTML=`
|
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script src=https://blogcdn.loliko.cn/heatmap.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
--ht-main: #334155;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #ebedf0;
|
|
||||||
--ht-lv-1: #9be9a8;
|
|
||||||
--ht-lv-2: #40c463;
|
|
||||||
--ht-lv-3: #30a14e;
|
|
||||||
--ht-lv-4: #216e39;
|
|
||||||
}
|
|
||||||
:host([data-theme="dark"]) {
|
|
||||||
--ht-main: #94a3b8;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #161b22;
|
|
||||||
--ht-lv-1: #0e4429;
|
|
||||||
--ht-lv-2: #006d32;
|
|
||||||
--ht-lv-3: #26a641;
|
|
||||||
--ht-lv-4: #39d353;
|
|
||||||
}
|
|
||||||
.heatmap_container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
color: var(--ht-main);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-end;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_week {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_month {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.heatmap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 84px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_footer {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level {
|
|
||||||
display: flex;
|
|
||||||
gap: 2px;
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
width: max-content;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level_item {
|
|
||||||
display: block;
|
|
||||||
border-radius: 0.125rem;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
.heatmap_level_0 {
|
|
||||||
background: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_level_1 {
|
|
||||||
background: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_level_2 {
|
|
||||||
background: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_level_3 {
|
|
||||||
background: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_level_4 {
|
|
||||||
background: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
.heatmap_day {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 1px;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 12px;
|
|
||||||
left: 50%;
|
|
||||||
width: max-content;
|
|
||||||
color: var(--ht-tooltip);
|
|
||||||
background-color: var(--ht-tooltip-bg);
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 3px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
opacity: 1;
|
|
||||||
transition: 0.3s;
|
|
||||||
z-index: 1000;
|
|
||||||
text-align: right;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_count,
|
|
||||||
.heatmap_tooltip_post {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title,
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title a {
|
|
||||||
text-decoration: none; /* 去除下划线 */
|
|
||||||
color: inherit; /* 继承父元素的字体颜色 */
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
}
|
|
||||||
.heatmap_day_level_0 {
|
|
||||||
background-color: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_1 {
|
|
||||||
background-color: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_2 {
|
|
||||||
background-color: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_3 {
|
|
||||||
background-color: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_4 {
|
|
||||||
background-color: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="heatmap_container">
|
|
||||||
<div class="heatmap_content">
|
|
||||||
<div class="heatmap_week">
|
|
||||||
<span>Mon</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Wed</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Fri</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Sun</span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_main">
|
|
||||||
<div class="month heatmap_month"></div>
|
|
||||||
<div id="heatmap" class="heatmap"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_footer">
|
|
||||||
<div class="heatmap_less">Less</div>
|
|
||||||
<div class="heatmap_level">
|
|
||||||
<span class="heatmap_level_item heatmap_level_0"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_1"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_2"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_3"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_4"></span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_more">More</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,this.generateMonthLabels(),this.fetchData(),this.updateTheme()}fetchData(){fetch(this.rss_url).then(e=>e.text()).then(e=>(new window.DOMParser).parseFromString(e,"text/xml")).then(e=>{var n=e.querySelectorAll("item"),t={pages:[]};n.forEach(e=>{var n={title:e.querySelector("title").textContent,link:e.querySelector("link").textContent,date:new Date(e.querySelector("pubDate").textContent).toISOString().split("T")[0],word_count:(new DOMParser).parseFromString(e.querySelector("description").textContent,"text/html").body.textContent.trim().length.toString()};t.pages.push(n)}),this.createHeatmap(t)}).catch(e=>{console.log("Request failed: "+e.message)})}generateMonthLabels(){const n=this.shadowRoot.querySelector(".month"),s=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];let e;window.innerWidth<768?e=5:e=12;const o=new Date,t=(o.getMonth()-(e-1)+12)%12;for(let o=t;o<t+e;o++){const i=document.createElement("span"),a=o%12;i.textContent=s[a],n.appendChild(i)}}createHeatmap(e){const s=this.shadowRoot.getElementById("heatmap"),o=this.getStartDate(),i=new Date;let n=this.createWeek();s.appendChild(n);let t=o;for(;t<=i;){const i=`${t.getFullYear()}-${("0"+(t.getMonth()+1)).slice(-2)}-${("0"+t.getDate()).slice(-2)}`,o=e.pages.filter(e=>e.date===i);if(o.length>0){let t=o.map(e=>({title:`《${e.title}》`,link:e.link})),e=0,s=o.length;o.forEach(t=>{e+=parseInt(t.word_count,10)});const a=this.createDay(i,t,e,s);n.appendChild(a)}else{const e=this.createDay(i,[],"0","0");n.appendChild(e)}t.getDay()===0&&(n=this.createWeek(),s.appendChild(n)),t.setDate(t.getDate()+1)}}createDay(e,t,n,s){const o=document.createElement("div");return o.className="heatmap_day",o.setAttribute("data-titlesAndLinks",JSON.stringify(t)),o.setAttribute("data-count",n),o.setAttribute("data-post",s),o.setAttribute("data-date",e),o.addEventListener("mouseenter",function(){const a=document.createElement("div");a.className="heatmap_tooltip";let i="";s&&parseInt(s,10)!==0&&(i+='<span class="heatmap_tooltip_post">共 '+s+" 篇</span>"),n&&parseInt(n,10)!==0&&(i+='<span class="heatmap_tooltip_count"> '+n+" 字；</span>"),t.length>0&&t.forEach(e=>{i+='<span class="heatmap_tooltip_title"><a href="'+e.link+'" target="_blank">'+e.title+"</a></span>"}),e&&(i+='<span class="heatmap_tooltip_date">'+e+"</span>"),a.innerHTML=i,o.appendChild(a)}),o.addEventListener("mouseleave",function(){const e=o.querySelector(".heatmap_tooltip");e&&o.removeChild(e)}),n==0?o.classList.add("heatmap_day_level_0"):n>0&&n<1e3?o.classList.add("heatmap_day_level_1"):n>=1e3&&n<2e3?o.classList.add("heatmap_day_level_2"):n>=2e3&&n<3e3?o.classList.add("heatmap_day_level_3"):o.classList.add("heatmap_day_level_4"),o}createWeek(){const e=document.createElement("div");return e.className="heatmap_week",e}getStartDate(){const e=new Date;let n;window.innerWidth<768?n=4:n=12;const t=new Date(e.getFullYear(),e.getMonth()-n+1,1,e.getHours(),e.getMinutes(),e.getSeconds());for(;t.getDay()!==1;)t.setDate(t.getDate()+1);return t}setTheme(e){e==="light"?this.setAttribute("data-theme","light"):this.setAttribute("data-theme","dark")}handleColorSchemeChange(e){e.matches?this.setTheme("dark"):this.setTheme("light")}updateTheme(){const t=this.colorSchemeMediaQuery.matches,e=document.documentElement.getAttribute("data-theme");e?this.setTheme(e):this.setTheme(t?"dark":"light")}}customElements.define("heatmap-card",HeatmapCard),document.addEventListener("DOMContentLoaded",()=>{const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e));const t=new MutationObserver(e=>{e.forEach(e=>{if(e.type==="attributes"&&e.attributeName==="data-theme"){const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e))}})});t.observe(document.documentElement,{attributes:!0})})</script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
|
||||||
<a datetime='2011-09-12 15:56:09' class=humane--time href=https://www.sunpeiwen.com/memo/20/ itemprop=datePublished>September 12, 2011</a></header><div class=description itemprop=about><p>睡到中午起床。
|
<a datetime='2011-09-12 15:56:09' class=humane--time href=https://www.sunpeiwen.com/memo/20/ itemprop=datePublished>September 12, 2011</a></header><div class=description itemprop=about><p>睡到中午起床。
|
||||||
到姨奶奶家吃饭。
|
到姨奶奶家吃饭。
|
||||||
喝了一两茅台，倒了。
|
喝了一两茅台，倒了。
|
||||||
|
|
|
||||||
|
|
@ -1,195 +1,7 @@
|
||||||
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
||||||
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
||||||
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
||||||
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script>class HeatmapCard extends HTMLElement{constructor(){super(),this.rss_url="",this.attachShadow({mode:"open"}),this.colorSchemeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.colorSchemeMediaQuery.addEventListener("change",this.handleColorSchemeChange.bind(this))}connectedCallback(){this.shadowRoot.innerHTML=`
|
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script src=https://blogcdn.loliko.cn/heatmap.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
--ht-main: #334155;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #ebedf0;
|
|
||||||
--ht-lv-1: #9be9a8;
|
|
||||||
--ht-lv-2: #40c463;
|
|
||||||
--ht-lv-3: #30a14e;
|
|
||||||
--ht-lv-4: #216e39;
|
|
||||||
}
|
|
||||||
:host([data-theme="dark"]) {
|
|
||||||
--ht-main: #94a3b8;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #161b22;
|
|
||||||
--ht-lv-1: #0e4429;
|
|
||||||
--ht-lv-2: #006d32;
|
|
||||||
--ht-lv-3: #26a641;
|
|
||||||
--ht-lv-4: #39d353;
|
|
||||||
}
|
|
||||||
.heatmap_container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
color: var(--ht-main);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-end;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_week {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_month {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.heatmap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 84px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_footer {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level {
|
|
||||||
display: flex;
|
|
||||||
gap: 2px;
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
width: max-content;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level_item {
|
|
||||||
display: block;
|
|
||||||
border-radius: 0.125rem;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
.heatmap_level_0 {
|
|
||||||
background: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_level_1 {
|
|
||||||
background: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_level_2 {
|
|
||||||
background: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_level_3 {
|
|
||||||
background: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_level_4 {
|
|
||||||
background: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
.heatmap_day {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 1px;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 12px;
|
|
||||||
left: 50%;
|
|
||||||
width: max-content;
|
|
||||||
color: var(--ht-tooltip);
|
|
||||||
background-color: var(--ht-tooltip-bg);
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 3px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
opacity: 1;
|
|
||||||
transition: 0.3s;
|
|
||||||
z-index: 1000;
|
|
||||||
text-align: right;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_count,
|
|
||||||
.heatmap_tooltip_post {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title,
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title a {
|
|
||||||
text-decoration: none; /* 去除下划线 */
|
|
||||||
color: inherit; /* 继承父元素的字体颜色 */
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
}
|
|
||||||
.heatmap_day_level_0 {
|
|
||||||
background-color: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_1 {
|
|
||||||
background-color: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_2 {
|
|
||||||
background-color: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_3 {
|
|
||||||
background-color: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_4 {
|
|
||||||
background-color: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="heatmap_container">
|
|
||||||
<div class="heatmap_content">
|
|
||||||
<div class="heatmap_week">
|
|
||||||
<span>Mon</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Wed</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Fri</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Sun</span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_main">
|
|
||||||
<div class="month heatmap_month"></div>
|
|
||||||
<div id="heatmap" class="heatmap"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_footer">
|
|
||||||
<div class="heatmap_less">Less</div>
|
|
||||||
<div class="heatmap_level">
|
|
||||||
<span class="heatmap_level_item heatmap_level_0"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_1"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_2"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_3"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_4"></span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_more">More</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,this.generateMonthLabels(),this.fetchData(),this.updateTheme()}fetchData(){fetch(this.rss_url).then(e=>e.text()).then(e=>(new window.DOMParser).parseFromString(e,"text/xml")).then(e=>{var n=e.querySelectorAll("item"),t={pages:[]};n.forEach(e=>{var n={title:e.querySelector("title").textContent,link:e.querySelector("link").textContent,date:new Date(e.querySelector("pubDate").textContent).toISOString().split("T")[0],word_count:(new DOMParser).parseFromString(e.querySelector("description").textContent,"text/html").body.textContent.trim().length.toString()};t.pages.push(n)}),this.createHeatmap(t)}).catch(e=>{console.log("Request failed: "+e.message)})}generateMonthLabels(){const n=this.shadowRoot.querySelector(".month"),s=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];let e;window.innerWidth<768?e=5:e=12;const o=new Date,t=(o.getMonth()-(e-1)+12)%12;for(let o=t;o<t+e;o++){const i=document.createElement("span"),a=o%12;i.textContent=s[a],n.appendChild(i)}}createHeatmap(e){const s=this.shadowRoot.getElementById("heatmap"),o=this.getStartDate(),i=new Date;let n=this.createWeek();s.appendChild(n);let t=o;for(;t<=i;){const i=`${t.getFullYear()}-${("0"+(t.getMonth()+1)).slice(-2)}-${("0"+t.getDate()).slice(-2)}`,o=e.pages.filter(e=>e.date===i);if(o.length>0){let t=o.map(e=>({title:`《${e.title}》`,link:e.link})),e=0,s=o.length;o.forEach(t=>{e+=parseInt(t.word_count,10)});const a=this.createDay(i,t,e,s);n.appendChild(a)}else{const e=this.createDay(i,[],"0","0");n.appendChild(e)}t.getDay()===0&&(n=this.createWeek(),s.appendChild(n)),t.setDate(t.getDate()+1)}}createDay(e,t,n,s){const o=document.createElement("div");return o.className="heatmap_day",o.setAttribute("data-titlesAndLinks",JSON.stringify(t)),o.setAttribute("data-count",n),o.setAttribute("data-post",s),o.setAttribute("data-date",e),o.addEventListener("mouseenter",function(){const a=document.createElement("div");a.className="heatmap_tooltip";let i="";s&&parseInt(s,10)!==0&&(i+='<span class="heatmap_tooltip_post">共 '+s+" 篇</span>"),n&&parseInt(n,10)!==0&&(i+='<span class="heatmap_tooltip_count"> '+n+" 字；</span>"),t.length>0&&t.forEach(e=>{i+='<span class="heatmap_tooltip_title"><a href="'+e.link+'" target="_blank">'+e.title+"</a></span>"}),e&&(i+='<span class="heatmap_tooltip_date">'+e+"</span>"),a.innerHTML=i,o.appendChild(a)}),o.addEventListener("mouseleave",function(){const e=o.querySelector(".heatmap_tooltip");e&&o.removeChild(e)}),n==0?o.classList.add("heatmap_day_level_0"):n>0&&n<1e3?o.classList.add("heatmap_day_level_1"):n>=1e3&&n<2e3?o.classList.add("heatmap_day_level_2"):n>=2e3&&n<3e3?o.classList.add("heatmap_day_level_3"):o.classList.add("heatmap_day_level_4"),o}createWeek(){const e=document.createElement("div");return e.className="heatmap_week",e}getStartDate(){const e=new Date;let n;window.innerWidth<768?n=4:n=12;const t=new Date(e.getFullYear(),e.getMonth()-n+1,1,e.getHours(),e.getMinutes(),e.getSeconds());for(;t.getDay()!==1;)t.setDate(t.getDate()+1);return t}setTheme(e){e==="light"?this.setAttribute("data-theme","light"):this.setAttribute("data-theme","dark")}handleColorSchemeChange(e){e.matches?this.setTheme("dark"):this.setTheme("light")}updateTheme(){const t=this.colorSchemeMediaQuery.matches,e=document.documentElement.getAttribute("data-theme");e?this.setTheme(e):this.setTheme(t?"dark":"light")}}customElements.define("heatmap-card",HeatmapCard),document.addEventListener("DOMContentLoaded",()=>{const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e));const t=new MutationObserver(e=>{e.forEach(e=>{if(e.type==="attributes"&&e.attributeName==="data-theme"){const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e))}})});t.observe(document.documentElement,{attributes:!0})})</script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
|
||||||
<a datetime='2010-05-16 19:40:05' class=humane--time href=https://www.sunpeiwen.com/memo/51/ itemprop=datePublished>May 16, 2010</a></header><div class=description itemprop=about><p>无意发现，我这竟然是第二次眼角膜发炎。上一次大概是上学时候，我写了段话在空间里。 于是感慨，怎么又得病了。 耳朵里隐隐作 …</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
<a datetime='2010-05-16 19:40:05' class=humane--time href=https://www.sunpeiwen.com/memo/51/ itemprop=datePublished>May 16, 2010</a></header><div class=description itemprop=about><p>无意发现，我这竟然是第二次眼角膜发炎。上一次大概是上学时候，我写了段话在空间里。 于是感慨，怎么又得病了。 耳朵里隐隐作 …</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
<a datetime='2010-05-12 19:40:05' class=humane--time href=https://www.sunpeiwen.com/memo/52/ itemprop=datePublished>May 12, 2010</a></header><div class=description itemprop=about><p>耳朵疼痛数天未愈。 今日起床耳鸣不止。 或是中耳炎症。 听觉低下。 与聋无异。 闷。</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
<a datetime='2010-05-12 19:40:05' class=humane--time href=https://www.sunpeiwen.com/memo/52/ itemprop=datePublished>May 12, 2010</a></header><div class=description itemprop=about><p>耳朵疼痛数天未愈。 今日起床耳鸣不止。 或是中耳炎症。 听觉低下。 与聋无异。 闷。</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
<a datetime='2010-04-19 19:40:04' class=humane--time href=https://www.sunpeiwen.com/memo/54/ itemprop=datePublished>April 19, 2010</a></header><div class=description itemprop=about><p>看着睡在我身旁我爱着的你啊，你可知我心疼的难受，你可知我在默默的流泪。</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
<a datetime='2010-04-19 19:40:04' class=humane--time href=https://www.sunpeiwen.com/memo/54/ itemprop=datePublished>April 19, 2010</a></header><div class=description itemprop=about><p>看着睡在我身旁我爱着的你啊，你可知我心疼的难受，你可知我在默默的流泪。</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
|
|
|
||||||
|
|
@ -1,195 +1,7 @@
|
||||||
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
||||||
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
||||||
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
||||||
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script>class HeatmapCard extends HTMLElement{constructor(){super(),this.rss_url="",this.attachShadow({mode:"open"}),this.colorSchemeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.colorSchemeMediaQuery.addEventListener("change",this.handleColorSchemeChange.bind(this))}connectedCallback(){this.shadowRoot.innerHTML=`
|
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script src=https://blogcdn.loliko.cn/heatmap.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
--ht-main: #334155;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #ebedf0;
|
|
||||||
--ht-lv-1: #9be9a8;
|
|
||||||
--ht-lv-2: #40c463;
|
|
||||||
--ht-lv-3: #30a14e;
|
|
||||||
--ht-lv-4: #216e39;
|
|
||||||
}
|
|
||||||
:host([data-theme="dark"]) {
|
|
||||||
--ht-main: #94a3b8;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #161b22;
|
|
||||||
--ht-lv-1: #0e4429;
|
|
||||||
--ht-lv-2: #006d32;
|
|
||||||
--ht-lv-3: #26a641;
|
|
||||||
--ht-lv-4: #39d353;
|
|
||||||
}
|
|
||||||
.heatmap_container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
color: var(--ht-main);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-end;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_week {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_month {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.heatmap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 84px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_footer {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level {
|
|
||||||
display: flex;
|
|
||||||
gap: 2px;
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
width: max-content;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level_item {
|
|
||||||
display: block;
|
|
||||||
border-radius: 0.125rem;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
.heatmap_level_0 {
|
|
||||||
background: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_level_1 {
|
|
||||||
background: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_level_2 {
|
|
||||||
background: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_level_3 {
|
|
||||||
background: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_level_4 {
|
|
||||||
background: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
.heatmap_day {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 1px;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 12px;
|
|
||||||
left: 50%;
|
|
||||||
width: max-content;
|
|
||||||
color: var(--ht-tooltip);
|
|
||||||
background-color: var(--ht-tooltip-bg);
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 3px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
opacity: 1;
|
|
||||||
transition: 0.3s;
|
|
||||||
z-index: 1000;
|
|
||||||
text-align: right;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_count,
|
|
||||||
.heatmap_tooltip_post {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title,
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title a {
|
|
||||||
text-decoration: none; /* 去除下划线 */
|
|
||||||
color: inherit; /* 继承父元素的字体颜色 */
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
}
|
|
||||||
.heatmap_day_level_0 {
|
|
||||||
background-color: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_1 {
|
|
||||||
background-color: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_2 {
|
|
||||||
background-color: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_3 {
|
|
||||||
background-color: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_4 {
|
|
||||||
background-color: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="heatmap_container">
|
|
||||||
<div class="heatmap_content">
|
|
||||||
<div class="heatmap_week">
|
|
||||||
<span>Mon</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Wed</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Fri</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Sun</span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_main">
|
|
||||||
<div class="month heatmap_month"></div>
|
|
||||||
<div id="heatmap" class="heatmap"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_footer">
|
|
||||||
<div class="heatmap_less">Less</div>
|
|
||||||
<div class="heatmap_level">
|
|
||||||
<span class="heatmap_level_item heatmap_level_0"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_1"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_2"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_3"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_4"></span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_more">More</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,this.generateMonthLabels(),this.fetchData(),this.updateTheme()}fetchData(){fetch(this.rss_url).then(e=>e.text()).then(e=>(new window.DOMParser).parseFromString(e,"text/xml")).then(e=>{var n=e.querySelectorAll("item"),t={pages:[]};n.forEach(e=>{var n={title:e.querySelector("title").textContent,link:e.querySelector("link").textContent,date:new Date(e.querySelector("pubDate").textContent).toISOString().split("T")[0],word_count:(new DOMParser).parseFromString(e.querySelector("description").textContent,"text/html").body.textContent.trim().length.toString()};t.pages.push(n)}),this.createHeatmap(t)}).catch(e=>{console.log("Request failed: "+e.message)})}generateMonthLabels(){const n=this.shadowRoot.querySelector(".month"),s=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];let e;window.innerWidth<768?e=5:e=12;const o=new Date,t=(o.getMonth()-(e-1)+12)%12;for(let o=t;o<t+e;o++){const i=document.createElement("span"),a=o%12;i.textContent=s[a],n.appendChild(i)}}createHeatmap(e){const s=this.shadowRoot.getElementById("heatmap"),o=this.getStartDate(),i=new Date;let n=this.createWeek();s.appendChild(n);let t=o;for(;t<=i;){const i=`${t.getFullYear()}-${("0"+(t.getMonth()+1)).slice(-2)}-${("0"+t.getDate()).slice(-2)}`,o=e.pages.filter(e=>e.date===i);if(o.length>0){let t=o.map(e=>({title:`《${e.title}》`,link:e.link})),e=0,s=o.length;o.forEach(t=>{e+=parseInt(t.word_count,10)});const a=this.createDay(i,t,e,s);n.appendChild(a)}else{const e=this.createDay(i,[],"0","0");n.appendChild(e)}t.getDay()===0&&(n=this.createWeek(),s.appendChild(n)),t.setDate(t.getDate()+1)}}createDay(e,t,n,s){const o=document.createElement("div");return o.className="heatmap_day",o.setAttribute("data-titlesAndLinks",JSON.stringify(t)),o.setAttribute("data-count",n),o.setAttribute("data-post",s),o.setAttribute("data-date",e),o.addEventListener("mouseenter",function(){const a=document.createElement("div");a.className="heatmap_tooltip";let i="";s&&parseInt(s,10)!==0&&(i+='<span class="heatmap_tooltip_post">共 '+s+" 篇</span>"),n&&parseInt(n,10)!==0&&(i+='<span class="heatmap_tooltip_count"> '+n+" 字；</span>"),t.length>0&&t.forEach(e=>{i+='<span class="heatmap_tooltip_title"><a href="'+e.link+'" target="_blank">'+e.title+"</a></span>"}),e&&(i+='<span class="heatmap_tooltip_date">'+e+"</span>"),a.innerHTML=i,o.appendChild(a)}),o.addEventListener("mouseleave",function(){const e=o.querySelector(".heatmap_tooltip");e&&o.removeChild(e)}),n==0?o.classList.add("heatmap_day_level_0"):n>0&&n<1e3?o.classList.add("heatmap_day_level_1"):n>=1e3&&n<2e3?o.classList.add("heatmap_day_level_2"):n>=2e3&&n<3e3?o.classList.add("heatmap_day_level_3"):o.classList.add("heatmap_day_level_4"),o}createWeek(){const e=document.createElement("div");return e.className="heatmap_week",e}getStartDate(){const e=new Date;let n;window.innerWidth<768?n=4:n=12;const t=new Date(e.getFullYear(),e.getMonth()-n+1,1,e.getHours(),e.getMinutes(),e.getSeconds());for(;t.getDay()!==1;)t.setDate(t.getDate()+1);return t}setTheme(e){e==="light"?this.setAttribute("data-theme","light"):this.setAttribute("data-theme","dark")}handleColorSchemeChange(e){e.matches?this.setTheme("dark"):this.setTheme("light")}updateTheme(){const t=this.colorSchemeMediaQuery.matches,e=document.documentElement.getAttribute("data-theme");e?this.setTheme(e):this.setTheme(t?"dark":"light")}}customElements.define("heatmap-card",HeatmapCard),document.addEventListener("DOMContentLoaded",()=>{const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e));const t=new MutationObserver(e=>{e.forEach(e=>{if(e.type==="attributes"&&e.attributeName==="data-theme"){const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e))}})});t.observe(document.documentElement,{attributes:!0})})</script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
|
||||||
<a datetime='2009-02-04 19:39:02' class=humane--time href=https://www.sunpeiwen.com/memo/44/ itemprop=datePublished>February 4, 2009</a></header><div class=description itemprop=about><p>听群里的孩子们问，上海是不是有很多法国梧桐树。 我回答没有。 其实我自己也不大清楚，每天来回奔波，竟然没有注意是否有梧桐 …</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
<a datetime='2009-02-04 19:39:02' class=humane--time href=https://www.sunpeiwen.com/memo/44/ itemprop=datePublished>February 4, 2009</a></header><div class=description itemprop=about><p>听群里的孩子们问，上海是不是有很多法国梧桐树。 我回答没有。 其实我自己也不大清楚，每天来回奔波，竟然没有注意是否有梧桐 …</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
<a datetime='2008-01-09 18:44:01' class=humane--time href=https://www.sunpeiwen.com/memo/201/ itemprop=datePublished>January 9, 2008</a></header><div class=description itemprop=about><p>昨天考完就放假了。凌晨停电到放假的那一刻。于是在无所事事的情况下决定去建始。这里的****很高，花了一百多以后决定还是回 …</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
<a datetime='2008-01-09 18:44:01' class=humane--time href=https://www.sunpeiwen.com/memo/201/ itemprop=datePublished>January 9, 2008</a></header><div class=description itemprop=about><p>昨天考完就放假了。凌晨停电到放假的那一刻。于是在无所事事的情况下决定去建始。这里的****很高，花了一百多以后决定还是回 …</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
<a datetime='2007-12-22 18:45:12' class=humane--time href=https://www.sunpeiwen.com/memo/202/ itemprop=datePublished>December 22, 2007</a></header><div class=description itemprop=about><p>左眼角膜发炎.尚好.虽隐隐疼痛.相信很快就好.勿念.</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
<a datetime='2007-12-22 18:45:12' class=humane--time href=https://www.sunpeiwen.com/memo/202/ itemprop=datePublished>December 22, 2007</a></header><div class=description itemprop=about><p>左眼角膜发炎.尚好.虽隐隐疼痛.相信很快就好.勿念.</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,195 +1,7 @@
|
||||||
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
||||||
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
||||||
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
||||||
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script>class HeatmapCard extends HTMLElement{constructor(){super(),this.rss_url="",this.attachShadow({mode:"open"}),this.colorSchemeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.colorSchemeMediaQuery.addEventListener("change",this.handleColorSchemeChange.bind(this))}connectedCallback(){this.shadowRoot.innerHTML=`
|
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script src=https://blogcdn.loliko.cn/heatmap.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
--ht-main: #334155;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #ebedf0;
|
|
||||||
--ht-lv-1: #9be9a8;
|
|
||||||
--ht-lv-2: #40c463;
|
|
||||||
--ht-lv-3: #30a14e;
|
|
||||||
--ht-lv-4: #216e39;
|
|
||||||
}
|
|
||||||
:host([data-theme="dark"]) {
|
|
||||||
--ht-main: #94a3b8;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #161b22;
|
|
||||||
--ht-lv-1: #0e4429;
|
|
||||||
--ht-lv-2: #006d32;
|
|
||||||
--ht-lv-3: #26a641;
|
|
||||||
--ht-lv-4: #39d353;
|
|
||||||
}
|
|
||||||
.heatmap_container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
color: var(--ht-main);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-end;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_week {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_month {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.heatmap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 84px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_footer {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level {
|
|
||||||
display: flex;
|
|
||||||
gap: 2px;
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
width: max-content;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level_item {
|
|
||||||
display: block;
|
|
||||||
border-radius: 0.125rem;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
.heatmap_level_0 {
|
|
||||||
background: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_level_1 {
|
|
||||||
background: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_level_2 {
|
|
||||||
background: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_level_3 {
|
|
||||||
background: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_level_4 {
|
|
||||||
background: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
.heatmap_day {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 1px;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 12px;
|
|
||||||
left: 50%;
|
|
||||||
width: max-content;
|
|
||||||
color: var(--ht-tooltip);
|
|
||||||
background-color: var(--ht-tooltip-bg);
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 3px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
opacity: 1;
|
|
||||||
transition: 0.3s;
|
|
||||||
z-index: 1000;
|
|
||||||
text-align: right;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_count,
|
|
||||||
.heatmap_tooltip_post {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title,
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title a {
|
|
||||||
text-decoration: none; /* 去除下划线 */
|
|
||||||
color: inherit; /* 继承父元素的字体颜色 */
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
}
|
|
||||||
.heatmap_day_level_0 {
|
|
||||||
background-color: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_1 {
|
|
||||||
background-color: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_2 {
|
|
||||||
background-color: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_3 {
|
|
||||||
background-color: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_4 {
|
|
||||||
background-color: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="heatmap_container">
|
|
||||||
<div class="heatmap_content">
|
|
||||||
<div class="heatmap_week">
|
|
||||||
<span>Mon</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Wed</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Fri</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Sun</span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_main">
|
|
||||||
<div class="month heatmap_month"></div>
|
|
||||||
<div id="heatmap" class="heatmap"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_footer">
|
|
||||||
<div class="heatmap_less">Less</div>
|
|
||||||
<div class="heatmap_level">
|
|
||||||
<span class="heatmap_level_item heatmap_level_0"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_1"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_2"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_3"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_4"></span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_more">More</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,this.generateMonthLabels(),this.fetchData(),this.updateTheme()}fetchData(){fetch(this.rss_url).then(e=>e.text()).then(e=>(new window.DOMParser).parseFromString(e,"text/xml")).then(e=>{var n=e.querySelectorAll("item"),t={pages:[]};n.forEach(e=>{var n={title:e.querySelector("title").textContent,link:e.querySelector("link").textContent,date:new Date(e.querySelector("pubDate").textContent).toISOString().split("T")[0],word_count:(new DOMParser).parseFromString(e.querySelector("description").textContent,"text/html").body.textContent.trim().length.toString()};t.pages.push(n)}),this.createHeatmap(t)}).catch(e=>{console.log("Request failed: "+e.message)})}generateMonthLabels(){const n=this.shadowRoot.querySelector(".month"),s=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];let e;window.innerWidth<768?e=5:e=12;const o=new Date,t=(o.getMonth()-(e-1)+12)%12;for(let o=t;o<t+e;o++){const i=document.createElement("span"),a=o%12;i.textContent=s[a],n.appendChild(i)}}createHeatmap(e){const s=this.shadowRoot.getElementById("heatmap"),o=this.getStartDate(),i=new Date;let n=this.createWeek();s.appendChild(n);let t=o;for(;t<=i;){const i=`${t.getFullYear()}-${("0"+(t.getMonth()+1)).slice(-2)}-${("0"+t.getDate()).slice(-2)}`,o=e.pages.filter(e=>e.date===i);if(o.length>0){let t=o.map(e=>({title:`《${e.title}》`,link:e.link})),e=0,s=o.length;o.forEach(t=>{e+=parseInt(t.word_count,10)});const a=this.createDay(i,t,e,s);n.appendChild(a)}else{const e=this.createDay(i,[],"0","0");n.appendChild(e)}t.getDay()===0&&(n=this.createWeek(),s.appendChild(n)),t.setDate(t.getDate()+1)}}createDay(e,t,n,s){const o=document.createElement("div");return o.className="heatmap_day",o.setAttribute("data-titlesAndLinks",JSON.stringify(t)),o.setAttribute("data-count",n),o.setAttribute("data-post",s),o.setAttribute("data-date",e),o.addEventListener("mouseenter",function(){const a=document.createElement("div");a.className="heatmap_tooltip";let i="";s&&parseInt(s,10)!==0&&(i+='<span class="heatmap_tooltip_post">共 '+s+" 篇</span>"),n&&parseInt(n,10)!==0&&(i+='<span class="heatmap_tooltip_count"> '+n+" 字；</span>"),t.length>0&&t.forEach(e=>{i+='<span class="heatmap_tooltip_title"><a href="'+e.link+'" target="_blank">'+e.title+"</a></span>"}),e&&(i+='<span class="heatmap_tooltip_date">'+e+"</span>"),a.innerHTML=i,o.appendChild(a)}),o.addEventListener("mouseleave",function(){const e=o.querySelector(".heatmap_tooltip");e&&o.removeChild(e)}),n==0?o.classList.add("heatmap_day_level_0"):n>0&&n<1e3?o.classList.add("heatmap_day_level_1"):n>=1e3&&n<2e3?o.classList.add("heatmap_day_level_2"):n>=2e3&&n<3e3?o.classList.add("heatmap_day_level_3"):o.classList.add("heatmap_day_level_4"),o}createWeek(){const e=document.createElement("div");return e.className="heatmap_week",e}getStartDate(){const e=new Date;let n;window.innerWidth<768?n=4:n=12;const t=new Date(e.getFullYear(),e.getMonth()-n+1,1,e.getHours(),e.getMinutes(),e.getSeconds());for(;t.getDay()!==1;)t.setDate(t.getDate()+1);return t}setTheme(e){e==="light"?this.setAttribute("data-theme","light"):this.setAttribute("data-theme","dark")}handleColorSchemeChange(e){e.matches?this.setTheme("dark"):this.setTheme("light")}updateTheme(){const t=this.colorSchemeMediaQuery.matches,e=document.documentElement.getAttribute("data-theme");e?this.setTheme(e):this.setTheme(t?"dark":"light")}}customElements.define("heatmap-card",HeatmapCard),document.addEventListener("DOMContentLoaded",()=>{const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e));const t=new MutationObserver(e=>{e.forEach(e=>{if(e.type==="attributes"&&e.attributeName==="data-theme"){const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e))}})});t.observe(document.documentElement,{attributes:!0})})</script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
|
||||||
<a datetime='2017-06-26 03:18:06' class=humane--time href=https://www.sunpeiwen.com/memo/27/ itemprop=datePublished>June 26, 2017</a></header><div class=description itemprop=about><p>图片无压缩 珠海，华发商都 珠海，阴雨天 IMG_20170620_190831.jpg 生产工具：小米5 拍摄地点：华 …</p></div></div></article><article class=post--item itemtype=http://schema.org/Article itemscope data-id=3ebd0303c7f55ff13f9edac2e10f9a3c><div class=content><h2 class=post--title itemprop=headline><a href=https://www.sunpeiwen.com/posts/midnight-diner/>深夜食堂</a></h2><div class=description itemprop=about>午夜12点，报时钟响起，城市的一隅，属于一家食堂的时间开始了。菜谱只有猪肉套餐，但你想吃的都可以点。这就是老板( …</div><div class=meta><svg class="icon" viewBox="0 0 1024 1024" width="16" height="16"><path d="M512 97.52381c228.912762.0 414.47619 185.563429 414.47619 414.47619S740.912761 926.47619 512 926.47619 97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381zm0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512S323.486477 853.333333 512 853.333333 853.333333 700.513523 853.333333 512 700.513524 170.666667 512 170.666667zm36.571429 89.697523v229.86362h160.865523v73.142857H512a36.571429 36.571429.0 01-36.571429-36.571429V260.388571h73.142858z"/></svg><time datetime='2017-06-16 12:57:06' class=humane--time itemprop=datePublished>June 16, 2017</time>
|
<a datetime='2017-06-26 03:18:06' class=humane--time href=https://www.sunpeiwen.com/memo/27/ itemprop=datePublished>June 26, 2017</a></header><div class=description itemprop=about><p>图片无压缩 珠海，华发商都 珠海，阴雨天 IMG_20170620_190831.jpg 生产工具：小米5 拍摄地点：华 …</p></div></div></article><article class=post--item itemtype=http://schema.org/Article itemscope data-id=3ebd0303c7f55ff13f9edac2e10f9a3c><div class=content><h2 class=post--title itemprop=headline><a href=https://www.sunpeiwen.com/posts/midnight-diner/>深夜食堂</a></h2><div class=description itemprop=about>午夜12点，报时钟响起，城市的一隅，属于一家食堂的时间开始了。菜谱只有猪肉套餐，但你想吃的都可以点。这就是老板( …</div><div class=meta><svg class="icon" viewBox="0 0 1024 1024" width="16" height="16"><path d="M512 97.52381c228.912762.0 414.47619 185.563429 414.47619 414.47619S740.912761 926.47619 512 926.47619 97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381zm0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512S323.486477 853.333333 512 853.333333 853.333333 700.513523 853.333333 512 700.513524 170.666667 512 170.666667zm36.571429 89.697523v229.86362h160.865523v73.142857H512a36.571429 36.571429.0 01-36.571429-36.571429V260.388571h73.142858z"/></svg><time datetime='2017-06-16 12:57:06' class=humane--time itemprop=datePublished>June 16, 2017</time>
|
||||||
<svg class="icon" viewBox="0 0 1024 1024" width="16" height="16"><path d="M408.551619 97.52381A73.142857 73.142857.0 01460.288 118.954667L539.306667 197.973333a73.142857 73.142857.0 0051.760762 21.455238h213.504a73.142857 73.142857.0 0173.142857 73.142858v560.761904a73.142857 73.142857.0 01-73.142857 73.142857H219.428571a73.142857 73.142857.0 01-73.142857-73.142857V170.666667a73.142857 73.142857.0 0173.142857-73.142857h189.123048zm0 73.142857H219.428571v682.666666h585.142858V292.571429h-213.504a146.285714 146.285714.0 01-98.499048-38.13181L487.619048 249.734095l-79.067429-79.067428zM365.714286 633.904762v73.142857h-73.142857v-73.142857h73.142857zm365.714285.0v73.142857H414.47619v-73.142857h316.952381zM365.714286 438.857143V512h-73.142857v-73.142857h73.142857zm365.714285.0V512H414.47619v-73.142857h316.952381z"/></svg>
|
<svg class="icon" viewBox="0 0 1024 1024" width="16" height="16"><path d="M408.551619 97.52381A73.142857 73.142857.0 01460.288 118.954667L539.306667 197.973333a73.142857 73.142857.0 0051.760762 21.455238h213.504a73.142857 73.142857.0 0173.142857 73.142858v560.761904a73.142857 73.142857.0 01-73.142857 73.142857H219.428571a73.142857 73.142857.0 01-73.142857-73.142857V170.666667a73.142857 73.142857.0 0173.142857-73.142857h189.123048zm0 73.142857H219.428571v682.666666h585.142858V292.571429h-213.504a146.285714 146.285714.0 01-98.499048-38.13181L487.619048 249.734095l-79.067429-79.067428zM365.714286 633.904762v73.142857h-73.142857v-73.142857h73.142857zm365.714285.0v73.142857H414.47619v-73.142857h316.952381zM365.714286 438.857143V512h-73.142857v-73.142857h73.142857zm365.714285.0V512H414.47619v-73.142857h316.952381z"/></svg>
|
||||||
<a href=/categories/%E5%90%90%E6%A7%BD/>吐槽</a>
|
<a href=/categories/%E5%90%90%E6%A7%BD/>吐槽</a>
|
||||||
|
|
|
||||||
|
|
@ -1,195 +1,7 @@
|
||||||
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
||||||
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
||||||
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
||||||
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script>class HeatmapCard extends HTMLElement{constructor(){super(),this.rss_url="",this.attachShadow({mode:"open"}),this.colorSchemeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.colorSchemeMediaQuery.addEventListener("change",this.handleColorSchemeChange.bind(this))}connectedCallback(){this.shadowRoot.innerHTML=`
|
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script src=https://blogcdn.loliko.cn/heatmap.js></script><article class=post--item itemtype=http://schema.org/Article itemscope data-id=39c38f450cb8ba65d3c86deb1a9a0292><div class=content><h2 class=post--title itemprop=headline><a href=https://www.sunpeiwen.com/posts/life-mediocrity/>我们是如何变得平庸</a></h2><div class=description itemprop=about>我们为何渐渐平庸
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
--ht-main: #334155;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #ebedf0;
|
|
||||||
--ht-lv-1: #9be9a8;
|
|
||||||
--ht-lv-2: #40c463;
|
|
||||||
--ht-lv-3: #30a14e;
|
|
||||||
--ht-lv-4: #216e39;
|
|
||||||
}
|
|
||||||
:host([data-theme="dark"]) {
|
|
||||||
--ht-main: #94a3b8;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #161b22;
|
|
||||||
--ht-lv-1: #0e4429;
|
|
||||||
--ht-lv-2: #006d32;
|
|
||||||
--ht-lv-3: #26a641;
|
|
||||||
--ht-lv-4: #39d353;
|
|
||||||
}
|
|
||||||
.heatmap_container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
color: var(--ht-main);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-end;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_week {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_month {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.heatmap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 84px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_footer {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level {
|
|
||||||
display: flex;
|
|
||||||
gap: 2px;
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
width: max-content;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level_item {
|
|
||||||
display: block;
|
|
||||||
border-radius: 0.125rem;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
.heatmap_level_0 {
|
|
||||||
background: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_level_1 {
|
|
||||||
background: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_level_2 {
|
|
||||||
background: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_level_3 {
|
|
||||||
background: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_level_4 {
|
|
||||||
background: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
.heatmap_day {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 1px;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 12px;
|
|
||||||
left: 50%;
|
|
||||||
width: max-content;
|
|
||||||
color: var(--ht-tooltip);
|
|
||||||
background-color: var(--ht-tooltip-bg);
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 3px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
opacity: 1;
|
|
||||||
transition: 0.3s;
|
|
||||||
z-index: 1000;
|
|
||||||
text-align: right;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_count,
|
|
||||||
.heatmap_tooltip_post {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title,
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title a {
|
|
||||||
text-decoration: none; /* 去除下划线 */
|
|
||||||
color: inherit; /* 继承父元素的字体颜色 */
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
}
|
|
||||||
.heatmap_day_level_0 {
|
|
||||||
background-color: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_1 {
|
|
||||||
background-color: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_2 {
|
|
||||||
background-color: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_3 {
|
|
||||||
background-color: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_4 {
|
|
||||||
background-color: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="heatmap_container">
|
|
||||||
<div class="heatmap_content">
|
|
||||||
<div class="heatmap_week">
|
|
||||||
<span>Mon</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Wed</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Fri</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Sun</span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_main">
|
|
||||||
<div class="month heatmap_month"></div>
|
|
||||||
<div id="heatmap" class="heatmap"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_footer">
|
|
||||||
<div class="heatmap_less">Less</div>
|
|
||||||
<div class="heatmap_level">
|
|
||||||
<span class="heatmap_level_item heatmap_level_0"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_1"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_2"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_3"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_4"></span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_more">More</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,this.generateMonthLabels(),this.fetchData(),this.updateTheme()}fetchData(){fetch(this.rss_url).then(e=>e.text()).then(e=>(new window.DOMParser).parseFromString(e,"text/xml")).then(e=>{var n=e.querySelectorAll("item"),t={pages:[]};n.forEach(e=>{var n={title:e.querySelector("title").textContent,link:e.querySelector("link").textContent,date:new Date(e.querySelector("pubDate").textContent).toISOString().split("T")[0],word_count:(new DOMParser).parseFromString(e.querySelector("description").textContent,"text/html").body.textContent.trim().length.toString()};t.pages.push(n)}),this.createHeatmap(t)}).catch(e=>{console.log("Request failed: "+e.message)})}generateMonthLabels(){const n=this.shadowRoot.querySelector(".month"),s=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];let e;window.innerWidth<768?e=5:e=12;const o=new Date,t=(o.getMonth()-(e-1)+12)%12;for(let o=t;o<t+e;o++){const i=document.createElement("span"),a=o%12;i.textContent=s[a],n.appendChild(i)}}createHeatmap(e){const s=this.shadowRoot.getElementById("heatmap"),o=this.getStartDate(),i=new Date;let n=this.createWeek();s.appendChild(n);let t=o;for(;t<=i;){const i=`${t.getFullYear()}-${("0"+(t.getMonth()+1)).slice(-2)}-${("0"+t.getDate()).slice(-2)}`,o=e.pages.filter(e=>e.date===i);if(o.length>0){let t=o.map(e=>({title:`《${e.title}》`,link:e.link})),e=0,s=o.length;o.forEach(t=>{e+=parseInt(t.word_count,10)});const a=this.createDay(i,t,e,s);n.appendChild(a)}else{const e=this.createDay(i,[],"0","0");n.appendChild(e)}t.getDay()===0&&(n=this.createWeek(),s.appendChild(n)),t.setDate(t.getDate()+1)}}createDay(e,t,n,s){const o=document.createElement("div");return o.className="heatmap_day",o.setAttribute("data-titlesAndLinks",JSON.stringify(t)),o.setAttribute("data-count",n),o.setAttribute("data-post",s),o.setAttribute("data-date",e),o.addEventListener("mouseenter",function(){const a=document.createElement("div");a.className="heatmap_tooltip";let i="";s&&parseInt(s,10)!==0&&(i+='<span class="heatmap_tooltip_post">共 '+s+" 篇</span>"),n&&parseInt(n,10)!==0&&(i+='<span class="heatmap_tooltip_count"> '+n+" 字；</span>"),t.length>0&&t.forEach(e=>{i+='<span class="heatmap_tooltip_title"><a href="'+e.link+'" target="_blank">'+e.title+"</a></span>"}),e&&(i+='<span class="heatmap_tooltip_date">'+e+"</span>"),a.innerHTML=i,o.appendChild(a)}),o.addEventListener("mouseleave",function(){const e=o.querySelector(".heatmap_tooltip");e&&o.removeChild(e)}),n==0?o.classList.add("heatmap_day_level_0"):n>0&&n<1e3?o.classList.add("heatmap_day_level_1"):n>=1e3&&n<2e3?o.classList.add("heatmap_day_level_2"):n>=2e3&&n<3e3?o.classList.add("heatmap_day_level_3"):o.classList.add("heatmap_day_level_4"),o}createWeek(){const e=document.createElement("div");return e.className="heatmap_week",e}getStartDate(){const e=new Date;let n;window.innerWidth<768?n=4:n=12;const t=new Date(e.getFullYear(),e.getMonth()-n+1,1,e.getHours(),e.getMinutes(),e.getSeconds());for(;t.getDay()!==1;)t.setDate(t.getDate()+1);return t}setTheme(e){e==="light"?this.setAttribute("data-theme","light"):this.setAttribute("data-theme","dark")}handleColorSchemeChange(e){e.matches?this.setTheme("dark"):this.setTheme("light")}updateTheme(){const t=this.colorSchemeMediaQuery.matches,e=document.documentElement.getAttribute("data-theme");e?this.setTheme(e):this.setTheme(t?"dark":"light")}}customElements.define("heatmap-card",HeatmapCard),document.addEventListener("DOMContentLoaded",()=>{const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e));const t=new MutationObserver(e=>{e.forEach(e=>{if(e.type==="attributes"&&e.attributeName==="data-theme"){const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e))}})});t.observe(document.documentElement,{attributes:!0})})</script><article class=post--item itemtype=http://schema.org/Article itemscope data-id=39c38f450cb8ba65d3c86deb1a9a0292><div class=content><h2 class=post--title itemprop=headline><a href=https://www.sunpeiwen.com/posts/life-mediocrity/>我们是如何变得平庸</a></h2><div class=description itemprop=about>我们为何渐渐平庸
|
|
||||||
我并不清楚别人是如何走向平庸，我只能说说自己。
|
我并不清楚别人是如何走向平庸，我只能说说自己。
|
||||||
我觉得自己就是个平庸的人。
|
我觉得自己就是个平庸的人。
|
||||||
高不成也低不就。
|
高不成也低不就。
|
||||||
|
|
|
||||||
|
|
@ -1,195 +1,7 @@
|
||||||
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
<!doctype html><html lang=zh-cn><head><meta name=generator content="Hugo 0.127.0"><title>资深网民孙先生</title>
|
||||||
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,minimum-scale=1"><meta name=description content="资深网民孙先生."><link rel=stylesheet href=https://www.sunpeiwen.com/scss/app.min.ed68bfa3be0545d4cc094dafab7335d565b8a5bf2ff562f88559ee9abcbc9139.css integrity="sha256-7Wi/o74FRdTMCU2vq3M11WW4pb8v9WL4hVnumry8kTk=" media=screen><link type=image/vnd.microsoft.icon href=https://i.sunpeiwen.com/source/img/logo.jpg rel="shortcut icon"><link href=/index.xml rel=alternate type=application/rss+xml title=资深网民孙先生><link href=/index.xml rel=feed type=application/rss+xml title=资深网民孙先生></head><body><script>window.DEFAULT_THEME="",localStorage.getItem("theme")==null&&localStorage.setItem("theme",window.DEFAULT_THEME),localStorage.getItem("theme")=="dark"&&document.querySelector("body").classList.add("dark"),localStorage.getItem("theme")=="auto"&&document.querySelector("body").classList.add("auto")</script><div class=main><header class=site--header><a href=https://www.sunpeiwen.com/ class=site--url><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar>
|
||||||
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
<span class=u-xs-show>资深网民孙先生</span></a><div class=site--header__center><div class=inner><nav><ul><li><a href=/>首页</a></li><li><a href=/memos/>说说</a></li><li><a href=/movies/>影音</a></li><li><a href=/tags/>标签</a></li><li><a href=/archives/>归档</a></li><li><a href=/friends/>链接</a></li><li><a href=/about/>关于</a></li></ul></nav><div class=search--area><form role=search method=get class=search-form action=/search><label><input type=search class=search-field placeholder="Search …" name=s autocomplete=off>
|
||||||
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script>class HeatmapCard extends HTMLElement{constructor(){super(),this.rss_url="",this.attachShadow({mode:"open"}),this.colorSchemeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.colorSchemeMediaQuery.addEventListener("change",this.handleColorSchemeChange.bind(this))}connectedCallback(){this.shadowRoot.innerHTML=`
|
</label><input type=submit class=search-submit value=Search></form></div></div></div><svg class="svgIcon" width="25" height="25" data-action="show-search"><path d="M20.067 18.933l-4.157-4.157a6 6 0 10-.884.884l4.157 4.157a.624.624.0 10.884-.884zM6.5 11c0-2.62 2.13-4.75 4.75-4.75S16 8.38 16 11s-2.13 4.75-4.75 4.75S6.5 13.62 6.5 11z"/></svg></header><main class=site--main><script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js></script><script src=https://momentjs.cn/downloads/moment-with-locales.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><div id=bber-talk></div></div></article><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector("#bber-talk");e&&(t(),moment.locale("zh-CN"));function t(){var t="https://memos.ee/api/v1/memos?filter=visibilities==['PUBLIC']&pageSize=5";fetch(t).then(e=>e.json()).then(t=>{for(var o,i,a,r,c,l,u,m,f,h="",d="",s=t.memos,n=0;n<s.length;n++)r=s[n].createTime,c=moment(r).fromNow(),l=s[n].content,o=s[n].externalLink,u=s[n].uid,i=!1,a=l.replace(/!\[.*?\]\((.*?)\)/g,function(e,t){return i=!0,'<a href="'+t+'" target="_blank">🌅</a>'}).replace(/\[(.*?)\]\((.*?)\)/g,function(e,t,n){var s=n.split("/").pop().split("?")[0].split("#")[0];return/\b(jpg|jpeg|png|gif|bmp)\b/i.test(s)?(i=!0,'<a href="'+n+'" target="_blank">🌅</a>'):'<a href="'+n+'" target="_blank">'+t+" 🔗</a>"}),o&&/\b(jpg|jpeg|png|gif|bmp)\b/i.test(o)&&(a+=' <a href="'+o+'" target="_blank">🌅</a>'),h+=`<li class="item">💬 <a href="https://memos.ee/m/${u}" target="_blank"><span class="datetime">${c}</span>：${a}</a></li>`;m=`<div class="talk-wrap"><ul class="talk-list">`,f=`</ul></div>`,d=m+h+f,e&&(e.innerHTML=d),setInterval(function(){var e,n,t=document.querySelector(".talk-list");if(t)for(e=t.querySelectorAll(".item"),n=0;n<e.length;n++)setTimeout(function(){e[0]&&t.appendChild(e[0])},1e3)},2e3)})}})</script><style>.talk-list .item{display:none}.talk-list .item:nth-child(1){display:block}</style><div class=articleList><div class=heatmap-container data-rss-url=/index.xml></div><script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".heatmap-container");e.forEach(function(e){var t=document.createElement("heatmap-card");t.rss_url=e.getAttribute("data-rss-url"),e.appendChild(t)})})</script><script src=https://blogcdn.loliko.cn/heatmap.js></script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
--ht-main: #334155;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #ebedf0;
|
|
||||||
--ht-lv-1: #9be9a8;
|
|
||||||
--ht-lv-2: #40c463;
|
|
||||||
--ht-lv-3: #30a14e;
|
|
||||||
--ht-lv-4: #216e39;
|
|
||||||
}
|
|
||||||
:host([data-theme="dark"]) {
|
|
||||||
--ht-main: #94a3b8;
|
|
||||||
--ht-tooltip: #24292f;
|
|
||||||
--ht-tooltip-bg: #fff;
|
|
||||||
--ht-lv-0: #161b22;
|
|
||||||
--ht-lv-1: #0e4429;
|
|
||||||
--ht-lv-2: #006d32;
|
|
||||||
--ht-lv-3: #26a641;
|
|
||||||
--ht-lv-4: #39d353;
|
|
||||||
}
|
|
||||||
.heatmap_container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
color: var(--ht-main);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-end;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_week {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_month {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: flex-end;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.heatmap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 84px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_footer {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level {
|
|
||||||
display: flex;
|
|
||||||
gap: 2px;
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
flex-direction: row;
|
|
||||||
width: max-content;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.heatmap_level_item {
|
|
||||||
display: block;
|
|
||||||
border-radius: 0.125rem;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
.heatmap_level_0 {
|
|
||||||
background: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_level_1 {
|
|
||||||
background: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_level_2 {
|
|
||||||
background: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_level_3 {
|
|
||||||
background: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_level_4 {
|
|
||||||
background: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
.heatmap_day {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 1px;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 12px;
|
|
||||||
left: 50%;
|
|
||||||
width: max-content;
|
|
||||||
color: var(--ht-tooltip);
|
|
||||||
background-color: var(--ht-tooltip-bg);
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 3px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
opacity: 1;
|
|
||||||
transition: 0.3s;
|
|
||||||
z-index: 1000;
|
|
||||||
text-align: right;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_count,
|
|
||||||
.heatmap_tooltip_post {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title,
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_title a {
|
|
||||||
text-decoration: none; /* 去除下划线 */
|
|
||||||
color: inherit; /* 继承父元素的字体颜色 */
|
|
||||||
}
|
|
||||||
.heatmap_tooltip_date {
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
}
|
|
||||||
.heatmap_day_level_0 {
|
|
||||||
background-color: var(--ht-lv-0);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_1 {
|
|
||||||
background-color: var(--ht-lv-1);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_2 {
|
|
||||||
background-color: var(--ht-lv-2);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_3 {
|
|
||||||
background-color: var(--ht-lv-3);
|
|
||||||
}
|
|
||||||
.heatmap_day_level_4 {
|
|
||||||
background-color: var(--ht-lv-4);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="heatmap_container">
|
|
||||||
<div class="heatmap_content">
|
|
||||||
<div class="heatmap_week">
|
|
||||||
<span>Mon</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Wed</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Fri</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>Sun</span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_main">
|
|
||||||
<div class="month heatmap_month"></div>
|
|
||||||
<div id="heatmap" class="heatmap"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_footer">
|
|
||||||
<div class="heatmap_less">Less</div>
|
|
||||||
<div class="heatmap_level">
|
|
||||||
<span class="heatmap_level_item heatmap_level_0"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_1"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_2"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_3"></span>
|
|
||||||
<span class="heatmap_level_item heatmap_level_4"></span>
|
|
||||||
</div>
|
|
||||||
<div class="heatmap_more">More</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,this.generateMonthLabels(),this.fetchData(),this.updateTheme()}fetchData(){fetch(this.rss_url).then(e=>e.text()).then(e=>(new window.DOMParser).parseFromString(e,"text/xml")).then(e=>{var n=e.querySelectorAll("item"),t={pages:[]};n.forEach(e=>{var n={title:e.querySelector("title").textContent,link:e.querySelector("link").textContent,date:new Date(e.querySelector("pubDate").textContent).toISOString().split("T")[0],word_count:(new DOMParser).parseFromString(e.querySelector("description").textContent,"text/html").body.textContent.trim().length.toString()};t.pages.push(n)}),this.createHeatmap(t)}).catch(e=>{console.log("Request failed: "+e.message)})}generateMonthLabels(){const n=this.shadowRoot.querySelector(".month"),s=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];let e;window.innerWidth<768?e=5:e=12;const o=new Date,t=(o.getMonth()-(e-1)+12)%12;for(let o=t;o<t+e;o++){const i=document.createElement("span"),a=o%12;i.textContent=s[a],n.appendChild(i)}}createHeatmap(e){const s=this.shadowRoot.getElementById("heatmap"),o=this.getStartDate(),i=new Date;let n=this.createWeek();s.appendChild(n);let t=o;for(;t<=i;){const i=`${t.getFullYear()}-${("0"+(t.getMonth()+1)).slice(-2)}-${("0"+t.getDate()).slice(-2)}`,o=e.pages.filter(e=>e.date===i);if(o.length>0){let t=o.map(e=>({title:`《${e.title}》`,link:e.link})),e=0,s=o.length;o.forEach(t=>{e+=parseInt(t.word_count,10)});const a=this.createDay(i,t,e,s);n.appendChild(a)}else{const e=this.createDay(i,[],"0","0");n.appendChild(e)}t.getDay()===0&&(n=this.createWeek(),s.appendChild(n)),t.setDate(t.getDate()+1)}}createDay(e,t,n,s){const o=document.createElement("div");return o.className="heatmap_day",o.setAttribute("data-titlesAndLinks",JSON.stringify(t)),o.setAttribute("data-count",n),o.setAttribute("data-post",s),o.setAttribute("data-date",e),o.addEventListener("mouseenter",function(){const a=document.createElement("div");a.className="heatmap_tooltip";let i="";s&&parseInt(s,10)!==0&&(i+='<span class="heatmap_tooltip_post">共 '+s+" 篇</span>"),n&&parseInt(n,10)!==0&&(i+='<span class="heatmap_tooltip_count"> '+n+" 字；</span>"),t.length>0&&t.forEach(e=>{i+='<span class="heatmap_tooltip_title"><a href="'+e.link+'" target="_blank">'+e.title+"</a></span>"}),e&&(i+='<span class="heatmap_tooltip_date">'+e+"</span>"),a.innerHTML=i,o.appendChild(a)}),o.addEventListener("mouseleave",function(){const e=o.querySelector(".heatmap_tooltip");e&&o.removeChild(e)}),n==0?o.classList.add("heatmap_day_level_0"):n>0&&n<1e3?o.classList.add("heatmap_day_level_1"):n>=1e3&&n<2e3?o.classList.add("heatmap_day_level_2"):n>=2e3&&n<3e3?o.classList.add("heatmap_day_level_3"):o.classList.add("heatmap_day_level_4"),o}createWeek(){const e=document.createElement("div");return e.className="heatmap_week",e}getStartDate(){const e=new Date;let n;window.innerWidth<768?n=4:n=12;const t=new Date(e.getFullYear(),e.getMonth()-n+1,1,e.getHours(),e.getMinutes(),e.getSeconds());for(;t.getDay()!==1;)t.setDate(t.getDate()+1);return t}setTheme(e){e==="light"?this.setAttribute("data-theme","light"):this.setAttribute("data-theme","dark")}handleColorSchemeChange(e){e.matches?this.setTheme("dark"):this.setTheme("light")}updateTheme(){const t=this.colorSchemeMediaQuery.matches,e=document.documentElement.getAttribute("data-theme");e?this.setTheme(e):this.setTheme(t?"dark":"light")}}customElements.define("heatmap-card",HeatmapCard),document.addEventListener("DOMContentLoaded",()=>{const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e));const t=new MutationObserver(e=>{e.forEach(e=>{if(e.type==="attributes"&&e.attributeName==="data-theme"){const e=document.documentElement.getAttribute("data-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.querySelectorAll("heatmap-card").forEach(t=>t.setTheme(e))}})});t.observe(document.documentElement,{attributes:!0})})</script><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
|
||||||
<a datetime='2014-10-26 19:27:10' class=humane--time href=https://www.sunpeiwen.com/memo/26/ itemprop=datePublished>October 26, 2014</a></header><div class=description itemprop=about><p>话说，阿腾的结婚照是在云南的丽江拍摄的，据说那里是个美丽的地方，我从没有去过。但我不向往，我只知道，阿腾去了那里之后变得 …</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
<a datetime='2014-10-26 19:27:10' class=humane--time href=https://www.sunpeiwen.com/memo/26/ itemprop=datePublished>October 26, 2014</a></header><div class=description itemprop=about><p>话说，阿腾的结婚照是在云南的丽江拍摄的，据说那里是个美丽的地方，我从没有去过。但我不向往，我只知道，阿腾去了那里之后变得 …</p></div></div></article><article class="post--item post--item__status" itemtype=http://schema.org/Article itemscope><div class=content><header><img src=https://i.sunpeiwen.com/source/img/logo.jpg class=avatar width=48 height=48>
|
||||||
<a datetime='2013-08-27 11:44:08' class=humane--time href=https://www.sunpeiwen.com/memo/1/ itemprop=datePublished>August 27, 2013</a></header><div class=description itemprop=about><p>额,今天不是什么特别的日子.
|
<a datetime='2013-08-27 11:44:08' class=humane--time href=https://www.sunpeiwen.com/memo/1/ itemprop=datePublished>August 27, 2013</a></header><div class=description itemprop=about><p>额,今天不是什么特别的日子.
|
||||||
就是突然心血来潮,点开自己久未访问的博客,上次更新是在半年前.
|
就是突然心血来潮,点开自己久未访问的博客,上次更新是在半年前.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue