删除 distill 网站明信片上照片顶部和导航栏之间的 space
Remove space between top of photo and navbar on distill website postcards
我建立了一个网站 -- j-dunning.net -- 使用 distill for R Markdown。虽然我通常可以调整网站的 CSS 代码，但如何单独调整明信片登录页面？
我特别想删除导航栏和图片顶部之间的 space，并更改简介底部超链接的颜色。
欢迎任何帮助
杰米
全局样式与本地样式
要对整个站点进行全面更改，请将样式 sheet 添加到 _site.yml。要更改单个页面，请将样式 sheet 添加到单个页面。使用库 distill，您可以在控制台中 运行 函数 create_theme(name = themeMePlease)。它将在您的项目环境中创建一个 .css 样式 sheet。它将根据您在 YAML 中指定的其他元素（YAML...？）预填充内容。
如果您希望更改是全局的（整个网站），请将主题添加到 _site.yml。显然包括姓名、职位和您拥有的任何其他设置。请记住，这不是缩进的。它应该向左齐平。
name: "siteDistill"
title: "Answering SOQ questions"
theme: themeMePlease.css
如果您想将此样式 sheet 应用到特定页面，请将其添加到该页面的 YAML。不要将它添加到全局 和另一个页面的 YAML。如果它不在 _site.yml.
中，您可以将它添加到多个页面的 YAML 中
要更改超链接颜色，请打开该样式 sheet。在底部，添加以下内容以控制 <a> 标签的设置。 （这是一个超链接标签。）
/* Change link appearance */
d-article a {
border-bottom: 2px solid #ffd8db;
text-decoration: none;
color: #B21E28;
}
这适用于所有 除了 postcards 构建的页面。个人主题、全局主题和 in-line 样式不适用于此脚本。我发现唯一有用的是内联 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 about 页面超链接颜色
要更改 postcards 生成的脚本的超链接颜色，请使用以下代码。将#B21E28 更改为您想要的颜色。我建议使用 RGB、HSL 或 HEX-coded 颜色。
```{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 构建的快照，可能是您网站的一些内容，以及此答案中的更改：
我建立了一个网站 -- j-dunning.net -- 使用 distill for R Markdown。虽然我通常可以调整网站的 CSS 代码，但如何单独调整明信片登录页面？
我特别想删除导航栏和图片顶部之间的 space，并更改简介底部超链接的颜色。
欢迎任何帮助
杰米
全局样式与本地样式
要对整个站点进行全面更改，请将样式 sheet 添加到 _site.yml。要更改单个页面，请将样式 sheet 添加到单个页面。使用库 distill，您可以在控制台中 运行 函数 create_theme(name = themeMePlease)。它将在您的项目环境中创建一个 .css 样式 sheet。它将根据您在 YAML 中指定的其他元素（YAML...？）预填充内容。
如果您希望更改是全局的（整个网站），请将主题添加到 _site.yml。显然包括姓名、职位和您拥有的任何其他设置。请记住，这不是缩进的。它应该向左齐平。
name: "siteDistill"
title: "Answering SOQ questions"
theme: themeMePlease.css
如果您想将此样式 sheet 应用到特定页面，请将其添加到该页面的 YAML。不要将它添加到全局 和另一个页面的 YAML。如果它不在 _site.yml.
中，您可以将它添加到多个页面的 YAML 中要更改超链接颜色，请打开该样式 sheet。在底部，添加以下内容以控制 <a> 标签的设置。 （这是一个超链接标签。）
/* Change link appearance */
d-article a {
border-bottom: 2px solid #ffd8db;
text-decoration: none;
color: #B21E28;
}
这适用于所有 除了 postcards 构建的页面。个人主题、全局主题和 in-line 样式不适用于此脚本。我发现唯一有用的是内联 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 about 页面超链接颜色
要更改 postcards 生成的脚本的超链接颜色，请使用以下代码。将#B21E28 更改为您想要的颜色。我建议使用 RGB、HSL 或 HEX-coded 颜色。
```{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 构建的快照，可能是您网站的一些内容，以及此答案中的更改：