Lek­re kom­men­ta­rer alle vil beund­re

hicks-comments.gif En måte å gjø­re kom­men­ta­re­ne i blog­gen let­te­re å skil­le fra hver­and­re er å la bak­grun­ne­ne deres veks­le mel­lom to far­ger. Da ser man tyde­lig hvem som har sagt hva ved førs­te øyen­kast. Og ikke er det så vans­ke­lig å få til hel­ler!

Det fin­nes en egen plu­gin til Movab­le Type som kan fik­se det­te for deg, men for å ta den i bruk må man ha lov til å kun­ne leg­ge til sli­ke til­leggs­mo­du­ler på ser­ve­ren.

Jeg har ikke ret­tig­he­ter til å leg­ge til slikt på Uni­ver­si­te­tets ser­ver, så jeg skrev noen enk­le lin­jer med php som fik­set bif­fen like godt, stek­te den med løk­rin­ger til og ser­ver­te den med pep­per­saus. Sul­ten?

Bare en liten hake

Vi skal få til det­te ved å bru­ke en fin miks av html, css, php og tag­ger for Movab­le Type-maler, men aller først må man sør­ge for at man fak­tisk kan ta i bruk php. Siden Uni­ver­si­te­tet alle­re­de har php instal­lert på ser­ve­ren kan det­te gjø­res i føl­gen­de enk­le steg:

  • Logg inn på Movab­le Type
  • Velg Weblog Con­fig > Pre­fe­ren­ces > Archi­ving
  • Sett «File exten­sion for archive files» til «php»
  • Velg «Rebuild all»

Når det er gjort er det mulig å bru­ke php blant annet i male­ne til Movab­le Type, og det er nett­opp det vi skal gjø­re! Målet er å gi annen hver kom­men­tar en egen bak­grunns­far­ge, og det gjør vi ved å gi den en egen css-klas­se.

Så fin­ner vi fram malin­gen… eh, male­ne

  • Velg Temp­la­tes fra meny­en
  • Åpne opp malen for «Indi­vi­du­al Entry Archive»
  • Bla ned­over til du fin­ner koden for kom­men­ta­rer (begyn­ner med <MTComments>)

Vi tren­ger en klas­se alle­re­de til førs­te kom­men­tar, så der­for set­ter vi utgangs­ver­di­en til å være odde­tall før kom­men­tarko­den begyn­ner:

<?php $evenodd="odd"; ?>
<MTComments>

CSS-klas­ser er som jule­ga­ver, det er det lov å gi mer enn en, og der­for kan vi dele ut rund­hån­det. Kom­men­ta­re­ne våre skal der­for få både stan­dard­klas­sen «com­ments-body» og enten «odd» eller «even». De to sis­te er ikke kalt opp etter to hel­di­ge gut­ter som får man­ge gaver til jul, men er rett og slett engelsk for odde­tall og par­tall.

Det hele kan for eksem­pel se slik ut, det vik­tigs­te er i alle fall å få put­tet inn <?= $evenodd ?> for å dele ut rik­tig klas­se.

<div class="comments-body <?= $evenodd ?>">
<h3><$MTCommentAuthorLink spam_protect="1"$> sier:</h3>
<p class="comments-date">
<$MTCommentDate format="%a %e. %B klokken %H:%M"$>
</p>
<$MTCommentBody$>
</div>

Hvis vi stop­per der vil alle kom­men­ta­re­ne få utgangs­ver­di­en «odd», og da vil «even» bli for­nær­met og sku­le stygt på oss hver gang vi tref­fer han på gaten. Litt enkel php som plas­se­res før den avslut­ten­de </MTComments> red­der oss inn igjen den­ne gan­gen:

<?php
if( $evenodd=="even" ) {
$evenodd = "odd";
} elseif( $evenodd=="odd" ){
$evenodd = "even";
}
?>
</MTComments>

Rett etter at den førs­te kom­men­ta­ren er skre­vet ut end­rer vi $evenodd-varia­be­lens ver­di og byt­ter til den and­re mulig­he­ten. Det­te skjer etter hver kom­men­tar, vi byt­ter all­tid til den and­re mulig­he­ten. Nå kan du lag­re malen og byg­ge opp side­ne på nytt (Rebuild). Men før du gjør det, ta en kikk på det­te:

Mye enk­le­re kode

Den­ne lil­le kode­snut­ten kan nem­lig gjø­res mye enk­le­re ved å bru­ke en såkalt ter­nær ope­ra­tor. Det syn­li­ge resul­ta­tet på nett­si­den vil bli akku­rat det sam­me, html-koden også, men php-koden blir mye mer effek­tiv.

Når det er sagt: Husk at det er deg selv som skal ved­li­ke­hol­de det­te, så det er lurt å vel­ge noe som du vet du kan for­stå og end­re på selv (jeg bru­ker fort­satt den litt leng­re vari­an­ten). Her er hele grei­en med mer effek­tiv php-kode, kom­men­tert på engelsk til gle­de for de som har lest alt det­te så langt uten å skjøn­ne et ord…:

// Set initial value to odd
<?php $even = true; ?>
<MTComments>
// Use the ternary operator to choose class
$evenodd= (( $even ) ? "even" : "odd");
<div class="comments-body <?= $evenodd ?>">
<h3><$MTCommentAuthorLink spam_protect="1"$> sier:</h3>
<p class="comments-date">
<$MTCommentDate format="%a %e. %B klokken %H:%M"$>
</p>
<$MTCommentBody$>
</div>
// Flip the flop...
$even = !$even;
?>
</MTComments>

Da skul­le all php, html og all Movab­le Type-mal være klar. Tid for css!

Og så CSS

Vi har latt hver kom­men­tar få mer enn en klas­se, og det kan gjø­re CSS’en enk­le­re! Det som er fel­les for alle kom­men­ta­rer pas­ser nem­lig fint inn i .comments-body, og så kan det som er unikt for hver av de to type­ne (slik som bak­grunns­far­ge) plas­se­res i «odd» og «even»:

.comments-body {
margin: 0;
padding: 0 2em;
display: block;
min-width: 9em;
color: black;
background: gold;
}
.odd {
color: inherit;
background: silver;
border: 1px solid gray;
}
.even {
color: inherit;
background: inherit;
}

I det­te til­fel­let er «even» den stil­les­te i klas­sen, og har ikke noe nytt å til­føye. Det betyr ikke at «odd» er mer verdt enn «even», de har bare uli­ke inter­es­ser og hobby­er. Dess­uten sies det at tale er sølv, mens taus­het er gull…

Next Article

Problemer med satiren?

  1. Spæhn­ne.

  2. Inter­es­sant, og moro­samt å lese. 🙂

  3. Kjekt dere lik­te det!

  4. Tenk å skri­ve så lett at det er mor­somt å lese noe en ikke skjøn­ner det spor av…