在Quarto网站首页添加背景图片。

huangapple
go评论103阅读模式
英文:

Add background image to quarto website home page

问题

要在 quarto 网站的首页上添加背景图像，但不在报告页面上添加背景图像，你可以尝试以下解决方案：

  1. 首先，更新 styles.css 文件如下，以将背景图像应用于 .splash 类：
  1. .splash {
  2.   background-image: url("https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg");
  3.   background-size: cover;
  4.   background-repeat: no-repeat;
  5. }
  1. 在 _quarto.yml 中添加 include-before-body 和 include-after 部分，以在首页上添加一个包含背景图像的 div，并在报告页面上不添加：
  1. format:
  2.   html:
  3.     theme: "styles.css"
  4.     include-before-body: before.html
  5.     include-after: after.html
  1. 创建 before.html 文件，该文件包含以下内容：
  1. <div class="splash">
  1. 创建 after.html 文件，该文件包含以下内容：
  1. </div>

这将在网站首页上添加背景图像，但不会在报告页面上添加。运行 quarto preview 以查看效果。

请注意，这只会在网站首页上应用背景图像，而不会在其他页面上应用。

英文:

In a quarto website, how do I add a background image filling the entire page but only to the home page?

I have a working solution which adds the background correctly, but does it across the entire website. In the example below, I do not want the report page to have the background image. It should have a plain white background, navbar and footer.

Reproducible example. Creating the following files:

_quarto.yml

  1. project:
  2.   type: website
  4. website:
  5.   title: &quot;Sunset Sea&quot;
  6.   navbar:
  7.     background: transparent
  8.     left:
  9.       - text: Home
  10.         href: &quot;index.html&quot;
  11.       - text: Report
  12.         href: &quot;report.html&quot;
  13.   page-footer:
  14.     border: false
  15.     background: transparent
  16.     foreground: DimGray
  17.     left: Left content
  18.     right: Right content
  20. format:
  21.   html:
  22.     theme: &quot;styles.css&quot;

index.qmd

  1. ---
  2. format: html
  3. ---
  5. # Sunset Sea
  7. Welcome to Sunset Sea.

report.qmd

  1. ---
  2. title: &quot;Report&quot;
  3. format: html
  4. ---
  6. ## Heading 1
  8. This is a report

styles.css

  1. /*-- scss:defaults --*/
  3. body {
  4.   background-image: url(&quot;https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg&quot;);
  5.   background-size: cover;
  6.   background-repeat: no-repeat;
  7.   /*background-position: center center;*/
  8.   /*background-attachment: fixed;*/
  9. }

Run quarto preview

在Quarto网站首页添加背景图片。

Possibly a solution is to add a div just before or after the body div with a specific class only on the home page and target that class with css. I am not quite sure how to go about doing that.

I have tried include-before-body but that does not cover navbar and footer anyway.

Updated part of _quarto.yml

  1. format:
  2.   html:
  3.     theme: &quot;styles.css&quot;
  4.     include-before-body: before.html
  5.     include-after: after.html

before.html

  1. &lt;div class=&quot;splash&quot;&gt;

after.html

  1. &lt;/div&gt;

Update styles.css*

  1. .splash {
  2.   background-image: url(&quot;https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg&quot;);
  3.   background-size: cover;
  4.   background-repeat: no-repeat;
  5. }

在Quarto网站首页添加背景图片。

Quarto 1.2.1

答案1

得分: 2

index.qmd 和 Report.qmd 将生成两个不同的网页。因此，如果您想为 index.html 添加特定样式，请直接在 index.qmd 中定义 CSS 样式（在 style 标签内），而不是在 style.css 中。

index.qmd

  1. ---
  2. format: html
  3. ---
  5. <style>
  6.   body {
  7.     background-image: url("https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg");
  8.     background-size: cover;
  9.     background-repeat: no-repeat;
  10.   }
  11. </style>
  13. # 日落海景
  15. 欢迎来到日落海景。

style.css

（请不要在 style.css 中指定背景图像）

  1. /*-- scss:defaults --*/

在Quarto网站首页添加背景图片。

在Quarto网站首页添加背景图片。

  2. <details>
  3. <summary>英文:</summary>
  5. **index.qmd** and **Report.qmd** will generate two different webpages. So if you want to add any style specific to **index.html** define the css styles (within `style` tag) in the **index.qmd** directly, instead of **style.css**.
  7. **index.qmd**
  9. ~~~
  10. ---
  11. format: html
  12. ---
  14. &lt;style&gt;
  15.   body {
  16.   background-image: url(&quot;https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg&quot;);
  17.   background-size: cover;
  18.   background-repeat: no-repeat;
  19. }
  20.   
  21. &lt;/style&gt;
  24. # Sunset Sea
  26. Welcome to Sunset Sea.
  27. ~~~
  29. **style.css**
  31. (do not specify the background images in the style.css)
  33. ~~~
  34. /*-- scss:defaults --*/
  36. ~~~
  38. &lt;hr&gt;
  40. [![home page with background image][1]][1]
  42. &lt;hr&gt;
  44. [![Report page with no background image][2]][2]
  46. &lt;hr&gt;
  49.   [1]: https://i.stack.imgur.com/NhQj3.jpg
  50.   [2]: https://i.stack.imgur.com/BRVvV.png
  52. </details>

huangapple
  • 本文由 发表于 2023年3月3日 23:08:29
  • 转载请务必保留本文链接：https://go.coder-hub.com/75628760.html
  • css
  • html
  • quarto
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定