ELEMENTS
GUIDE ·원래 제거하려던 내용이었으나, 이 테마를 사용하길 희망하는 사람이 있을 듯해, 그대로 포스팅을 남겨두었습니다. jekyll 블로그를 만드실 분들은 참고하시면 됩니다!
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
A small element
Lorem ipsum dolor sit amet, consectetur adip* isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.
Duis aute irure dolor in A link reprehenderit in voluptate velit esse cillum bold text dolore eu fugiat nulla pariatur. Excepteur span element sint occaecat cupidatat non proident, sunt italicised text in culpa qui officia deserunt mollit anim id some code
est laborum.
- An item
- An item
- An item
- An item
- An item
- Item one
- Item two
- Item three
- Item four
- Item five
A simple blockquote
Some HTML…
<blockquote cite="http://www.imdb.com/title/tt0284978/quotes/qt1375101">
<p>You planning a vacation, Mr. Sullivan?</p>
<footer>
<a href="http://www.imdb.com/title/tt0284978/quotes/qt1375101"
>Sunways Security Guard</a
>
</footer>
</blockquote>
…CSS…
blockquote {
text-align: center;
font-weight: bold;
}
blockquote footer {
font-size: 0.8rem;
}
…and JavaScript
const blockquote = document.querySelector("blockquote");
const bolden = (keyString, string) =>
string.replace(
new RegExp(keyString, "g"),
"<strong>" + keyString + "</strong>"
);
blockquote.innerHTML = bolden("Mr. Sullivan", blockquote.innerHTML);
Single line of code
HTML Includes
Contact form
{% include site-form.html %}
Demo map embed
{% include map.html id="XXXXXX" title="Coffee shop map" %}
Button include
{% include button.html text="A button" link="https://david.darn.es" %}
{% include button.html text="A button with icon"
link="https://twitter.com/daviddarnes" icon="twitter" %}
Icon include
{% include icon.html id="twitter" title="twitter" %} [{% include
icon.html id="linkedin" title="twitter"
%}](https://www.linkedin.com/in/daviddarnes)
Video include
{% include video.html id="zrkcGL5H3MU" title="Siteleaf tutorial video"
%}
Image includes
{% include figure.html image="https://picsum.photos/600/800?image=894"
caption="Image with caption" width="300" height="800" %} {% include figure.html
image="https://picsum.photos/600/800?image=894" caption="Right aligned image"
position="right" width="300" height="800" %} {% include figure.html
image="https://picsum.photos/600/800?image=894" caption="Left aligned image"
position="left" width="300" height="800" %} {% include figure.html
image="https://picsum.photos/1600/800?image=894" alt="Image with just alt text"
%}