如何将图片添加至Quarto网站的侧边栏？

步骤1：创建自定义CSS文件 #

在你的Quarto网站根目录下新建一个名为styles.css的文件，添加以下代码：

/* 左侧侧边栏图片定位 */
#first-column img {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 150px; /* 根据需求调整宽度 */
  height: auto;
}

/* 右侧侧边栏图片定位 */
#second-column img {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 150px; /* 根据需求调整宽度 */
  height: auto;
}

/* 响应式适配：小屏幕下隐藏侧边栏图片 */
@media (max-width: 1200px) {
  #first-column img, #second-column img {
    display: none;
  }
}

步骤2：在主页.qmd中引入CSS文件 #

修改主页的YAML头部，添加css字段引入样式文件：

---
title: ""
about: 
  template: solana
  image: Headshot.jpg
css: styles.css
---

步骤3：简化主页内容的图片容器 #

因为CSS已直接定位图片，可简化.qmd中的图片代码：

# Hello

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

<div id="first-column">
![](images/image2.JPG)
</div>

<div id="second-column">
![](images/image1.JPG)
</div>

关键说明 #

• position: fixed让图片固定在视窗侧边，滚动页面时不会移位
• top: 50%+transform: translateY(-50%)确保图片垂直居中
• 可调整max-width、left/right的数值适配你的侧边栏宽度
• 响应式规则会在小屏幕下隐藏图片，避免和主内容重叠

内容的提问来源于stack exchange，提问作者flâneur