1. 说明

修改前：

修改后：

可以使每个模块都有一些实体卡片感。

2. 实现思路

给目标模块添加边沿、阴影、圆角

还可以顺便调一下侧边栏和内容的占比、模块间距等等

3. 具体实现

在主题自定义的 额外CSS 内添加以下代码（不过最好先备份整个网站）

/* 文章列表卡片样式（包括博客、存档和搜索结果页面） */
.blog .hentry, .archive .hentry, .search .hentry {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.post-image {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 300px;
    overflow: hidden;
	   border-radius: 5px 5px 5px 5px;
}

.entry-title {
    margin: 10px 0;
}

.entry-summary {
    margin: 10px 0;
}

/* 侧边栏小工具卡片样式 */
#right-sidebar .widget, #left-sidebar .widget {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}



/* 排除页脚小工具的卡片样式 */
.site-footer .widget {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
}

.site-footer .widget .widget-title {
    margin: 0 0 15px 0;
    padding-bottom: 0;
    border-bottom: none;
}

.site-footer .widget ul, .site-footer .widget p {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 单篇博文阅读区域卡片样式 */
.single .hentry {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.entry-content {
    padding: 10px 0;
}

.single .post-image img {
    width: 100%;
    height: auto;
    border-radius: 5px 5px 0 0;
}


/* 调整侧边栏宽度 */
@media (min-width: 769px) {
    .site-content {
        display: flex;
        flex-wrap: wrap;
    }

    #primary {
        width: 75%;
    }

    #right-sidebar, #left-sidebar {
        width: 25%;
    }
}