我已经建立了一个网站——j-dunning.net——使用 distill for R Markdown。虽然我通常可以调整网站的 CSS 代码，但如何单独调整明信片登录页面？
我特别想删除导航栏和图像顶部之间的空间，并更改生物底部超链接的颜色。
欢迎任何帮助
杰米
问问题
26 次
1 回答
1
全球风格与本地风格
对于整个站点的更改，将样式表添加到 _site.yml。要更改单个页面，请将样式表添加到单个页面。使用 library distill，您可以create_theme(name = themeMePlease)在控制台中运行该函数。它将在您的项目环境中创建一个 .css 样式表。它也将根据您在 YAML 中指定的其他元素（YAML ......？）预填充内容。
如果您希望更改是全局的（整个网站），请将主题添加到 _site.yml。显然包括名称、标题和您拥有的任何其他设置。请记住，这不是缩进的。它应该向左冲洗。
name: "siteDistill"
title: "Answering SOQ questions"
theme: themeMePlease.css
如果您想将此样式表应用到特定页面，请将其添加到该页面的 YAML。不要将它添加到全局和另一个页面的 YAML中。如果它不在 _site.yml 中，您可以将它添加到多个页面的 YAML 中。
要更改超链接颜色，请打开该样式表。在底部，添加以下内容以控制<a>标签的设置。（这是一个超链接标签。）
/* Change link appearance */
d-article a {
border-bottom: 2px solid #ffd8db;
text-decoration: none;
color: #B21E28;
}
除了postcards构建的关于页面之外，这对所有内容都有效。个人主题、全局主题和内嵌样式不适用于此脚本。我发现唯一有效的是内联 Javascript。
拿那个postcards！（我还是赢了。）
减少明信片和导航栏之间的空白
在您有明信片的 RMarkdown 脚本中（很可能是 about.Rmd），添加以下内容以在明信片底部添加边距。您无需添加任何库、包等即可使用。这些单位em是相对的，因此当屏幕尺寸发生变化或添加更多内容时，它应该可以正常工作。您当然可以更改单位或数量。我会鼓励您避免px并尝试坚持使用vh,rem或em，因为它们是相对大小。
```{r iWin,results="asis",engine="js",echo=FALSE}
// look for the element to modify
elem = document.querySelector('body > div > div > div');
sAdd = "padding-bottom: 15em;"; // this will be added
// em is relative, will adjust with other flexing
// extract any inline attributes already present
styler = elem.getAttribute("style");
if (styler==undefined || styler==null) { // if there are no HTML styles set
styler = "";
}
elem.setAttribute("style",styler+sAdd);
```
更改Postcards 关于页面的超链接颜色
要更改postcards生成脚本的超链接颜色，请使用以下代码。将#B21E28 更改为您想要的颜色。我建议使用 RGB、HSL 或 HEX 编码的颜色。
```{r iWinAgain,results="asis",engine="js",echo=FALSE}
// look for the element to modify
elem2 = document.querySelector('p > a');
sAdd2 = "color: #B21E28;"; // this will be added
// extract any inline attributes already present
styler2 = elem2.getAttribute("style");
if (styler2==undefined || styler2==null) { // if there are no HTML styles set
styler2 = "";
}
elem2.setAttribute("style",styler2+sAdd2);
```
这是使用默认提取网页和默认postcards构建的快照，可能是您的一些网站内容，以及此答案中的更改：
于 2022-01-29T04:00:02.670 回答