Author Topic: [Poradnik]Jak stworzyć szablon logu wiadomości IEView? - Belf  (Read 5490 times)

0 Members and 1 Guest are viewing this topic.

Offline AL|EN

  • Newbie
  • *
  • Posts: 11
  • Country: pl
Jednym ze sposobów (reszta sposobów opisana jest tutaj) zmieniania wyglądu logu wiadomości w Mirandzie
jest zastosowanie wtyczki IEView i tzw. szablonów ivt. Poradnik przedstawi podstawy tworzenia takiego szablonu.

Szablon .ivt w fazie tworzenia jest zwykłym dokumentem HTML który można edytować w
notatniku.

Poniżej jest tłumaczenie tekstu ieview-templates z którego możemy się dowiedzieć jakie
szablony i zmienne są używane do obsługi zdarzeń w logu.

Każdy szablon zaczyna się od nazwy szablonu, która jest szczególnym rodzajem komentarza HTML, na przykład:

Code: [Select]
<!--HTMLStart-->lub

Code: [Select]
<!--MessageIn-->Szablon kończy się, gdy zaczyna się nowy szablon lub osiągnięto EOF.

Poniższe szablony można zdefiniować jako:
Code: [Select]
<!--HTMLStart-->
<!--MessageIn-->
<!--hMessageIn-->
<!--MessageOut-->
<!--hMessageOut-->
<!--File-->
<!--hFile-->
<!--URL-->
<!--hURL-->
<!--Status-->
<!--hStatus-->
<!--MessageInGroupStart-->
<!--MessageInGroupInner-->
<!--MessageInGroupEnd-->
<!--hMessageInGroupStart-->
<!--hMessageInGroupInner-->
<!--hMessageInGroupEnd-->
<!--MessageOutGroupStart-->
<!--MessageOutGroupInner-->
<!--MessageOutGroupEnd-->
<!--hMessageOutGroupStart-->
<!--hMessageOutGroupInner-->
<!--hMessageOutGroupEnd-->
 
<!--HTMLStartRTL-->
<!--MessageInRTL-->
<!--hMessageInRTL-->
<!--MessageOutRTL-->
<!--hMessageOutRTL-->
<!--MessageInGroupStartRTL-->
<!--MessageInGroupInnerRTL-->
<!--MessageInGroupEndRTL-->
<!--hMessageInGroupStartRTL-->
<!--hMessageInGroupInnerRTL-->
<!--hMessageInGroupEndRTL-->
<!--MessageOutGroupStartRTL-->
<!--MessageOutGroupInnerRTL-->
<!--MessageOutGroupEndRTL-->
<!--hMessageOutGroupStartRTL-->
<!--hMessageOutGroupInnerRTL-->
<!--hMessageOutGroupEndRTL-->
Wszystkie szablony, których nazwy zaczynają się na \"h\" są używane do wyświetlania wydarzeń historycznych.

Jeśli w szablonie nie występuje odpowiednie zdarzenie to nie pojawi się w też w logu!

Poniższe zmienne są dostępne we wszystkich szablonach z wyjątkiem HTMLStart:
%base%  - Podstawowy adres URL
%name%  - nazwa kontaktu lub nazwa użytkownika (w zależności od kontekstu)
%time%  - czas
%date%  - data
%text%  - tekst
%cid%  - ID kontaktu lub ID użytkownika (w zależności od kontekstu)
%avatar% - link do zdjęcia kontaktu lub pliku obrazu użytkownika (w zależności od kontekstu)
%avatarIn% - link do zdjęcia kontaktu
%avatarOut% - link do pliku obrazu użytkownika
%nameIn% - nazwa kontaktu
%nameOut% - nazwa użytkownika
%proto% - Nazwa protokołu

Poniższe zmienne są dostępne w HTMLStart:
%base%  - Podstawowy adres URL (tą zmienną należy stosować w tagu )
%avatarIn% - link do zdjęcia kontaktu
%avatarOut% - link do pliku obrazu użytkownika
%nameIn% - nazwa kontaktu
%nameOut% - nazwa użytkownika
%proto% - Nazwa protokołu

Po zapoznaniu się z powyższym tekstem udajemy się na podstawowy kurs HTML i CSS.
Gdy już posiądziemy stosowną wiedzę zabieramy się za wykonanie swojego pierwszego
logu IEView.

Może on wyglądać tak jak styl Avonlea Light by zx :
Code: [Select]
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\\">
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=utf-8\\" />
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"style.css\\" />
 
<div class=\\"messageInGroup\\">
<div class=\\"header\\">
%name% <span class=\\"date\\">%time%</span>
</div>
<p>%text%</p>
 
<div class=\\"message\\">
<span class=\\"date\\">%time%</span>
<p>%text%</p>
</div>
 
</div>
 
<div class=\\"messageIn\\">
<div class=\\"header\\">
%name% <span class=\\"date\\">%time%</span>
</div>
<p>%text%</p>
</div>
 
<div class=\\"messageInGroup\\">
<div class=\\"header\\">
%name% <span class=\\"date\\">%time%</span>
</div>
<p>%text%</p>
 
<div class=\\"message\\">
<span class=\\"date\\">%time%</span>
<p>%text%</p>
</div>
 
</div>
 
<div class=\\"messageOut\\">
<div class=\\"header\\">
%name% <span class=\\"date\\">%time%</span>
</div>
<p>%text%</p>
</div>
 
<div class=\\"messageOutGroup\\">
<div class=\\"header\\">
%name% <span class=\\"date\\">%time%</span>
</div>
<p>%text%</p>
 
<div class=\\"message\\">
<span class=\\"date\\">%time%</span>
<p>%text%</p>
</div>
 
</div>
 
<div class=\\"messageOut\\">
<div class=\\"header\\">
%name% <span class=\\"date\\">%time%</span>
</div>
<p>%text%</p>
</div>
 
<div class=\\"messageOutGroup\\">
<div class=\\"header\\">
%name% <span class=\\"date\\">%time%</span>
</div>
<p>%text%</p>
 
 
<div class=\\"message\\">
<span class=\\"date\\">%time%</span>
<p>%text%</p>
</div>
 
</div>
 
<div class=\\"file\\">
<h6>File:</h6> %name%
<span class=\\"date\\">%time%</span>
%text%
</div>
 
<div class=\\"file\\">
<h6>File:</h6> %name%
<span class=\\"date\\">%time%</span>
%text%
</div>
 
<div class=\\"status\\">
<h6>Status:</h6> %name%
<span class=\\"date\\">%time%</span>
%text%
</div>
 
<div class=\\"status\\">
<h6>Status:</h6> %name%
<span class=\\"date\\">%time%</span>
%text%
</div>
z dołączonym arkuszem CSS:

Code: [Select]
html, body, div, p {
margin: 0;
padding: 0;
}
body {
font-family: \'Calibri\', \'Arial\', \'Verdana\' sans-serif;
font-size: 12px;
}
.messageInGroup, .messageIn, .messageOutGroup, .messageOut, .status, .file {
padding: 10px 0;
position: relative;
border-bottom: 1px solid #e8e8e8;
}
.message {
margin: 10px 0 0 0;
padding: 10px 0 0 0;
border-top: 1px dotted #e8e8e8;
}
.messageOutGroup, .messageOut {
background: #f4f4f4;
}
.messageOutGroup .header, .messageOut .header {
color: #636363;
}
.messageInGroup, .messageIn {
}
.messageInGroup .header, .messageIn .header {
color: #436d9c;
}
.header .date, .file .date, .status .date {
position: absolute;
right: 10px;
font-size: 10px;
color: #9f9f9f;
}
.message .date {
padding: 0 10px 0 5px;
float: right;
font-size: 10px;
color: #9f9f9f;
}
.file {
background: #e1f1f8;
}
.file h6, .file .date {
color: #436d9c;
}
.status {
background: #f8f8e1;
}
.status h6, .status .date {
color: #707019;
}
.header {
padding: 0 0 8px 10px;
}
p {
padding: 0 10px;
}
.message p {
padding: 0 0 0 10px;
position: relative;
}
h6 {
padding: 0 5px 0 10px;
display: inline;
font-size: 12px;
font-weight: normal;
}
a, a:visited, a:active {
color: #436d9c;
}
a:hover {
color: #5b859f;
}
Po wykonanej pracy zmieniamy rozszerzenie pliku z HTML na ivt. Folder z  naszym dziełem umieszczamy w folderze IEView wewnątrz folderu Skins. Szablon wybieramy w Skórki > IEView > Log wiadomości  >Użyj szablonu.