koobai | 空白生活

<div id="heatmap" style="max-width: 700px;height: 110px;margin-bottom: 40px;"></div>
<script src="https://img.koobai.com/echarts.min.js"></script>
<script type="text/javascript">
  var chartDom = document.getElementById('heatmap');
  var myChart = echarts.init(chartDom);
  window.onresize = function() {
      myChart.resize();
  };
  var option;
  var dataMap = new Map();
  {{ range ((where .Site.RegularPages "Type" "posts")) }}
    var key = {{ .Date.Format "2006-01-02" }};
    var value = dataMap.get(key);
    var link = {{ .RelPermalink}};
    var title = {{ .Title }};
    
    // multiple posts in same day
    if (value == null) {
      dataMap.set(key, [{link, title}]);
    } else {
      value.push({link, title});
    }
  {{- end -}}

  var data = [];
  for (const [key, value] of dataMap.entries()) {
    data.push([key, value.length]);
  }

  var startDate = new Date();
  var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
  var startDate = +new Date(year_Mill);
  var endDate = +new Date();

  startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
  endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
  
  // 检测浏览器主题模式并选择颜色方案
  var prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

  // 定义明亮模式下的颜色方案
  var lightTheme = {
      backgroundColor: '#FFFFFF',
      fangkuaicolor:'#F4F4F4',
      gaoliangcolor: ['#ffd0b6'],
      riqiColor: '#999',
      textbrcolor: '#FFF',
      xiankuangcolor:'rgba(0, 0, 0, 0.0)',
  };

  // 定义暗黑模式下的颜色方案
  var darkTheme = {
      backgroundColor: '#1A1718',
      fangkuaicolor:'#282325',
      gaoliangcolor: ['#b25f2f'],
      riqiColor: '#666',
      textbrcolor: '#332D2F',
      xiankuangcolor:'rgba(0, 0, 0, 0.0)',
  };

  // 根据浏览器主题模式选择当前主题
  var currentTheme = prefersDarkMode ? darkTheme : lightTheme;

  option = {
    tooltip: {
    hideDelay: 1000,
    enterable: true,
    backgroundColor: currentTheme.textbrcolor,
    borderWidth: 0, // 边框宽度为0
    formatter: function (p) {
        const date = p.data[0];
        const posts = dataMap.get(date);
        var content = `<span style="font-size: 0.75rem;font-family: var(--font-family-code);">${date}</span>`;
        for (const [i, post] of posts.entries()) {
            content += "<br>";          
            var link = post.link;
            var title = post.title;
            content += `<a href="${link}" target="_blank">${title}</a>` + '<br>';
        }
        return content;
        }
    },
    visualMap: {
        show: false,
        inRange: {   
          color: currentTheme.gaoliangcolor
        },
    },
    calendar: {
        left: 20,
        top:20,
        bottom:0,
        right: 0,
        cellSize: ['auto', 13],
        range: [startDate, endDate],
        itemStyle: {
            color: currentTheme.fangkuaicolor,
            borderWidth: 3.5,
            borderColor: currentTheme.backgroundColor, 
        },
        yearLabel: { show: false },
        monthLabel: { 
        nameMap: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
        textStyle: {
            color: currentTheme.riqiColor,
        }
    },
        dayLabel: {
            firstDay: 1,
            nameMap: ['日', '一', '', '三', '', '五', ''],
            textStyle: {
                color: currentTheme.riqiColor
            }
        },
        splitLine: {
            lineStyle: {
                color: currentTheme.xiankuangcolor,
            }
        }
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: data,
    }
  };
  
  myChart.setOption(option);
  myChart.on('click', function(params) {
    if (params.componentType === 'series') {
      // open the first post on the day
      const post = dataMap.get(params.data[0])[0];
      const link = window.location.origin + post.link;
      window.open(link, '_blank').focus();
    }
});
</script>

<div class="single-nrong">
<div class="single-zw">主内容</div>
<div>
    <div class="paragraph-dh">文章段落目录导航</div>
</div>
</div>
<style>
.single-nrong {display: flex;}
.single-zw {width: 100%;}
.paragraph-dh {position: fixed;}
</style>

  {{ $toc := .TableOfContents }}
  <!--判断<li>标签中有没有内容，如果有内容就显示，无内容就隐藏-->
  {{ if findRE "<li>" $toc 1 }} 
    <div class="paragraph-dh">
      <div class="sidebar-biaot">文章段落导航</div>
      {{ $toc }}
    </div>
  {{ end }}

document.addEventListener("DOMContentLoaded", () => {
    const postTOC = document.querySelector('.paragraph-dh');

    const headingObserver = new IntersectionObserver(headings => {
        headings.forEach(({ target, isIntersecting }) => {
            const link = postTOC.querySelector(`a[href="#${target.id}"]`);
            if (isIntersecting && link) {
                postTOC.querySelectorAll('a').forEach(a => a.classList.remove('active'));
                link.classList.add('active');
            }
        });
    }, { rootMargin: '0px 0px -75%' });

    document.querySelectorAll('.content h2[id], .content h3[id]').forEach(heading => headingObserver.observe(heading));

    window.addEventListener('scroll', () => postTOC.style.opacity = (window.pageYOffset > 400) ? 1 : 0);

    postTOC.addEventListener('click', (e) => {
        e.preventDefault();
        const targetElement = document.getElementById(e.target.getAttribute('href').substring(1));
        if (targetElement) targetElement.scrollIntoView({ behavior: 'smooth' });
    });
});

<div class="single-nrong">
<div class="single-zw">
   文章内容
</div>
<div>
  {{ $toc := .TableOfContents }}
  {{ if findRE "<li>" $toc 1 }}
    <div class="paragraph-dh">
      <div class="sidebar-biaot">文章段落导航</div>
      {{ $toc }}
    </div>
  {{ end }}
</div>
</div>
<script src="/js/single.js"></script>

.single-nrong{
  display: flex;
}
.single-zw{
  width: 100%;
}
.paragraph-dh {
   display: none;
  @include breakpoint('large') {
    display: block;
    position: fixed;
    opacity: 0;
    top: 70px;
    margin-left: 40px;
    transition: opacity 0.5s ease; 
    border-left: 4px solid #f0f0f0;
    padding: 0 15px;
    max-width: 300px;
  }
}
.paragraph-dh a{
  line-height: 1.4;
  color: #666;
}
.paragraph-dh ul{
  gap: 15px;
  display: grid;
}
.paragraph-dh ul ul {
  padding-inline-start: 1rem;
  margin-top: 10px;
}
.paragraph-dh a.active {
  color: var(--text-highlight-color);
  transition: all .25s ease-in-out;
}