如何从 rmdformats 修改 "downcute" CSS，让作者如 "readthedown"

Question

我对CSS的理解不够基本。我对某些元素的作用有一个模糊的概念，并且我设法自定义它们的颜色或字体大小。但是我真的不明白如何实现下面的。

我很喜欢 downcute CSS style from the rmdformats collection (here's an example).

但我更喜欢作者和日期在目录左下角的位置，如 readthedown CSS (here's an example).

我试图通过添加自定义 CSS 来实现这一点，在其中复制一些 readthedown.css 的元素（例如“#postamble”）似乎可以实现这一点。但它不起作用 – 它超出了我的范围。

我想做的事情是否可以通过一种简单的方式实现，例如，通过在 downcute css 之上添加自定义 CSS？对于“#postamble”或“.Content p.authors 等元素的任何建议、机械说明或解释，我将不胜感激 .Content p.date" 作品.

（HTML 页面是使用 knitr 在 R 中根据这些模板创建的）

Answer 1

你很久以前就问过这个问题，但我今天才发现你的问题。我有两个选择给你。在第一个中，它只是将作者移到侧边栏的底部。在第二个选项中，您将获得对比鲜明的背景（以及移动的作者姓名）。

您将像往常一样在 downcute RMD 的 YAML 中声明作者。然后在你的 RMD 中的任何地方添加这个 javascript 块。如果你尝试运行内联一个 JS 块，它不会做任何事情。你必须编织才能让它发挥作用。在这个例子中，作者的名字是 downcute.

选项 1

```{r listenOrElse,results="asis",engine="js",echo=F}

setTimeout(function(){
  au = document.querySelector("p.authors");
  ah = au.clientHeight; // get height of author element
  sb = document.querySelector("div.Sidebar");
  sh = sb.clientHeight; // get height of sidebar
  
  anh = sh - ah; // calculate the top position of moved author element

  $(au).appendTo(sb);  // move the author
  $(au).css({top: anh + 'px', left: '5px', position: 'absolute'}); // set placement
}, 400); // in case of delayed build

```

选项 2

```{r OrElse,results="asis",engine="js",echo=F}
// alternative with contrast background
setTimeout(function(){
  au = document.querySelector("p.authors");
  ah = au.clientHeight; // get height of author element
  sb = document.querySelector("div.Sidebar");
  sh = sb.clientHeight; // get height of sidebar
  dnh = sh - (ah*2); // calculate the top position of moved author element
  dv = document.createElement("div");
  $(dv).appendTo(sb);
  $(dv).css({top: dnh + 'px', left: 0, width: '100%',
             height: ah * 2 + 'px',
             position: 'absolute', display: 'block', 
             background: '#7B7B7B'});
  $(au).appendTo(dv);  // move the author
  $(au).css({top: ah * .5 + 'px', left: '5px', position: 'absolute', 
             color: '#F7F7F7', fontWeight: 'bold'}); // set placement
}, 400); // in case of delayed build

```

如何从 rmdformats 修改 "downcute" CSS，让作者如 "readthedown"

How to modify "downcute" CSS from rmdformats, to have author as in "readthedown"

html

css

r

r-markdown

rmdformats

选项 1

选项 2