[英]How to use HTML/CSS for reusable styled boxes in Bookdown
I would like to create reusable sections for my bookdown
project.我想为我的
bookdown
项目创建可重用的部分。
What works : I create a style.css
including什么有效:我创建了一个
style.css
包括
.titeldefbox{
display: flex;
width: 100%;
left: 0;
top: 0;
position: absolute;
background-color: darkslategray;
height: 30px;
color: white;
border-radius: 10px 10px 0 0;
padding: 10px 0 10px 0;
}
.defbox{
background-position: 0px;
background: linear-gradient(
315deg,
hsl(240deg 50% 95%) 0%,
hsl(158deg 13% 64%) 100%);
padding: 1em 1em 1em 1em;
border-radius: 10px;
position: relative;
}
.svgdefbox{
width: auto;
height: 25px;
padding-left: 1em;
}
.defbox h2{
font-size: 16px;
margin-top: 0px;
width: 100%;
height: 20px;
padding: 5px 0 10px 15px;
}
.defbox p{
margin-top: 40px;
padding: 10px 10px 0 0;
}
I call a div span in any.Rmd as我将 any.Rmd 中的一个 div 跨度称为
::::: {.defbox}
A **definition** is a statement of the meaning of a term.
:::::
Renders to:呈现给:
What does not work : A friend of mine designed a titled box with a SVG image (as you see it everywhere, eg https://swcarpentry.github.io/r-novice-inflammation/01-starting-with-data/index.html ).什么不起作用:我的一个朋友设计了一个带有 SVG 图像的标题框(你到处都可以看到它,例如https://swcarpentry.github.io/r-novice-inflammation/01-starting-with-data/index .html )。
This这个
<div class="defbox">
<div class="titeldefbox">
<svg class="svgdefbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 382.59 429.36"><defs><style>.cls-1{fill:#ffffff;}</style></defs><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_6" data-name="Ebene 6"><g id="definition"><path class="cls-1" d="M81.17,128.33c3.88-2.38,7.76-4.4,11.64-6.29,1.94-1,3.88-1.82,5.82-2.74s3.88-1.7,5.82-2.5a5.39,5.39,0,0,1,2.9,0,23.59,23.59,0,0,0,2.91.1l5.81,0,11.61,0,46.48.18,46.47.18,23.23.09,5.8,2.59c1.93.92,3.87,1.78,5.8,2.77,3.86,1.9,7.73,3.91,11.59,6.23-3.88,2.29-7.76,4.27-11.64,6.14-1.94,1-3.88,1.82-5.82,2.72l-5.82,2.55-23.23-.09-46.47-.18L127.6,140,116,140l-5.81,0a21.76,21.76,0,0,0-2.91.07,5.39,5.39,0,0,1-2.9,0c-1.93-.82-3.87-1.69-5.8-2.55s-3.86-1.79-5.8-2.78C88.9,132.8,85,130.75,81.17,128.33Z"/><path class="cls-1" d="M81.17,192.37c3.88-2.07,7.76-3.82,11.64-5.46,1.94-.85,3.88-1.58,5.82-2.38s3.87-1.48,5.81-2.18a6.36,6.36,0,0,1,2.91.05,25.54,25.54,0,0,0,2.9.09l5.81,0,11.62,0,46.47.18,46.47.18,23.24.09,5.8,2.26c1.93.8,3.86,1.55,5.79,2.4,3.87,1.66,7.74,3.41,11.6,5.43-3.88,2-7.76,3.71-11.64,5.34-1.94.83-3.88,1.57-5.81,2.36L243.78,203l-23.24-.09-46.47-.18-46.47-.18-11.62,0-5.8,0a25.7,25.7,0,0,0-2.91.06,6.18,6.18,0,0,1-2.9,0c-1.94-.71-3.87-1.47-5.8-2.22s-3.87-1.55-5.8-2.42C88.9,196.26,85,194.48,81.17,192.37Z"/><path class="cls-1" d="M81.17,256.42c1.29-1.07,2.59-1.93,3.88-2.91s2.59-1.76,3.89-2.58,2.58-1.58,3.88-2.38,2.59-1.48,3.88-2.18a2.76,2.76,0,0,1,1.94,0,11.34,11.34,0,0,0,1.93.08l3.87,0,7.75,0,31,.11,31,.12,15.49.06,3.86,2.25c1.29.8,2.58,1.55,3.87,2.4q3.85,2.45,7.72,5.41-3.89,2.94-7.76,5.35c-1.3.85-2.59,1.59-3.89,2.38l-3.88,2.21-15.49-.06-31-.12-31-.11-7.74,0-3.88,0a11.33,11.33,0,0,0-1.93.07,2.87,2.87,0,0,1-1.94,0c-1.29-.71-2.57-1.47-3.86-2.22s-2.58-1.55-3.87-2.41-2.57-1.71-3.86-2.61S82.46,257.49,81.17,256.42Z"/><path class="cls-1" d="M320,190.53c2.07-10,4-19.94,5.59-29.95s3.09-20,4.25-30,2-20,2.33-29.83a195.22,195.22,0,0,0-.86-29c-.43-4.64-.62-9.21-1.42-13.5a37.29,37.29,0,0,0-4-11.3,14.79,14.79,0,0,0-6.41-6.31,13.66,13.66,0,0,0-2-.76l-.13,0-.21,0-.41-.12-.83-.21-1.71-.43c-2.31-.56-4.68-1.08-7.09-1.58-9.62-2-19.52-3.61-29.42-5.12s-19.87-2.83-29.85-4.05q-29.92-3.64-60-5.84c-20-1.44-40.11-2.38-60.09-2.49-10-.05-20,.12-29.84.61S78.12,22,68.56,23.39c-4.77.72-9.48,1.6-14,2.72a74.7,74.7,0,0,0-12.67,4.23c-3.8,1.67-7,3.9-8.37,5.77a21.31,21.31,0,0,0-2.4,4.47A57.1,57.1,0,0,0,29,46.68a130.58,130.58,0,0,0-3.09,13.75c-.83,4.75-1.5,9.6-2.08,14.49-1.14,9.78-1.9,19.71-2.46,29.69-1.09,20-1.41,40.07-1.37,60.21.14,40.28,1.7,80.67,4.07,121q1.82,30.24,4.36,60.39c.87,10.05,1.81,20.08,2.89,30.06.55,5,1,10,1.86,14.89.39,2.46.79,4.9,1.11,7.34s.53,4.87.76,7.22a.69.69,0,0,1,0,.2.14.14,0,0,1,0,.07c0,.06,0,.09,0,.14a.9.9,0,0,0,0,.29,2.12,2.12,0,0,0,.4.92,7.2,7.2,0,0,0,1.3,1.32A16.07,16.07,0,0,0,38.8,410a32,32,0,0,0,5.64,2.34A63.21,63.21,0,0,0,51,414.06c9.19,1.89,19.14,2.48,29.08,2.7s20-.22,30.12-.92,20.18-1.73,30.29-3c-9.67,3.2-19.5,5.95-29.44,8.44s-20,4.44-30.28,6a164,164,0,0,1-31.65,1.93,72.89,72.89,0,0,1-8.4-.89,49.33,49.33,0,0,1-8.83-2.24,29.08,29.08,0,0,1-9.39-5.37,22,22,0,0,1-4.25-5,19.48,19.48,0,0,1-1.57-3.17c-.2-.56-.43-1.12-.58-1.69l-.23-.85-.19-.73C15,406.59,14.47,404,14,401.43s-.68-5.15-.94-7.72c-.47-5.14-1.13-10.22-1.67-15.31Q9.8,363.13,8.51,347.91,5.89,317.46,4.11,287C1.71,246.36.14,205.68,0,164.87,0,144.46.28,124,1.4,103.49,2,93.23,2.76,82.94,4,72.58,4.58,67.41,5.3,62.21,6.21,57A151,151,0,0,1,9.8,41.07a78.25,78.25,0,0,1,2.88-8.25A40.13,40.13,0,0,1,17.6,24a33.79,33.79,0,0,1,7.83-7.32,52,52,0,0,1,8.18-4.56A92.93,92.93,0,0,1,49.73,6.71c5.32-1.33,10.59-2.3,15.84-3.1C76.06,2,86.46,1.18,96.82.65s20.67-.69,31-.64c20.57.11,41,1.08,61.43,2.55s40.72,3.46,61,5.93q15.22,1.86,30.42,4.13c10.14,1.54,20.25,3.2,30.49,5.31,2.56.52,5.13,1.09,7.75,1.72l2,.5,1,.26.5.14.58.16a32.88,32.88,0,0,1,14,8.14A37.92,37.92,0,0,1,343.21,37a59.57,59.57,0,0,1,6.28,17.2,78.7,78.7,0,0,1,2.14,16.67c0,2.74-.13,5.45-.34,8.14s-.48,5.34-.8,8c-.63,5.27-1.47,10.47-2.43,15.6-2,10.26-4.45,20.31-7.3,30.21A470.26,470.26,0,0,1,320,190.53Z"/><path class="cls-1" d="M238.48,382.75A25.91,25.91,0,0,1,241,380l5.22-5.25,10.44-10.5,41.75-42,41.74-42,20.46-20.59,0,0,22-22-21.91-21.86-21.52,21.59-.09,0-20.87,21-41.75,42-41.74,42L224.27,353l-5.22,5.25a26.93,26.93,0,0,1-2.69,2.54,6.54,6.54,0,0,0-2.65,2.59c-1,2.52-1.87,5.09-2.8,7.65s-1.79,5.18-2.59,7.87a165.74,165.74,0,0,0-4.38,16.51,165.1,165.1,0,0,0,16.48-4.49c2.69-.81,5.23-1.76,7.85-2.63s5.12-1.87,7.64-2.85A6.65,6.65,0,0,0,238.48,382.75Z"/></g></g></g></svg>
<h2> Definition </h2>
</div>
<p>A
<strong> definition </strong>
is a statement of the meaning of a term.
</p>
</div>
should render to that应该呈现那个
But I fail to implement it in my markdown structure.但是我没有在我的 markdown 结构中实现它。 Either I can use pure
css
in the YAML
header or I can use a entire .html
file in the includes
option as is often done for a general everywhere-message like this:我可以在
YAML
header 中使用纯css
或者我可以在includes
选项中使用整个.html
文件,就像通常对这样的一般无处不在的消息所做的那样:
output:
bookdown::gitbook:
includes:
before_body: top_message.html
One possible way to do this is using a little bit of javascript to insert that svg element in every places where the classes .defbox
and .titeldefbox
are used.一种可能的方法是使用一点 javascript 将 svg 元素插入到使用类
.defbox
和.titeldefbox
的每个地方。
Now for example, if we wanted to use Definition boxes in our 01-intro.Rmd file, we can use pandoc divs in the following way,现在例如,如果我们想在01-intro.Rmd文件中使用定义框,我们可以按以下方式使用 pandoc div,
01-intro.Rmd 01-介绍.Rmd
# Hello bookdown
All chapters start with a first-level heading followed by your chapter title, like the line above. There should be only one first-level heading (`#`) per .Rmd file.
:::: {.defbox}
::: {.titeldefbox}
<h2> Definition </h2>
:::
A **definition** is a statement of the meaning of a term.
::::
## More styled box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique nibh mauris, id ullamcorper massa convallis et. Aliquam pharetra rutrum bibendum. Quisque diam lorem, varius ac tincidunt vel, volutpat et est.
:::: {.defbox}
::: {.titeldefbox}
<h2> More Definition </h2>
:::
Praesent iaculis sed metus sed imperdiet. Nunc vitae augue bibendum, pulvinar neque id, suscipit justo. Quisque convallis, erat vel consectetur mattis, ante est euismod mauris, at condimentum enim erat id lorem. Phasellus volutpat id sapien a sollicitudin. Maecenas nec hendrerit felis.
::::
Now notice these divs doesn't contain that tiny little svg icon.现在请注意,这些 div 不包含 svg 这个小图标。 We are going to insert those with js in a html file and include that html file with
includes: after_body:
yaml key in the _output.yml .我们将把那些带有 js 的文件插入到 html 文件中,并将该 html 文件包含在 _output.yml 中,
includes: after_body:
yaml键。
_output.yml _output.yml
bookdown::gitbook:
css: style.css
includes:
after_body: custom_def.html
custome_def.html custome_def.html
<div class="svg">
<svg class="svgdefbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 382.59 429.36"><defs><style>.cls-1{fill:#ffffff;}</style></defs><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_6" data-name="Ebene 6"><g id="definition"><path class="cls-1" d="M81.17,128.33c3.88-2.38,7.76-4.4,11.64-6.29,1.94-1,3.88-1.82,5.82-2.74s3.88-1.7,5.82-2.5a5.39,5.39,0,0,1,2.9,0,23.59,23.59,0,0,0,2.91.1l5.81,0,11.61,0,46.48.18,46.47.18,23.23.09,5.8,2.59c1.93.92,3.87,1.78,5.8,2.77,3.86,1.9,7.73,3.91,11.59,6.23-3.88,2.29-7.76,4.27-11.64,6.14-1.94,1-3.88,1.82-5.82,2.72l-5.82,2.55-23.23-.09-46.47-.18L127.6,140,116,140l-5.81,0a21.76,21.76,0,0,0-2.91.07,5.39,5.39,0,0,1-2.9,0c-1.93-.82-3.87-1.69-5.8-2.55s-3.86-1.79-5.8-2.78C88.9,132.8,85,130.75,81.17,128.33Z"/><path class="cls-1" d="M81.17,192.37c3.88-2.07,7.76-3.82,11.64-5.46,1.94-.85,3.88-1.58,5.82-2.38s3.87-1.48,5.81-2.18a6.36,6.36,0,0,1,2.91.05,25.54,25.54,0,0,0,2.9.09l5.81,0,11.62,0,46.47.18,46.47.18,23.24.09,5.8,2.26c1.93.8,3.86,1.55,5.79,2.4,3.87,1.66,7.74,3.41,11.6,5.43-3.88,2-7.76,3.71-11.64,5.34-1.94.83-3.88,1.57-5.81,2.36L243.78,203l-23.24-.09-46.47-.18-46.47-.18-11.62,0-5.8,0a25.7,25.7,0,0,0-2.91.06,6.18,6.18,0,0,1-2.9,0c-1.94-.71-3.87-1.47-5.8-2.22s-3.87-1.55-5.8-2.42C88.9,196.26,85,194.48,81.17,192.37Z"/><path class="cls-1" d="M81.17,256.42c1.29-1.07,2.59-1.93,3.88-2.91s2.59-1.76,3.89-2.58,2.58-1.58,3.88-2.38,2.59-1.48,3.88-2.18a2.76,2.76,0,0,1,1.94,0,11.34,11.34,0,0,0,1.93.08l3.87,0,7.75,0,31,.11,31,.12,15.49.06,3.86,2.25c1.29.8,2.58,1.55,3.87,2.4q3.85,2.45,7.72,5.41-3.89,2.94-7.76,5.35c-1.3.85-2.59,1.59-3.89,2.38l-3.88,2.21-15.49-.06-31-.12-31-.11-7.74,0-3.88,0a11.33,11.33,0,0,0-1.93.07,2.87,2.87,0,0,1-1.94,0c-1.29-.71-2.57-1.47-3.86-2.22s-2.58-1.55-3.87-2.41-2.57-1.71-3.86-2.61S82.46,257.49,81.17,256.42Z"/><path class="cls-1" d="M320,190.53c2.07-10,4-19.94,5.59-29.95s3.09-20,4.25-30,2-20,2.33-29.83a195.22,195.22,0,0,0-.86-29c-.43-4.64-.62-9.21-1.42-13.5a37.29,37.29,0,0,0-4-11.3,14.79,14.79,0,0,0-6.41-6.31,13.66,13.66,0,0,0-2-.76l-.13,0-.21,0-.41-.12-.83-.21-1.71-.43c-2.31-.56-4.68-1.08-7.09-1.58-9.62-2-19.52-3.61-29.42-5.12s-19.87-2.83-29.85-4.05q-29.92-3.64-60-5.84c-20-1.44-40.11-2.38-60.09-2.49-10-.05-20,.12-29.84.61S78.12,22,68.56,23.39c-4.77.72-9.48,1.6-14,2.72a74.7,74.7,0,0,0-12.67,4.23c-3.8,1.67-7,3.9-8.37,5.77a21.31,21.31,0,0,0-2.4,4.47A57.1,57.1,0,0,0,29,46.68a130.58,130.58,0,0,0-3.09,13.75c-.83,4.75-1.5,9.6-2.08,14.49-1.14,9.78-1.9,19.71-2.46,29.69-1.09,20-1.41,40.07-1.37,60.21.14,40.28,1.7,80.67,4.07,121q1.82,30.24,4.36,60.39c.87,10.05,1.81,20.08,2.89,30.06.55,5,1,10,1.86,14.89.39,2.46.79,4.9,1.11,7.34s.53,4.87.76,7.22a.69.69,0,0,1,0,.2.14.14,0,0,1,0,.07c0,.06,0,.09,0,.14a.9.9,0,0,0,0,.29,2.12,2.12,0,0,0,.4.92,7.2,7.2,0,0,0,1.3,1.32A16.07,16.07,0,0,0,38.8,410a32,32,0,0,0,5.64,2.34A63.21,63.21,0,0,0,51,414.06c9.19,1.89,19.14,2.48,29.08,2.7s20-.22,30.12-.92,20.18-1.73,30.29-3c-9.67,3.2-19.5,5.95-29.44,8.44s-20,4.44-30.28,6a164,164,0,0,1-31.65,1.93,72.89,72.89,0,0,1-8.4-.89,49.33,49.33,0,0,1-8.83-2.24,29.08,29.08,0,0,1-9.39-5.37,22,22,0,0,1-4.25-5,19.48,19.48,0,0,1-1.57-3.17c-.2-.56-.43-1.12-.58-1.69l-.23-.85-.19-.73C15,406.59,14.47,404,14,401.43s-.68-5.15-.94-7.72c-.47-5.14-1.13-10.22-1.67-15.31Q9.8,363.13,8.51,347.91,5.89,317.46,4.11,287C1.71,246.36.14,205.68,0,164.87,0,144.46.28,124,1.4,103.49,2,93.23,2.76,82.94,4,72.58,4.58,67.41,5.3,62.21,6.21,57A151,151,0,0,1,9.8,41.07a78.25,78.25,0,0,1,2.88-8.25A40.13,40.13,0,0,1,17.6,24a33.79,33.79,0,0,1,7.83-7.32,52,52,0,0,1,8.18-4.56A92.93,92.93,0,0,1,49.73,6.71c5.32-1.33,10.59-2.3,15.84-3.1C76.06,2,86.46,1.18,96.82.65s20.67-.69,31-.64c20.57.11,41,1.08,61.43,2.55s40.72,3.46,61,5.93q15.22,1.86,30.42,4.13c10.14,1.54,20.25,3.2,30.49,5.31,2.56.52,5.13,1.09,7.75,1.72l2,.5,1,.26.5.14.58.16a32.88,32.88,0,0,1,14,8.14A37.92,37.92,0,0,1,343.21,37a59.57,59.57,0,0,1,6.28,17.2,78.7,78.7,0,0,1,2.14,16.67c0,2.74-.13,5.45-.34,8.14s-.48,5.34-.8,8c-.63,5.27-1.47,10.47-2.43,15.6-2,10.26-4.45,20.31-7.3,30.21A470.26,470.26,0,0,1,320,190.53Z"/><path class="cls-1" d="M238.48,382.75A25.91,25.91,0,0,1,241,380l5.22-5.25,10.44-10.5,41.75-42,41.74-42,20.46-20.59,0,0,22-22-21.91-21.86-21.52,21.59-.09,0-20.87,21-41.75,42-41.74,42L224.27,353l-5.22,5.25a26.93,26.93,0,0,1-2.69,2.54,6.54,6.54,0,0,0-2.65,2.59c-1,2.52-1.87,5.09-2.8,7.65s-1.79,5.18-2.59,7.87a165.74,165.74,0,0,0-4.38,16.51,165.1,165.1,0,0,0,16.48-4.49c2.69-.81,5.23-1.76,7.85-2.63s5.12-1.87,7.64-2.85A6.65,6.65,0,0,0,238.48,382.75Z"/></g></g></g></svg>
</div>
<script>
function add_svg () {
svg = document.querySelector(".svg svg")
svg_in = document.querySelectorAll(".defbox .titeldefbox")
for (i = 0; i < svg_in.length; i++) {
svg_clone = svg.cloneNode(true)
svg_in[i].insertBefore(svg_clone, svg_in[i].firstElementChild)
}
}
window.onload = add_svg();
</script>
And then add these following css rules in the style.css然后在样式中添加以下 css 规则。css
style.css样式.css
.titeldefbox {
display: flex;
width: 100%;
left: 0;
top: 0;
position: absolute;
background-color: darkslategray;
height: 50px;
color: white;
border-radius: 10px 10px 0 0;
padding: 10px 0 10px 0;
}
.defbox {
background-position: 0px;
background: linear-gradient(
315deg,
hsl(240deg 50% 95%) 0%,
hsl(158deg 13% 64%) 100%
);
padding: 1em 1em 1em 1em;
border-radius: 10px;
position: relative;
}
.svgdefbox {
width: auto;
height: 25px;
padding-left: 1em;
}
.defbox h2{
font-size: 16px !important;
margin-top: 0px !important;
width: 100% !important;
height: 20px !important;
padding: 0 0 10px 15px !important;
}
.defbox p{
margin-top: 40px !important;
padding: 10px 10px 0 0 !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.