Peppo 카드 그리드

이게 뭔가요?

주로 작가 페이지에서 사용되지만, 다른 양식에서도 쓰일 정렬 가능한 카드 형태의 서식입니다. 예를 들어, 제작자의 작가 페이지를 살펴보세요.


제작자

PeppersGhostPeppersGhost


연결된 템플릿

이 템플릿을 구성하기 위해 가능한 적은 페이지를 사용했습니다. 기술적인 한계로 인해, 이 문서들엔 카드 그리드 기능의 필수 요소를 제외하고는 어떠한 내용도 담을 수가 없습니다.
peppo-card-base
peppo-card-structure


사용 방법

  • 카드 그리드를 표시하고 싶은 페이지를 고르세요. 펀의상 이를 표시 페이지라고 하겠습니다.
  • 먼저 우리는 이 모든것이 잘 작동하게 만드는 CSS를 추가해야 합니다. 그러러면, 아래의 코드를 복사하여 표시 페이지에 붙여넣으세요:

[[include component:peppo-card-grid
| cardBG= changeThis
| color1 = changeThis
| color2= changeThis
]]

  • 각 "changeThis"를 테마에서 사용하고 싶은 어떠한 색으로든지 바꾸세요. 가장 나은 결과물을 위해, 원하는 색을 헥스 코드로 입력하세요. 예를 들어, 색을 흰색으로 설정하고 싶다면, "changeThis"를 "#ffffff"로 바꾸세요. 이 도구가 헥스 코드 선택을 도와줄겁니다.
  • 카드를 놓아둘 새 페이지를 만드세요. 이걸 여러분의 카드 컬렉션이라 부를 겁니다. 반드시 페이지 URL의 앞에 "component:"가 오게 하세요. 그러면 템플릿으로 태그될 것입니다.

    예시: http://www.scp-wiki.wikidot.com/component:peppersghost-card-collection
  • 여러분의 카드 컬렉션에 다음 코드를 추가하세요:

[[div class="card-box"]]

카드들이 이리로 옵니다

[[/div]]

  • "카드들이 이리로 옵니다"를 아래의 peppo-card-base 구성요소로 바꾸세요. 각 영역이 어떻게 작동하는지 빠르게 짚어보죠.

[[include component:peppo-card-base
articleURL=your-source
| {$orderNew} = -x
| {$orderOld} = x
| {$orderRate} = -xx
| {$orderNum} = xxxxx
| articleTitle = Your article's designation goes here
| articleLink = http://www.scp-wiki.net/your-url
| articleName = Your article name goes here
| articleQuote = 인용문이 여기 들어갑니다
| articleImage = 이미지 URL이 여기 들어갑니다
| hideCard = {$type} | hideCard = inherit
| articleCredit = 공저자: Such-and-such
| creditLink = http://www.scp-wiki.wikidot.com/such-and-such
| showCredit1 = inherit
| articleCredit2 = So-and-So의 삽화
| creditLink2 = http://www.scp-wiki.wikidot.com/such-and-such
| showCredit2 = inherit
]]

  • 카드 커스텀에 도움이 되는 것들을 아래 접기에서 확인하세요.


  • Copy the entire include again to add and customize another card. Repeat as many times as desired. Do not copy/paste the div code again. Make sure all your cards are sandwiched by the div code you added earlier!

Creating Sorting Groups

  • Now comes the part where we bring it all together.

    First, create a tab module on your Display Page. The first tab you list will be your default sorting method.

[[tabview]]
[[tab Default Option]]
Your first sorting group goes here
[[/tab]]
[[tab Alternate Option]]
Your second sorting group goes here
[[/tab]]
[[/tabview]]

  • Paste the following into each spot where a sorting group will go:

[[include component:card-collection
| orderNew =
| orderOld =
| orderRate =
| orderNum =
]]

  • Change "card-collection" to the end of the URL for your Card Collection.

    For example: If my Card Collection page's URL is "http://scp-wiki.wikidot.com/component:peppersghost-rules-everything", then my first line will look like this:

[[include: component:peppersghost-rules-everything

  • Choose a sorting type for that group:
    • orderNew displays the articles from newest to oldest.
    • orderOld displays them from oldest to newest.
    • orderRate displays the articles from highest rated to lowest.
    • orderNum displays articles by a manually entered numbered.
  • Type articleOrder after the equals sign next to your chosen sorting option. For all others, write null.

    Example:

[[include component:peppersghost-rules-everything
| orderNew = null
| orderOld = null
| orderRate = articleOrder
| orderNum = null
]]

  • If you want a sorting group to filter cards by type, include the following code on a new line before the "]]" line:

| typeName = none

  • This will hide any cards that have "{$typeName}" set as their "hideCard" value, so just change "typeName" to the name of the card type you want to hide. Repeat this step on a new line for every additional card type you want to hide.

    Let's say I have given all of my cards one of three hideCard values: {$scp}, {$tale}, and {$goi}. If I want to make a sorting group that only displays GoI format articles and lists them from oldest to newest, my code will look like this:

[[include component:peppersghost-rules-everything
| orderNew = null
| orderOld = articleOrder
| orderRate = null
| orderNum = null
| scp = none
| tale = none
]]

Wrapping up

That's pretty much everything you need to know! Let's end with one final example.

Suppose that you want to make three sorting groups. The default option will list all cards by rating. The second will show only tales and GoI formats listed by rating. The third will list only tales from newest to oldest. The final code with all the different components together will look like this:

[[include component:peppo-card-grid
| cardBG= #333333
| color1 = #b81818
| color2= #ffffff
]]
[[tabview]]
[[tab Rating]]
[[include component:peppersghost-rules-everything
| orderNew = null
| orderOld = null
| orderRate = articleOrder
| orderNum = null
]]
[[/tab]]
[[tab No SCPs]]
[[include component:peppersghost-rules-everything
| orderNew = null
| orderOld = null
| orderRate = articleOrder
| orderNum = null
| scp = none
]]
[[/tab]]
[[tab Tale Library]]
[[include component:peppersghost-rules-everything
| orderNew = null
| orderOld = articleOrder
| orderRate = null
| orderNum = null
| scp = none
| goi = none
]]
[[/tab]]
[[/tabview]]