위키용 템플릿 (특히 Infobox Object)

[hazenbiz (Hazen Ellwood)]

안녕하세요 여러분! 제 관심사 그룹을 위해 Discourse를 위키로 부분적으로 사용하고 있습니다. 이 글들을 한 단계 더 끌어올릴 수 있도록 인포박스를 정말 갖고 싶습니다.

혹시 Discourse에 이 기능을 통합해 보신 분이 계신가요? 관련 플러그인이나 테마 컴포넌트를 찾을 수 없었습니다.

Obsidian에서 위키 스타일의 인포박스 템플릿을 구현한 사례를 찾았으니, 이 부분을 좋은 출발점으로 삼아 볼 수 있을 것 같습니다.

[Heliosurge (Dan DeMontmorency)]

범용 Bbcode 래퍼를 사용하는 것이 좋습니다.

#customization:theme-component를 생성하고 아래 코드를 CSS Common에 추가하세요.

div[data-wrap="redbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
//* 아래 줄의 주석을 해제하면 배경색을 변경할 수 있습니다. 이 경우 bbcode 배경색을 사용할 수 있어야 합니다.
//      background-color: var(--secondary);
//* 박스의 색상 및 두께
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
//      background-color: var(--secondary);
      border: 2.5px solid #00ff00;
      border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
//      background-color: var(--secondary);
      border: 2.5px solid #0000ff;
      border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
//      background-color: var(--secondary);
      border: 2.5px solid #ffff00;
      border-radius: 0.40em;
}
div[data-wrap="box"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
//      background-color: var(--secondary);
      border: 2.5px solid #808080;
      border-radius: 0.40em;
}

참고: 다른 색상들을 위해 위 코드의 여러 사본을 만들었습니다. 예를 들어 “greenbox”, “yellowbox”, “bluebox” 및 “box”(회색) 등입니다.

게시물에 사용하는 방법

[wrap=redbox]
> ## 정보 박스

박스 테스트
[/wrap]

"red"를 적절한 색상으로 대체하세요. 회색의 경우 단순히 "box"를 사용하세요.

---

참고 2; bbcode 색상 #customization:plugin 또는 #customization:theme-component를 사용하는 경우 “>”(구분자로 빈 줄이 필요합니다) 대신 bgcolor=를 사용할 수 있습니다.

Colored Text TC 이는 테마 컴포넌트이므로 호스팅 환경과 관계없이 설치할 수 있습니다.

Bbcode 색상을 지원하는 #plugins는 2가지가 있습니다. Bbcode color 또는 Formatting Toolbar. 경고 이 플러그인 중 하나만 설치하세요; 두 가지를 모두 설치하면 사이트가 깨진다고 생각합니다. Formatting Toolbar가 두 가지를 모두 설치하면 사이트가 깨진다고 경고합니다.

[Heliosurge (Dan DeMontmorency)]

수정된 코드에 배경색 추가

• 이 코드에는 이전 게시물에 포함된 모든 코드가 포함되어 있습니다.

CSS 공통 코드

div[data-wrap="redbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #00ff00;
      border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #0000ff;
      border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #ffff00;
      border-radius: 0.40em;
}
div[data-wrap="box"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="redboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #ff0000;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="greenboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #00ff00;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="blueboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #0000ff;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="yellowboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #ffff00;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="greyboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="grey1boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #ff0000;
      border-radius: 0.40em;
}
div[data-wrap="grey2boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color:  #808080;
      border: 2.75px solid #00ff00;
      border-radius: 0.40em;
}
div[data-wrap="grey3boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #0000ff;
      border-radius: 0.40em;
}
div[data-wrap="grey4boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #ffff00;
      border-radius: 0.40em;
}

---

게시물에 배경색 박스를 사용하려면 다음 코드를 사용하세요:

[Wrap="redboxbg"]
> Infobox

Testing boxed
[/wrap]

새로운 배경색 옵션: "red"를 다음으로 대체하세요:

• “green”, “blue”, “yellow”
  색상 배경. 회색 테두리.

모바일 스크린샷

---

• “grey”, “grey#” #=1-4.
  *모두 회색 배경, 회색 테두리, 1은 빨간색 테두리, 2는 초록색 테두리, 3은 파란색 테두리, 4는 노란색 테두리

모바일 스크린샷