Quarto博客索引列表页水平留白优化求助

核心调整思路 #

通过自定义CSS覆盖Quarto主题默认的布局间距，针对列表项容器、缩略图区域、内容区域的内边距/外边距进行修改，减少不必要的留白，最大化利用横向空间。

具体CSS修改方案 #

根据你的预览页面布局，添加以下自定义CSS规则：

/* 移除博客列表项整体容器的左右内边距 */
.blog-list-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 缩小缩略图区域的右侧外边距 */
.blog-post-preview .thumbnail {
  margin-right: 1rem !important; /* 可根据视觉需求调整数值 */
}

/* 移除内容描述区域的左侧内边距，并让内容占据剩余空间 */
.blog-post-preview .post-content {
  padding-left: 0 !important;
  flex-grow: 1;
}

/* 移除分类栏的左侧外边距 */
.blog-post-preview .categories {
  margin-left: 0 !important;
}

配置文件配合说明 #

确保_quarto.yml中正确引入自定义CSS文件，示例配置：

format:
  html:
    theme: [default, custom.css] # 替换为你的自定义CSS文件名

额外响应式优化建议 #

为避免移动端布局拥挤，可添加屏幕尺寸适配规则：

@media (max-width: 768px) {
  .blog-post-preview .thumbnail {
    margin-right: 0.5rem !important;
  }
}

内容的提问来源于stack exchange，提问作者Chip Brock