Wikimedia Meta-Wiki

소규모 위키 툴킷/스타터 킷/메인 페이지 커스터마이징

< Small wiki toolkits | Starter kit
This page is a translated version of the page Small wiki toolkits/Starter kit/Main page customization and the translation is 100% complete.
Other languages:

새 위키 커뮤니티의 구성원인 경우 때때로 기본 페이지를 사용자 지정(작은 ​​화면에서 더 잘 보이도록)하거나 구성 설정을 변경하고 싶을 수 있습니다.

이 페이지에서는 이러한 변경을 직접 수행할 수 있도록 몇 가지 기본 사항을 설명합니다. 조금 읽어야 하고, 새로운 것을 배우고, 자신을 테스트해야 합니다.

대부분의 위키에서 "메인 페이지"를 편집하려면 대부분의 편집자가 가진 것 이상의 권한이 필요합니다. 종종 이것은 “관리자” 권한, “인터페이스 관리자” 권한 또는 목적을 위해 특별히 생성된 일부 권한 그룹입니다. 정확한 구성은 위키마다 다르며 확인하려면 위키에서 확인해야 합니다. 위키에 설정된 권한을 보려면 메인 페이지의 사이드바에서 "Page information" 링크를 사용하고 "페이지 보호" 섹션을 살펴보십시오.

메인 페이지에 반응 상자 추가

이 페이지에서 배울 수 있는 내용

브라우저 창의 너비를 변경합니다. 더 작고 넓게 만드십시오. 다음 줄의 상자 배열이 어떻게 변경되는지 확인하십시오:

Box 1
Box 2
Box 3
Box 4
Box 5

이 페이지는 이것을 어떻게 당신의 위키에 가질 수 있는지 설명합니다.

배경 이해

어쨌든 상자는 요즘 웹 레이아웃에서 인기가 있습니다. 몇 개의 상자를 서로 옆에 놓으면 작은 화면에서도 이러한 상자를 읽을 수 있기를 원할 것입니다. 이를 반응형 웹 디자인이라고 합니다.

상자를 서로 옆에 놓기 위해 과거에 어떤 사람들은 표를 사용/악용했습니다. 표는 위키 마크업에 존재하지만 표는 나쁜 생각입니다. 표는 작은 화면에서 보기 좋지 않으며(이 예제 이미지 참조) 접근성 문제를 일으킬 수 있습니다.

불행하게도 미디어위키 소프트웨어는 위키 마크업으로 응답 상자를 제공하지 않습니다. (일부 상자는 일부 위키에서 틀로 존재할 수 있습니다.) MediaWiki:Common.css를 사용하여 단일 페이지에 대한 레이아웃("CSS")을 저장하는 것도 좋지 않습니다.[1]

따라서 이 페이지에서는 다음을 수행합니다:

  • 실제 콘텐츠에 HTML 마크업과 위키 마크업을 사용하고,
  • 이 콘텐츠를 Template:Main_page라는 새 위키 페이지에 틀로 저장하며,
  • CSS를 사용하여 Template:Main_page/styles.css라는 새 위키 페이지에서 레이아웃 부분(상자)을 정의하고,
  • TemplateStyles를 사용하여 <templatestyles src="Main_page/styles.css"/> 줄을 통해 틀의 콘텐츠에 레이아웃을 적용합니다. 그리고
  • 기본 페이지에서 {{Main_page}} 줄을 통해 틀을 로드하고 삽입합니다.

예시

메인 페이지 틀 만들기

먼저 위키에 Template:Main_page라는 새 페이지를 만듭니다.

기본 페이지 틀에 콘텐츠 추가

이 단계에서는 Template:Main_page라는 새 페이지를 편집하여 콘텐츠를 정의합니다.

아래 상자에는 5개의 상자가 있는 골격이 있습니다. 해당 상자의 줄을 해당 페이지에 복사하여 붙여넣은 다음 조정합니다. HTML 분할 요소("div")를 사용합니다. 물론 상자의 수를 변경할 수 있습니다. 상자를 제거하려면 여는 <div>과 그에 상응하는 닫는 </div> 사이의 모든 것을 제거하십시오. 이 두 요소가 일치하는지 확인하십시오. 그렇지 않으면 이상한 일이 발생할 수 있습니다.

아래의 class 매개변수는 이러한 HTML 요소에 대한 CSS 레이아웃을 정의합니다. 다음 단계에서 레이아웃을 정의합니다. 첫 번째 줄 <templatestyles src="Main_page/styles.css"/>는 CSS 레이아웃을 로드합니다. 

<templatestyles src="Main_page/styles.css"/>
<div id="wikifrontpage_container" class="wikifrontpage_row">
<div class="wikifrontpage_box">
===Box 1===
* Item1 in the first box
* Item2 text in the first box
</div>
<div class="wikifrontpage_box">
===Box 2===
Some text in the second box
</div>
<div class="wikifrontpage_box">
===Box 3===
Some text in the third box
</div>
<div class="wikifrontpage_box">
===Box 4===
Some text in the fourth box
</div>
<div class="wikifrontpage_box">
===Box 5===
Some text in the fifth box
</div>
</div>

CSS 정의

위키에 위키 페이지 Template:Main_page/styles.css를 만듭니다.

다음 줄은 상자의 레이아웃과 상자가 한 줄에서 다음 줄로 이동하는 너비를 정의합니다. 아래 CSS를 모두 이해할 필요는 없습니다. 

.wikifrontpage_row {
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 0;
	margin: 0 -5px 0 -5px;
}
.wikifrontpage_box {
	flex: 1;
	margin: 5px;
	min-width: 240px;
	border: 1px solid #CCC;
	padding: 0 10px 10px 10px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}

위의 CSS에서 중요한 부분은 flex(유연한 레이아웃을 정의)라는 단어와 min-width: 240px;(같은 줄에서 다음 줄로 상자를 이동할 때의 너비를 정의)가 있는 모든 줄입니다.

이러한 CSS 정의를 페이지 Template:Main_page/styles.css에 복사하여 붙여넣고 페이지를 저장합니다.

테스트

기본 페이지에 템플릿 추가

변경 내용에 만족하면 기본 페이지 자체에 템플릿을 삽입합니다. 기본 페이지를 편집하고 {{Main_page}} 줄을 추가합니다. 위에서 설명한 것처럼 일반적으로 확장된 권한이 필요합니다.

그게 다입니다! 축하합니다!

문제점

작은 화면을 위한 기타 CSS 옵션

또 다른 옵션은 일부 창 너비까지만 사용되는 CSS 규칙을 정의하는 것입니다. 실험에 관심이 있다면 CSS 미디어 쿼리를 참조하세요.

메인 페이지 제목의 텍스트 숨기기/변경

메인 페이지의 제목은 로그인한 사용자의 경우 MediaWiki:Mainpage-title-loggedin을 편집하고 로그아웃한 사용자의 경우 MediaWiki:Mainpage-title을 편집하여 구성할 수 있습니다. 모바일 로그인 사용자의 경우 MediaWiki:wikimedia-mobile-mainpage-title-loggedin 메시지가 사용됩니다.

  • 기본 텍스트를 사용하려면 -로 설정하십시오.
  • 홈 페이지에서 머리글을 숨기려면 페이지를 비우십시오(이렇게 하면 WCAG 2.1 2.4.1을 만족시키기 위해 페이지에 1단계 머리글이 있어야 합니다).
  • 텍스트를 페이지 제목과 근본적으로 다른 것으로 변경합니다. "우리 프로젝트에 오신 것을 환영합니다!"

로그인한 사용자 메시지는 $1이라는 단일 매개변수를 사용합니다. 이것은 편집자가 현재 사용자의 제목을 사용자 정의할 수 있도록 하는 뷰어의 사용자 이름을 나타냅니다. 예를 들어 Welcome to Wikipedia $1!는 user:Jdlrobson의 제목을 Welcome to Wikipedia Jdlrobson!으로 표시합니다.

참고: 벡터(2022년) 스킨(데스크톱 개선 사항 참조)에서 메인 페이지의 헤더를 숨기면 고정 헤더 기능이 비활성화됩니다. 가능한 경우 프로젝트의 제목을 공개하는 것이 좋습니다.

벡터(2022년) 스킨에서 페이지 상단에 언어 버튼 표시

대부분의 프로젝트가 제목을 숨기기 때문에 기본 페이지 하단에 언어 버튼을 배치(벡터(2022년) 스킨 참조)합니다.

기능 플래그를 통해 페이지 상단으로 복원할 수 있습니다. 다음 쿼리 문자열 매개변수를 사용하여 이를 테스트할 수 있습니다: https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal?vectorlanguageinmainpageheader=1&useskin=vector-2022

더 작은 화면 너비에서 항목을 감싸는 가로 탐색 막대 사용

예를 들어 mw:설명문서 또는 틀:보조금 전략 재개의 위키 마크업을 참조하십시오. 기본적으로 이것은 HTML 및 CSS입니다(하지만 CSS는 인라인이 아닌 TemplateStyles로 이동해야 합니다. 위 참조): 

<div style="display: table-cell; vertical-align: top; display: flex; flex-direction: row; flex-flow: row wrap; justify-content: space-between;">
 <div style="vertical-align:top; text-align:center; padding-top: 5px; padding-right: 2px; border-bottom: 12px solid #2e86c1; min-width: 110px; max-width: 160px; flex: 1 1 0px;">
  [[Special:MyLanguage/Example|Tab 1]]
 </div>
 <div style="vertical-align:top; text-align:center; padding-top: 5px;border-bottom: 12px solid #2e00c1; min-width: 110px; max-width: 160px; flex: 1 1 0px;">
  [[Special:MyLanguage/Example|Tab 2]]
 </div>
 <div style="vertical-align:top; text-align:center; padding-top: 5px; padding-right: 2px; border-bottom: 12px solid #2e86c1; min-width: 110px; max-width: 160px; flex: 1 1 0px;">
  [[Special:MyLanguage/Example|Tab 3 which is a bit longer so it might wrap]]
 </div>
 <div style="vertical-align:top; text-align:center; padding-top: 5px; padding-right: 2px; border-bottom: 12px solid #2e00c1; min-width: 110px; max-width: 160px; flex: 1 1 0px;">
  [[Special:MyLanguage/Example|Tab 4]]
 </div>
 <div style="vertical-align:top; text-align:center; padding-top: 5px; border-bottom: 12px solid #2e86c1; min-width: 110px; max-width: 160px; flex: 1 1 0px;">
  [[Special:MyLanguage/Example|Tab 5]]
 </div>
</div>

각주

  1. ↑ 이러한 추가 클래스에 common.css를 사용하면 콘텐츠에 사용되지 않는 경우에도 위키의 "모든" 페이지에 대한 페이지 로드 비용이 추가됩니다.
Retrieved from "https://meta.wikimedia.org/w/index.php?title=Small_wiki_toolkits/Starter_kit/Main_page_customization/ko&oldid=25278540"