minimal-mistakes 테마의 notice 기능

출처:평생 공부 블로그(공부하는 식빵맘)

1. 다음줄에 `{: .notice}

🌝 **<u>공지 사항</u>** 어쩌구저쩌구
{: .notice--primary} 

notice뒤에 minimal mistakes에서 지정한 notice의 종류 이름을 뒤에 붙여줄 수도 있다. --종류이름

🌝 공지 사항 어쩌구저쩌구

2. HTML 태그 사용

HTML 태그를 사용한다.
notice 이름의 클래스를 불러온다.
markdown=”1” 속성은 html코드 속에서 markdown을 인식하게 하기 위한 속성값이다.

<div class="notice--primary" markdown="1">
안에 `코드`도 넣을 수 있다. 아래처럼!
    ```c++
std::cout << "Hello. World!;
    ``` 

- C++ 열심히
- 공부하자
</div>

안에 코드도 넣을 수 있다. 아래처럼! c++ std::cout << "Hello. World!;

• C++ 열심히
• 공부하자

<div class="notice">
  <h4>Message</h4>
  <p>A basic message.</p>
</div>

Message

A basic message.

3. Lisquid언어 사용

• capture 태그를 이용하여 변수에 텍스트 문단(문자열) 값을 저장한 뒤 이를 HTML <div class> 태그에 넣는다

{% capture notice-2 %}  <!--notice-2 라는 변수에 다음 텍스트 문단을 문자열로 저장한다.-->  
#### New Site Features

* You can now have cover images on blog pages
* Drafts will now auto-save while writing
{% endcapture %}  <!--캡처 끝! 여기까지의 텍스트를 변수에 저장-->

<div class="notice">
  {{ notice-2 | markdownify }} <!--div 태그 사이에 notice-2 객체를 출력하되 markdownify 한다. 즉 마크다운 화-->
</div>

New Site Features

• You can now have cover images on blog pages
• Drafts will now auto-save while writing