Varoitus: tämä postaus sisältää do-it-yourself-muokkausohjetta Vuodatus-blogille joka vaatii hieman osaamista HTML:stä ja CSS:stä. Eli jos et koe olevasi hardcore-blogihakkeri, ei ehkä kannata yrittää tätä. Muokkaukset blogiin omalla vastuulla.

Kiitos Pompon idean, päätin kokeilla väsätä Vuodatus.net:ssä pyörivälle blogille mahdollisuuden tehdä "pikapostauksia". Pikapostauksen idea on julkaista lauseen, parin pituinen juttu blogissa, joka ei ihan ole tarpeeksi pitkä eikä sisältörikas että sille kannattaisi tehdä ihan oma kirjoituksensa. Myöskään pikapostausta ei näytetä blogissa ihan samalla tavalla kuin normaalia, vaan pikapostaus esitetään hieman eri tavalla.

Tämän saa aikaan muokkaamalla blogipohjaa (jos käytössä on uudenmallinen pohja) tai kirjoitusten asettelua (jos käytössä on vanhanmallinen pohja). Esimerkki tässä on nyt tehty uudenmalliselle pohjalle, mutta jos käytät vanhanmallista, muuta $muuttuja$ -> <#muuttuja#>.

Eli alla on esitetty oletusblogipohjan kirjoitusten asettelu:

     <vuodatus:entry-template>
      <div class="entry">
       <h2><a href="/blog/$id$/$seotitle$/">$otsikko$</a></h2>
       <div class="subline">$julkaisuaika$
        <vuodatus:categories> / {Kategoriat}: $kategoria$</vuodatus:categories>
        <vuodatus:author-info> / {Kirjoittaja}: $kirjoittaja$</vuodatus:author-info>
       </div>
       <div class="entryBody">
        $kirjoitus$
       </div>
       <vuodatus:comment-links>
        <div>
         <table border="0" width="100%" align="center" cellpadding="0" cellspacing="0">
          <tr>
           <td width="103">
            <div class="commentsButton"><a href="/blog/$id$/$seotitle$/#comments">$kommentit$</a></div>
           </td>
           <td width="103">
            <div class="addCommentsButton"><a href="/blog/$id$/$seotitle$/#commentform">{kommentoi}</a></div>           
           </td>
           <td> </td>
          </tr>
         </table>
        </div>
       </vuodatus:comment-links>
      </div>
     </vuodatus:entry-template>

Lisätään <div class="entry"> -kohdan sisään uusi div-tägi:

<div class="$kategorianimet$">
   <!-- Muu sisältö jää tämän sisään -->
</div>

Tämä tuottaa blogikirjoitukseen div-elementin jonka class-attribuutin arvoksi määritellään blogikirjoituksen kategoriat. Täten voimme määritellä minipostaukset tekemälle niille oman kategorian, esim. "pikapostaus".  Kun julkaisemme blogikirjoituksen kategoriassa "pikapostaus", päätyy tuonne CSS-luokka samalla nimellä, ja voimme tehdä eri esityssäännöt pikapostauksille. Nopein vaihtoehto on käyttää vain display: none -määrettä ja piilottaa ne asiat mitä ei haluta. Kuitenkin monipuolisempi pikapostaus-systeemi saadaan aikaan jos kirjoitusten asetteluun määritellään pikapostauksille omat kohtansa:

   <vuodatus:entry-template>
    <div class="entry">
     <div class="$kategorianimet$">
      <div class="normaalipostaus">
       <h2><a href="/blog/$id$/$seotitle$/">$otsikko$</a></h2>
       <div class="subline">$julkaisuaika$
        <vuodatus:categories> / {Kategoriat}: $kategoria$</vuodatus:categories>
        <vuodatus:author-info> / {Kirjoittaja}: $kirjoittaja$</vuodatus:author-info>
       </div>
       <div class="entryBody">
        $kirjoitus$
       </div>
       <vuodatus:comment-links>
        <div>
         <table border="0" width="100%" align="center" cellpadding="0" cellspacing="0">
          <tr>
           <td width="103">
            <div class="commentsButton"><a href="/blog/$id$/$seotitle$/#comments">$kommentit$</a></div>
           </td>
           <td width="103">
            <div class="addCommentsButton"><a href="/blog/$id$/$seotitle$/#commentform">{kommentoi}</a></div>           
           </td>
           <td> </td>
          </tr>
         </table>
        </div>
       </vuodatus:comment-links>
      </div>
      <div class="minipostaus">
       <div><a href="/blog/$id/">$kirjoitus$ - $julkaisuaika</a></div>       
      </div>
     </div>
    </div>
   </vuodatus:entry-template>

Tässä hyvin yksinkertaisessa esimerkissä minipostaukseen tuodaan minipostaus CSS-luokan sisään kirjoitusteksti ja julkaisuaika jotka ovat kokonaisuudessaan linkki yksittäiseen kirjoitukseen. Kun tästä nyt suoraan tätä käytettäisiin, näkyisi jokaisessa kirjoituksessa sekä normaali kirjoitus että pikapostausmuoto kirjoituksesta, joten tarvitaan hieman CSS:ää:

.entry .minipostaus {
    display: none;
}
.entry .pikapostaus .minipostaus {
    display: block;
}
.entry .pikapostaus .normaalipostaus {
    display: none;
}

Tämä CSS siis määrittelee oletuksena minipostaus-CSS-luokan piiloitetuksi. Kun taas dokumenttipuusta löytyy pikapostaus CSS-luokka, piilotetaankin kirjoituksen normaali versio ja näytetään vain pikapostaus.