美好的明天

效果预览

文章归档数据汇总效果预览

提示

若需实现本站文章存档上图样式，此教程是基于以下卡片页面代码下再增加实现；

其他主题页面理论也适用，需自行测试；

WordPress CoreNext 增加 文章归档 页面 v2.1

v2.1 25-02-01 更新使用子主题来修改实现，避免父主题升级新版本导致此修改失效。 案例演示：美好的明 […]

第一步

修改page-archives.php文件

找到CoreNext/template/module/page-archives.php文件；

查找搜索<div class="content-warp">

将以下代码片段，插入保存到上述片段后保存并上传；

第二步

修改main.css文件

找到CoreNext/static/css文件夹，打开此文件夹下main.css文件，在文件最下方粘贴并保存以下代码；

.iarchives-statistics {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 0 0 0;
    margin: 20px 15px
}

.iarchives-info {
    color: #fff;
    position: absolute;
    margin: -30px 0 0 20px;
    background: var(--theme-color);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 18px
}

.iarchives-title {
    color: #666!important;
    font-size: 16px!important;
    margin-bottom: 0!important;
    padding-bottom: 10px
}

.iarchives-counts {
    font-size: 26px!important;
    color: #ababab!important;
    word-wrap: normal!important;
    padding: 15px 0
}

.iarchives-statistics ul {
    list-style: none;
    text-align: center
}

.iarchives-statistics ul li {
    display: inline-block;
    margin-left: 0;
    width: 30%
}

.iarchives-statistics ul li:hover {
    background: #f8f8f8;
    border-radius: 4px
}

.iarchives-statistics ul li p {
    display: block!important
}

.iarchive-count {
    font-size: 12px;
    color: #777
}

.iarchive-comment-count {
    padding-left: 4px
}

第三步

非必须，点开进页面后数据有滚动刷新的效果；

创建archives.min.js文件

先在本地创建archives.min.js文件，并上传到服务器自定义位置，记住此位置稍后需要引用；

引用archives.min.js文件

回到博客后台，找到主题设置 → 插入代码 → 页头代码，插入以下代码，修改成自己的文件路径；

<script type="text/javascript" src="https://www.demo.com/archives.min.js"></script>

刷新页面即可查看效果；