hexo-matery调整归档页面


之前得到了大佬分享的修改的归档页面源码打算贴出来需要的自取,建议先备份archive.ejs文件再修改有备无患,养成备份好习惯。

<style>
    /*归档页自定义样式*/
    .archive-container{
      padding: 20px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      background-color: #fff;
    }
    .archive:not(:last-child) {
      margin-bottom: 3rem;
    }

    .archive .articles {
      border-left: 1px solid #dbdbdb;
    }

    .archive .article {
      border-top: none;
      margin-left: -1px;
      padding: 0.4rem 1.5rem;
      border-left: 3px solid transparent;
    }

    .archive .article:hover {
      transition: all .6s;
      -webkit-transition: all .6s;
      -o-transition: all .6s;
      -moz-transition: all .6s;
      border-left-color: #0f9d58 ;
    }

    .archive .article time {
      font-size: 1rem;
      color: deeppink;
      /* color: darkgray; */
    }
    article-sort-item_title{
      display: -webkit-box;
      overflow: hidden;
      height: 60px;
      color: #4c4948;
      font-size: .75rem;
      -webkit-transition: all .3s;
      -moz-transition: all .3s;
      -o-transition: all .3s;
      -ms-transition: all .3s;
      transition: all .3s;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .archive .article h6 {
      margin: 0;
    }

    .archive .article h6 a {
      line-height: 2.5;
      color: inherit;
      border-bottom: 1px dashed transparent;
    }

    .archive .article h6 a:hover {
      border-bottom-color: #0f9d58;
      padding-left: 16px;
      transition: all .5s;
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      -moz-transition: all .5s;
    }

    .archive .articles .imgcontent{
      display: inline-block;
      width: 80px;
      height: 80px;
      overflow: hidden;
    }

    .archive .articles .imgcontent .postimg{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .archive .articles .imgcontent .postimg:hover{
      transform: scale(1.3);
      transition: all .6s;
      -webkit-transition: all .6s;
      -o-transition: all .6s;
      -moz-transition: all .6s;
    }
    .article-sort-post{
      display: inline-block;
      position: relative;
      top: -16px;
      left: 10px;
    }

    .hbe-input-container{
      width: 80%;
      max-width: 800px;
      position: relative;
      margin: 100px auto;
    }

    .hbe-input-container  .btn-decrypt{
      display: inline-block;
      vertical-align: top;
      width: 120px;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      color: #ffffff;
      background-color: #3f90ff;
      text-align: center;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
    }
    .about-cover {
      height: 50vh;
    }
    .desc-content{
      padding: 0 50px;
    }
    @media only screen and (max-width: 601px) {
      .desc-content {
        padding: 0 15px;
      }
    }

    .v .vlist .vcard {
      padding-top: 2.5em !important;
    }

 </style>

<%- partial('_partial/bg-cover') %>

<main class="content">

    <% if (theme.postCalendar) { %>
        <%- partial('_widget/post-calendar') %>
    <% } %>

    <div class="container archive-container ">
        <div class="card">
            <div class="card-content">
                <!-- 主题 挂件 (中) -->
                <div class="caishendengsd">        
                  <div class="guguxiansd wenzhangxian">
                    <img class="caishenpic gugus" src="/medias/christmas-img/2.png">
                  </div>              
                </div>
                <div class="caishendeng">        
                  <div class="guguxian wenzhangxian">
                    <img class="caishenpic gugus" src="/medias/spring-img/2.png">
                  </div>              
                </div>
                <div class="tag-chips">
                    <span onclick="showTable()" id="sp-table" class="chip center-align waves-effect waves-light default"
                          data-tagname="时间列表"
                          style="background: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); color:#fff">时间列表
                    </span>
                    <span onclick="showTime()" id="sp-timeline"
                          class="chip center-align waves-effect waves-light default"
                          data-tagname="时间轴" style="background-color: #F9EBEA;">时间轴
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div id="cd-table" class="container archive-container">
        <div class="card">
            <div class="card-content">
                <% const groups = {};
                const years = [];
                page.posts.each(post => {
                    const year = post.date.year();
                    if (typeof (groups[year]) === 'undefined') {
                        groups[year] = [];
                        years.push(year);
                    }
                    groups[year].push(post);
                });
                years.sort((a, b) => b - a); %>
                <% for (let year of years) { %>
                    <div class="archive">
                        <h4 class="archive-year" id="<%= year %>"><%= year %>年</h4>
                        <div class="articles">
                            <% for (let post of groups[year].sort((a, b) => b.date.diff(a.date))) { %>
                                <div class="article content>">
                                <!--  <a href="<%= url_for(post.link ? post.link : post.path) %>">
                                    <div class="imgcontent"><img class="postimg" src="<%= post.img %>" alt="<%= post.title %>"></div>  
                                  </a> -->
                                  <div class="article-sort-post">
                                    <div class="article-sort-item_title">
                                      <a href="<%= url_for(post.link ? post.link : post.path) %>">
                                        <h5>
                                          <i class="fa fa-clock" style="font-size: 1rem;cursor: pointer;"></i>
                                          <time class="is-text-small" datetime="<%= date_xml(post.date) %>" itemprop="datePublished" >
                                            <%= date(post.date, 'YYYY-MM-D') %> 
                                          </time>
                                        </h5>
                                        <h6 class="is-6"><a href="<%= url_for(post.link ? post.link : post.path) %>"><%= post.title %></a></h6>
                                      </a>
                                    </div>
                                  </div>
                                </div>
                            <% } %>
                        </div>
                    </div>
                <% } %>
            </div>
        </div>
    </div>
    <%
    /**
     * hashCode function.
     *
     * @param str str
     * @returns {number}
     */
    var hashCode = function (str) {
        if (!str && str.length === 0) {
            return 0;
        }

        var hash = 0;
        for (var i = 0, len = str.length; i < len; i++) {
            hash = ((hash << 5) - hash) + str.charCodeAt(i);
            hash |= 0;
        }
        return hash;
    };

    // init year and month variable.
    var year = '1970';
    var month = '1970-01';

    // post feature image.
    var featureimg = '/medias/featureimages/0.jpg';
    var featureImages = theme.featureImages;
    %>

    <div id="cd-timeline" class="container" style="display: none">
        <% page.posts.each(function(post) { %>
            <div class="cd-timeline-block">

                <%# year. %>
                <% if (date(post.date, 'YYYY') != year) { %>
                    <% year = date(post.date, 'YYYY'); %>
                    <div class="cd-timeline-img year" data-aos="zoom-in-up">
                        <a href="<%- url_for('/archives/' + year) %>"><%- year %></a>
                    </div>
                <% } %>

                <%# month. %>
                <% if (date(post.date, 'YYYY-MM') != month) { %>
                    <%
                        month = date(post.date, 'YYYY-MM');
                        var m = date(post.date, 'MM')
                    %>
                    <div class="cd-timeline-img month" data-aos="zoom-in-up">
                        <a href="<%- url_for('/archives/' + year + '/' + m) %>"><%- m %></a>
                    </div>
                <% } %>

                <%# every day posts. %>
                <div class="cd-timeline-img day" data-aos="zoom-in-up">
                    <span><%- date(post.date, 'YYYY-MM-DD').substring(8, 10) %></span>
                </div>
                <article class="cd-timeline-content" data-aos="fade-up">
                    <div class="article col s12 m6">
                        <div class="card">
                            <a href="<%- url_for(post.path) %>">
                                <div class="card-image">
                                    <% if (post.img) { %>
                                        <img src="<%= post.img %>" class="responsive-img" alt="<%- post.title %>">
                                    <% } else { %>
                                        <%
                                            var len = featureImages.length;
                                            var num = Math.abs(hashCode(post.title) % len);
                                            featureimg = featureImages[num];
                                        %>
                                        <img src="<%= featureimg %>" class="responsive-img" alt="<%- post.title %>">
                                    <% } %>
                                    <span class="card-title"><%- post.title %></span>
                                </div>
                            </a>
                            <div class="card-content article-content">
                                <div class="summary block-with-text">
                                    <% if (post.summary && post.summary.length > 0) { %>
                                        <%- post.summary %>
                                    <% } else { %>
                                        <%- strip_html(post.content).substring(0, 120) %>
                                    <% } %>
                                </div>
                                <div class="publish-info">
                                <span class="publish-date">
                                    <i class="far fa-clock fa-fw icon-date"></i><%= date(post.date, config.date_format) %>
                                </span>
                                    <span class="publish-author">
                                        <% if (post.categories && post.categories.length > 0) { %>
                                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                                            <% post.categories.forEach(category => { %>
                                                <a href="<%- url_for(category.path) %>" class="post-category"
                                                   target="_blank">
                                    <%- category.name %>
                                    </a>
                                            <% }); %>
                                        <% } else if (post.author && post.author.length > 0) { %>
                                            <i class="fas fa-user fa-fw"></i>
                                            <%- post.author %>
                                        <% } else { %>
                                            <i class="fas fa-user fa-fw"></i>
                                            <%- config.author %>
                                        <% } %>
                                    </span>
                                </div>
                            </div>

                            <% if (post.tags && post.tags.length) { %>
                                <div class="card-action article-tags">
                                    <% post.tags.forEach(tag => { %>
                                        <a href="<%- url_for(tag.path) %>"><span
                                                    class="chip bg-color"><%= tag.name %></span></a>
                                    <% }); %>
                                </div>
                            <% } %>
                        </div>
                    </div>
                </article>
            </div>
        <% }); %>
    </div>

</main>
<% if (page.total > 1) { %>
    <%- partial('_partial/paging') %>
<% } %>

<script>
    function showTime() {
        $("#cd-timeline").show();
        $("#cd-table").hide();
        $("#sp-timeline").css('background', 'linear-gradient(to right, #4cbf30 0%, #0f9d58 100%)');
        $("#sp-timeline").css('color', '#fff');
        $("#sp-table").css('background', '#F9EBEA')
        $("#sp-table").css('color', 'rgba(0,0,0,0.6)');
    }

    function showTable() {
        $("#cd-timeline").hide();
        $("#cd-table").show();
        $("#sp-table").css('background', 'linear-gradient(to right, #4cbf30 0%, #0f9d58 100%)');
        $("#sp-table").css('color', '#fff');
        $("#sp-timeline").css('background', '#F9EBEA')
        $("#sp-timeline").css('color', 'rgba(0,0,0,0.6)');
    }

</script>

文章作者: 不染轻裳
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 不染轻裳 !
评论
 上一篇

阅读全文

三人一狗牛山红色之旅
三人一狗牛山红色之旅 三人一狗牛山红色之旅
为什么要写这篇文章呢?目的是为了记录下这次略显惨痛的爬山之旅,今天距离那天已经过去两天了,我的屁股和小腿还酸疼,一次性运动量有点大。也为同我们一起上山的狗而写。对于它来说,我们只是它生命中的过客,而它却陪我们上山下山最后目送我们远远离开才
2021-03-04
下一篇 

阅读全文

我的centos使用手册
我的centos使用手册 我的centos使用手册
本文记录我的centos使用之路,逐渐驯服centos的过程,最开始用其实很迷,后来越来越了解。本文仅为我可以快速查阅相关命令用,对于其他读者价值较小 开机启动 开机启动保障网页和mc服务器的正常运行 网站 systemctl star
2021-02-04
  目录