[Github 블로그] minimal-mistakes 테마의 notice 기능 사용하기

주의 사항, 공지 같은 것을 강조하기 좋다.

사용 방법

1. 첫번째 방법

문단의 바로 다음줄에 {: .notice}만 붙여 준다.
notice뒤에 minimal mistakes에서 지정한 notice의 종류 이름을 뒤에 붙여줄 수도 있다. --종류이름

🌝 **<u>공지 사항</u>** 지각하지 말고 준비물 챙겨오세요!
{: .notice--primary} 

🌝 공지 사항 지각하지 말고 준비물 챙겨오세요!

2. 두번째 방법

<div class> HTML 태그를 사용한다. notice 이름의 클래스를 불러온다. markdown="1" 속성은 html코드 속에서 markdown을 인식하게 하기 위한 속성값이다. </div>로 닫아주는 것 잊지 말기

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

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

안에 코드도 넣을 수 있다. 아래처럼!

std::cout << "Hello. World! >> std::endl;

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

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

Message

A basic message.

3. 세번째 방법

Liquid 언어를 이용한다. capture 태그를 이용하여 변수에 텍스트 문단(문자열) 값을 저장한 뒤 이를 HTML <div class> 태그에 넣는다. Liquid 문법 설명 보러가기

{% 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

더 자세한 설명은 여기서

---

🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

Blog 카테고리 내 다른 글 보러가기