„Hogyan tegyük széppé a MediaWikit?” változatai közötti eltérés
(ez az igazi létrehozás) |
|||
1. sor: | 1. sor: | ||
− | + | A produkciós Wikik (wikipedia.org, mediawiki.org) nagyon sok sablont, beszúrt színes táblázatot használnak, amelyek nem csak szépek, de használatukkal egyrészt az oldalak szerkesztése is gyorsabb, másrészt az olvasó is könnyebben megérti. | |
− | + | ||
− | + | Ebben a szócikkben azt próbálom leírni, hogy miket csináltam én, hogy ez a Wiki így nézzen ki, ahogyan kinéz. | |
− | + | ||
− | + | == Syntax highlighting == | |
− | * | + | A MediaWikihez létezik egy [http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi GeSHi névre hallgató extension]. Ezt kell feltelepíteni a linken található leírás alapján. (Ne felejtsük el az összes php file-t letölteni!) |
− | * | + | |
+ | Ha ezt megtettük, akkor az alábbi módon használhatjuk a kiterjesztést, pl. XML dokumentum kiemeléséhez: | ||
+ | <pre> | ||
+ | <source lang="xml" | ||
+ | <bekezdes id="1"> | ||
+ | <text param="papparaparam">Helló világ</text> | ||
+ | <kep source="file:///tmp/alma.png"/> | ||
+ | </bekezdes> | ||
+ | </source> | ||
+ | </pre> | ||
+ | És ez így fog kinézni: | ||
+ | <source lang="xml"> | ||
+ | <bekezdes id="1"> | ||
+ | <text param="papparaparam">Helló világ</text> | ||
+ | <kep source="file:///tmp/alma.png"/> | ||
+ | </bekezdes> | ||
+ | </source> | ||
+ | |||
+ | == Szép táblázatok használata == | ||
+ | A wikipedia tartalmaz egy ún. "széptáblázat" (más néven: wikitable, prettytable) sablont, amely közönséges táblázatok csinosítását végzi. Ehhez viszont szükségünk van néhány változtatásra a [[MediaWiki:Common.css]] file-ban. | ||
+ | |||
+ | # Elsőként készítsünk egy hivatkozást akárhová (pl. a saját lapunkra) ilyen néven: <nowiki>[[MediaWiki:Common.css]]</nowiki>. Ezt szerkeszteni csak sysopként fogjuk tudni. Puskázzunk például a [http://meta.wikimedia.org/w/index.php?title=MediaWiki:Common.css&action=edit WikiMedia oldaláról!] | ||
+ | # Mentsük el. | ||
+ | # Készítsünk egy sablont ilyen néven: [[Template:Wikitable]] (<nowiki>[[Template:Wikitable]]</nowiki>) | ||
+ | # Készítsük a táblázatainkat így: | ||
+ | <pre> | ||
+ | {| {{wikitable}} | ||
+ | ! Egyik oszlop !! Másik oszlop | ||
+ | |- | ||
+ | | Egyik érték || Másik érték | ||
+ | |- | ||
+ | |} | ||
+ | </pre> | ||
+ | Ennek eredménye ez lesz: | ||
+ | {| {{wikitable}} | ||
+ | ! Egyik oszlop !! Másik oszlop | ||
+ | |- | ||
+ | | Egyik érték || Másik érték | ||
+ | |- | ||
+ | |} | ||
+ | |||
+ | == Szép figyelmeztetések és egyéb jelölések == | ||
+ | Ezeket a dolgokat a wikipedia Article Message Box-oknak nevezi. Számos sablont takar, és mindegyik sablon egy közös őst használ. | ||
+ | === Ikonok === | ||
+ | Ha azt akarjuk, hogy a figyelmeztetések mellett ikonok is megjelenjenek, akkor ezeket fel kell tölteni a Wikibe. Egy csomó jó ikon található pl. itt: http://commons.wikimedia.org/wiki/Category:Indication_icons | ||
+ | === CSS === | ||
+ | Sajnos a fent leírt CSS módosítás még nem tartalmazza az '''ambox''' sablonhoz szükséges dolgokat. | ||
+ | {{uncertain|Lehetséges, hogy ezt a lépést ki lehetne kerülni, ha a wikipediáról szednénk le a common.css -t?}} | ||
+ | Ezért adjuk hozzá az alábbiakat a [[MediaWiki:Common.css]]-hez: | ||
+ | <source lang="css"> | ||
+ | /* Article message box template styles */ | ||
+ | table.ambox { | ||
+ | margin: 0 10%; /* Will not overlap with other elements */ | ||
+ | border-collapse: collapse; | ||
+ | background: #fbfbfb; | ||
+ | border: 1px solid #aaa; | ||
+ | border-left: 10px solid #1e90ff; /* Default "notice" blue */ | ||
+ | } | ||
+ | table.ambox th.ambox-text, table.ambox td.ambox-text { /* The message body cell(s) */ | ||
+ | padding: 0.25em 0.5em; /* 0.5em left/right */ | ||
+ | width: 100%; /* Make all templates the same width regardless of text size */ | ||
+ | } | ||
+ | table.ambox td.ambox-image { /* The left image cell */ | ||
+ | padding: 2px 0px 2px 0.5em; /* 0.5em left, 0px right */ | ||
+ | text-align: center; | ||
+ | } | ||
+ | table.ambox td.ambox-imageright { /* The right image cell */ | ||
+ | padding: 2px 4px 2px 0px; /* 0px left, 4px right */ | ||
+ | text-align: center; | ||
+ | } | ||
+ | table.ambox-notice { | ||
+ | border-left: 10px solid #1e90ff; /* Blue */ | ||
+ | /* border-right: 10px solid #1e90ff; */ /* If you want two blue bars */ | ||
+ | } | ||
+ | table.ambox-delete, | ||
+ | table.ambox-serious { | ||
+ | border-left: 10px solid #b22222; /* Red */ | ||
+ | } | ||
+ | table.ambox-content { | ||
+ | border-left: 10px solid #f28500; /* Orange */ | ||
+ | } | ||
+ | table.ambox-style { | ||
+ | border-left: 10px solid #f4c430; /* Yellow */ | ||
+ | } | ||
+ | table.ambox-merge { | ||
+ | border-left: 10px solid #9932cc; /* Purple */ | ||
+ | } | ||
+ | table.ambox-protection { | ||
+ | border-left: 10px solid #bba; /* Gray */ | ||
+ | } | ||
+ | table.ambox.ambox-mini { /* small floating box variant */ | ||
+ | float: right; | ||
+ | clear: right; | ||
+ | margin: 0 0 0 1em; | ||
+ | width: 25%; | ||
+ | } | ||
+ | </source> | ||
+ | === Sablonok === | ||
+ | El kell készíteni a "közös őst", az [[Template:ambox | Ambox sablont]] (lásd a hivatkozott lap forrását!) | ||
+ | |||
+ | Ebben a sablonban kell definiálni, hogy hány féle üzenet lehet. Én ezeket az üzenettípusokat definiáltam (mindegyikhez létre kell hozni egy külön sablont!): | ||
+ | * ''[[Template:TODO]]'': még nincs kész az adott szakasz vagy oldal | ||
+ | * ''[[Template:STOP]]'': Állj és ne tovább! | ||
+ | * ''[[Template:INFO]]'': További érdekességek a tudomány és a technika világából... | ||
+ | * ''[[Template:UNCERTAIN]]'': Hát, ebben nem vagyok egészen biztos... | ||
+ | * ''[[Template:ATTENTION]]'': Figyelem! | ||
+ | * ''[[Template:TRASH]]'': Elavult információk | ||
+ | == PNG MIME-type bug == | ||
+ | Forrás: http://gustavus.edu/gts/webservices/2007/06/18/fixing-broken-png-uploads-with-mediawiki/ | ||
+ | |||
+ | A lényeg, hogy a feltöltött PNG file-ok hibás MIME-típussal tárolódnak, ezért nem jelennek meg a képek. A linkelt írás szerint a PHP-ből ki kell nyerni, hogy hol tartja a '''mime magic'''-et (ez RedHat alatt itt található: <code>/etc/httpd/conf/magic</code>, majd ehhez hozzá kellett adni az alábbi sorokat: | ||
+ | # PNG images | ||
+ | 1 string PNG image/png | ||
+ | Ezután az Apache webszervert újra kell indítani, majd a hibás file-okat újból feltölteni. | ||
+ | |||
+ | [[Kategória:HOWTO]] |
A lap 2007. november 1., 00:23-kori változata
A produkciós Wikik (wikipedia.org, mediawiki.org) nagyon sok sablont, beszúrt színes táblázatot használnak, amelyek nem csak szépek, de használatukkal egyrészt az oldalak szerkesztése is gyorsabb, másrészt az olvasó is könnyebben megérti.
Ebben a szócikkben azt próbálom leírni, hogy miket csináltam én, hogy ez a Wiki így nézzen ki, ahogyan kinéz.
Tartalomjegyzék
Syntax highlighting
A MediaWikihez létezik egy GeSHi névre hallgató extension. Ezt kell feltelepíteni a linken található leírás alapján. (Ne felejtsük el az összes php file-t letölteni!)
Ha ezt megtettük, akkor az alábbi módon használhatjuk a kiterjesztést, pl. XML dokumentum kiemeléséhez:
<source lang="xml" <bekezdes id="1"> <text param="papparaparam">Helló világ</text> <kep source="file:///tmp/alma.png"/> </bekezdes> </source>
És ez így fog kinézni:
<bekezdes id="1">
<text param="papparaparam">Helló világ</text>
<kep source="file:///tmp/alma.png"/>
</bekezdes>
Szép táblázatok használata
A wikipedia tartalmaz egy ún. "széptáblázat" (más néven: wikitable, prettytable) sablont, amely közönséges táblázatok csinosítását végzi. Ehhez viszont szükségünk van néhány változtatásra a MediaWiki:Common.css file-ban.
- Elsőként készítsünk egy hivatkozást akárhová (pl. a saját lapunkra) ilyen néven: [[MediaWiki:Common.css]]. Ezt szerkeszteni csak sysopként fogjuk tudni. Puskázzunk például a WikiMedia oldaláról!
- Mentsük el.
- Készítsünk egy sablont ilyen néven: Template:Wikitable ([[Template:Wikitable]])
- Készítsük a táblázatainkat így:
{| {{wikitable}} ! Egyik oszlop !! Másik oszlop |- | Egyik érték || Másik érték |- |}
Ennek eredménye ez lesz:
Egyik oszlop | Másik oszlop |
---|---|
Egyik érték | Másik érték |
Szép figyelmeztetések és egyéb jelölések
Ezeket a dolgokat a wikipedia Article Message Box-oknak nevezi. Számos sablont takar, és mindegyik sablon egy közös őst használ.
Ikonok
Ha azt akarjuk, hogy a figyelmeztetések mellett ikonok is megjelenjenek, akkor ezeket fel kell tölteni a Wikibe. Egy csomó jó ikon található pl. itt: http://commons.wikimedia.org/wiki/Category:Indication_icons
CSS
Sajnos a fent leírt CSS módosítás még nem tartalmazza az ambox sablonhoz szükséges dolgokat. Sablon:Uncertain Ezért adjuk hozzá az alábbiakat a MediaWiki:Common.css-hez:
/* Article message box template styles */
table.ambox {
margin: 0 10%; /* Will not overlap with other elements */
border-collapse: collapse;
background: #fbfbfb;
border: 1px solid #aaa;
border-left: 10px solid #1e90ff; /* Default "notice" blue */
}
table.ambox th.ambox-text, table.ambox td.ambox-text { /* The message body cell(s) */
padding: 0.25em 0.5em; /* 0.5em left/right */
width: 100%; /* Make all templates the same width regardless of text size */
}
table.ambox td.ambox-image { /* The left image cell */
padding: 2px 0px 2px 0.5em; /* 0.5em left, 0px right */
text-align: center;
}
table.ambox td.ambox-imageright { /* The right image cell */
padding: 2px 4px 2px 0px; /* 0px left, 4px right */
text-align: center;
}
table.ambox-notice {
border-left: 10px solid #1e90ff; /* Blue */
/* border-right: 10px solid #1e90ff; */ /* If you want two blue bars */
}
table.ambox-delete,
table.ambox-serious {
border-left: 10px solid #b22222; /* Red */
}
table.ambox-content {
border-left: 10px solid #f28500; /* Orange */
}
table.ambox-style {
border-left: 10px solid #f4c430; /* Yellow */
}
table.ambox-merge {
border-left: 10px solid #9932cc; /* Purple */
}
table.ambox-protection {
border-left: 10px solid #bba; /* Gray */
}
table.ambox.ambox-mini { /* small floating box variant */
float: right;
clear: right;
margin: 0 0 0 1em;
width: 25%;
}
Sablonok
El kell készíteni a "közös őst", az Ambox sablont (lásd a hivatkozott lap forrását!)
Ebben a sablonban kell definiálni, hogy hány féle üzenet lehet. Én ezeket az üzenettípusokat definiáltam (mindegyikhez létre kell hozni egy külön sablont!):
- Template:TODO: még nincs kész az adott szakasz vagy oldal
- Template:STOP: Állj és ne tovább!
- Template:INFO: További érdekességek a tudomány és a technika világából...
- Template:UNCERTAIN: Hát, ebben nem vagyok egészen biztos...
- Template:ATTENTION: Figyelem!
- Template:TRASH: Elavult információk
PNG MIME-type bug
Forrás: http://gustavus.edu/gts/webservices/2007/06/18/fixing-broken-png-uploads-with-mediawiki/
A lényeg, hogy a feltöltött PNG file-ok hibás MIME-típussal tárolódnak, ezért nem jelennek meg a képek. A linkelt írás szerint a PHP-ből ki kell nyerni, hogy hol tartja a mime magic-et (ez RedHat alatt itt található: /etc/httpd/conf/magic
, majd ehhez hozzá kellett adni az alábbi sorokat:
# PNG images 1 string PNG image/png
Ezután az Apache webszervert újra kell indítani, majd a hibás file-okat újból feltölteni.