블로그에 쓸모있는 기능들 추가하기

만들것

따옴표 모양 인용문
코드 파일 제목

인용문

‎미리보기

{% raw %}{% include quote text="바나난 마시따!" by="고앵이" %}{% endraw %}


{% raw %}{% include quote text="천재는 99% 의 노력과 <br>1% 의 영감으로 이루어진다" by="에디슨" %}{% endraw %}

{% include quote text=“바나난 마시따!” by=“고앵이” %}

{% include quote text=“천재는 99% 의 노력과
1% 의 영감으로 이루어진다” by=“에디슨” %}

이런 느낌?

‎만들기

📂includes 폴더에 📝quote 라는 파일을 만듭니다.(확장자가 없습니다!!)

{% include code title="_includes\quote" %}

{% raw %}{% capture text %}{{ include.text }}{% endcapture %}{% endraw %} {% raw %}{% capture by %}{{
include.by }}{% endcapture %}{% endraw %}
<div class="quote text-center" style="opacity: 70%; font-style: italic;">
  <i class="fas fa-quote-left"></i><br />
  <span>{% raw %}{{ text }}{% endraw %}</span><br />
  <i class="fas fa-quote-right"></i><br />
  {% raw %}{% if include.by %}{% endraw %} - {% raw %}{{ by }}{% endraw %} {% raw %}{% endif %}{% endraw %}
</div>

이걸로 만들기는 끝입니다.
원래 이렇게 태그에 스타일 넣으면 않좋은데.. 일단 걍 합니다… ㅎ

‎적용하기

포스트 내부에 다음과 같은 코드 한줄만 추가해 주면 됩니다!

{% raw %}{% include quote text="바나난 마시따!" by="고앵이" %}{% endraw %}

text 부분이 내용이고 by 부분이 그 말을 한사람 이라고 생각하시면 됩니다. 줄바꿈을 하고싶다면 <br> 을 줄바꿈 하고싶은 부분에 넣어주면 됩니다!

‎예시

{% include quote text=“인간이 다섯 명이나 모이면
반드시 한 명 쓰레기가 있다.” by=“지보로 선생” %}

{% include quote text=“나는 생각한다 고로 나는 존재한다.” by=“데카르트” %}

{% include quote text=“적의 적은 나의 친구” by=“윈스턴 처칠” %}

코드 제목

미리보기

{% include code title=“example.html” %}

<!DOCTYPE html>
<html>
  <body>
    <h1>HTML example code</h1>

    <p>HTML example p tag</p>
  </body>
</html>

자동으로 문서모양의 아이콘을 추가해 줍니다!

만들기

📂includes 폴더에 📝code 라는 파일을 만듭니다.(확장자가 없습니다!!)

{% include code title="_includes\code" %}

{% raw %}{% capture title %}{{ include.title }}{% endcapture %}{% endraw %}
<div class="code-title">
  <img draggable="false" title="memo" src="https://twemoji.maxcdn.com/2/svg/1f4dd.svg" class="emoji" />{% raw
  %}{{ title }}{% endraw %}
</div>

❗절대 다음줄 넘기거나 코드 고치지 마세요 제발.. 그러면 아이콘이랑 제목 간격이 너무 길어져버려요. {: .notice–warning}

📝_scss\minimal-mistakes\_decorations.scss을 만듭니다.(있다면 마지막줄에 넣어주세요!)

{% include code title=’_decorations.scss’ %}

.code-title {
  margin-bottom: -8px;
  display: inline-block;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background-color: $base00; //코드 블럭 색
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 4px;
  font-size: medium; //↓ monospace 폰트 ↓
  font-family: $monospace;
}

적용하기

적용할때는 다음과 같은 코드를 코드 블럭 위에 추가해 주면 됩니다.

{% raw %}{% include code title="_includes\code" %}{% endraw %}

title 부분에 파일의 제목을 넣으시면 됩니다.

❗언어가 없는 코드 블럭에는 쓰지 말아주세요. 색이 이상해져버려요 ㅎ 아래와 같이요… {: .notice–warning}

{% include code title=“random.txt” %}

HI! I'm example text

마무리

이상으로 {{ page.title }} 포스팅을 마치겠습니다.

블로그에 쓸모있는 기능들 추가하기

Webmentions[0]

Webmentions`[0]`