Ksable' 小屋

Home 留言板
Friends About

# 便笺: 2024-07-22 归档页面修改

发表于 2024-07-21 17:00
更新于 2024-07-27 22:00
832 字
5 min read

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 Articles

4 Categories

7 Tags
Home
留言板
Categories
Tags
Archives
Friends
About
一些实用的网站
astro-koharu 使用指南
Music
个人 astro-koharu 主题修改记录便笺: [微信]不用发消息，如何知道自己有没有被拉黑?便笺: git 与 patch 便笺: Readest 私有化部署笔记便笺: VBS 消息轰炸便笺: Javascript 笔记 a ? b : c 便笺: 期末考试，一些人的成绩便笺: 2024-07-22 归档页面修改便笺: Markdown 备忘单便笺: hexo 插入图片 hello world
This post is not yet available in English. Showing the original.
/themes/volantis/layout/archive.ejs

## /themes/volantis/layout/archive.ejs

`/themes/volantis/layout/archive.ejs`

    <%- partial('_pre') %>
    <div id="l_main" class='<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
      <% if (page.year || page.month) { %>
        <%- partial('_partial/archive') %>
      <% } else { %>
        <article id="arc" class="post article white-box reveal <%- theme.custom_css.body.effect.join(' ') %>">
          <%# 文章日历 %>
          <div id="calendar">
            <% if (theme.postCalendar) { %>
            <%- partial('_widget/post-calendar') %>
            <% } %>
          </div>
          <%# 文章日历 End %>
          <% var year = -1, month = -1; %>
          <% site.posts.sort('date', -1).each(function(post) { %>
            <% post.year = date(post.date, 'YYYY'); %>
            <% post.month = date(post.date, 'MM'); %>
            <% if (post.archive == undefined || post.archive == true) { %>
              <% if (post.year && post.year !== year) { %>
                <% year = post.year; %>
                <h2><%= year %></h2>
                <% month = -1; %> <!-- Reset month for new year -->
              <% } %>
              <% if (post.month && post.month !== month) { %>
                <% month = post.month; %>
                <h3><%= date(post.date, 'MMMM') %></h3>
              <% } %>
              <div class='timenode'>
                <a class="meta" href="<%= url_for(post.link || post.path) %>">
                  <time><%= date(post.date, 'MM-DD') %></time>
                  <% if(post.title || post.seo_title){ %>
                    <%- post.title || post.seo_title %>
                  <% } else if (post.date) { %>
                    <%= date(post.date, config.date_format) %>
                  <% } %>
                  <% if(theme.plugins.aplayer && theme.plugins.aplayer.enable && post.music && post.music.enable != false){ %>
                    &nbsp;<i class="fa-solid fa-headphones-alt music" aria-hidden="true"></i>
                  <% } %>
                  <% if (post.icon) { %>
                    &nbsp;<i class="<%- post.icon %>" aria-hidden="true"></i>
                  <% } %>
                  <% getList(post.icons).forEach(function(icon){ %>
                    &nbsp;<i class="<%- icon %>" aria-hidden="true"></i>
                  <% }) %>
                </a>
              </div>
            <% } %>
          <% }); %>
        </article>
      <% } %>
    </div>
    <%- partial('_partial/side') %>

## themes\volantis\layout_widget\post-calendar.ejs

`themes\volantis\layout\_widget\post-calendar.ejs`

    <style>
        #post-calendar {
            width: 100%;
            height: 225px;
            margin-top: 20px;
            border-radius: 12px;
            /* background-color: rgba(255, 255, 255, 0.26); */
            background-color: var(--color-block);
        }
        #aaaaaaaaa {
            width: 100%;
            height: 225px;
            margin-top: 20px;
            border-radius: 12px;
            background-color: var(--color-block);
            padding: 60px 0;
            /* border: 3px solid green; */
            text-align: center;
            /* font-size:30px; */
        }

        #buttonsty {
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
        border-radius: 8px;
        background-color: #00bfffdc;
        color: black;
        border: 2px solid #008CBA;
        }

        #buttonsty:hover {
        background-color: #00bfff;
        color: white;
        }

    </style>
    <script src="https://assets.buasis.eu.org/js/echarts.min.js"></script>
    <script src="https://assets.buasis.eu.org/js/mobile-detect.js"></script>

    <div id="chart">
        <div id="aaaaaaaaa"><div id="aaa"><center><p>正在加载文章日历...</p></center></div></div>
    </div>

    <script type="text/javascript">

            // 获取 CSS 变量的值
        function getCSSVariableValue(variableName) {
            return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
            }

            // 使用示例
        var colorP = getCSSVariableValue('--color-p');

        function loadchart() {
            let myChart = echarts.init(document.getElementById('post-calendar'));

            <%
            var startDate = moment().subtract(1, 'years').startOf('day');
            var endDate = moment().startOf('day');
            var rangeArr = '["' + startDate.format('YYYY-MM-DD') + '", "' + endDate.format('YYYY-MM-DD') + '"]';

            var dateMap = new Map();
            site.posts.forEach(function (post) {
                var date = moment(post.date).format('YYYY-MM-DD');
                var count = dateMap.get(date);
                dateMap.set(date, count == null || count == undefined ? 1 : count + 1);
            });

            var datePosts = [];
            for (var time = startDate; time.isSameOrBefore(endDate); time.add(1, 'days')) {
                var date = time.format('YYYY-MM-DD');
                datePosts.push([date, dateMap.has(date) ? dateMap.get(date) : 0]);
            }
            %>

            let option = {
                title: {
                    top: 0,
                    text: '文章日历',
                    left: 'center',
                    textStyle: {
                        color: colorP
                    }
                },
                tooltip: {
                    padding: 10,
                    backgroundColor: '#555',
                    borderColor: '#777',
                    borderWidth: 1,
                    formatter: function (obj) {
                        var value = obj.value;
                        return '<div style="font-size: 14px;">' + value[0] + '：' + value[1] + '</div>';
                    }
                },
                visualMap: {
                    show: true,
                    showLabel: true,
                    categories: [0, 1, 2, 3, 4],
                    calculable: true,
                    inRange: {
                        symbol: 'rect',
                        color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
                    },
                    itemWidth: 12,
                    itemHeight: 12,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: 0,
                    textStyle: {
                        color: colorP
                    }
                },
                calendar: [{
                    right: 30,
                    left: 30,
                    range: <%- rangeArr %>,
                    cellSize: [13, 13],
                    splitLine: {
                        show: false
                    },
                    itemStyle: {
                        width: '1.88679%',
                        height: '15px',
                        color: '#EEEEEE',
                        borderColor: '#FFF',
                        borderWidth: 2
                    },
                    yearLabel: {
                        show: false
                    },
                    monthLabel: {
                        nameMap: 'cn',
                        fontWeight: 'lighter',
                        fontSize: 12,
                        textStyle: {
                            color: colorP
                        }
                    },
                    dayLabel: {
                        show: true,
                        formatter: '{start}  1st',
                        fontWeight: 'lighter',
                        nameMap: ['日', ' ', ' ', '三', ' ', ' ', '六'],
                        fontSize: 12,
                        textStyle: {
                            color: colorP
                        }
                    }
                }],
                series: [{
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    calendarIndex: 0,
                    data: <%- JSON.stringify(datePosts) %>
                }]
            };

            myChart.setOption(option);
        }

        function loadcharthtml() {
            document.getElementById("chart").innerHTML = '<div class="container archive-calendar"><div class="card"><div id="post-calendar" class="card-content"></div></div></div>';
        }

        function chart() {
            loadcharthtml();
            loadchart();
        }

        // window.onload = choosechart;

        // document.addEventListener("pjax:complete", function() {
        //     choosechart();
        // });
    </script>
    <script type="text/javascript">
    function choosechart() {
        var md = new MobileDetect(window.navigator.userAgent);
        console.log("choosechart")
        if (!md.phone()) {
            chart();
        }
        else {
            document.getElementById("aaa").innerHTML = '<center><p>移动设备默认不加载文章日历</p></center><br /><buttonsty id="buttonsty" onclick="chart()">加载文章日历</button>';
        }
    }
    </script>

    <script>
        // 创建一个脚本标签来加载echarts.min.js
        var script1 = document.createElement('script');
        script1.src = 'https://assets.buasis.eu.org/js/echarts.min.js';
        script1.onload = function() {
            // 当第一个脚本加载完后，再加载第二个脚本
            var script2 = document.createElement('script');
            script2.src = 'https://assets.buasis.eu.org/js/mobile-detect.js';
            script2.onload = function() {
                // 当第二个脚本加载完后，运行opop()函数
                choosechart();
            };
            document.head.appendChild(script2);
        };
        document.head.appendChild(script1);
    </script>

## _config.volantis.yml

`_config.volantis.yml`

    ~~~
    postCalendar: true
    ~~~

If you enjoyed this, leave a comment~

English
中文 English 日本語

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 Articles

4 Categories

7 Tags
Home
留言板
Categories
Tags
Archives
Friends
About
一些实用的网站
astro-koharu 使用指南
Music
个人 astro-koharu 主题修改记录便笺: [微信]不用发消息，如何知道自己有没有被拉黑?便笺: git 与 patch 便笺: Readest 私有化部署笔记便笺: VBS 消息轰炸便笺: Javascript 笔记 a ? b : c 便笺: 期末考试，一些人的成绩便笺: 2024-07-22 归档页面修改便笺: Markdown 备忘单便笺: hexo 插入图片 hello world