Ετικέτες γραφικών στοιχείων για τις Διατάξεις

Πότε να χρησιμοποιείτε συμπεριλήψεις

Οι συμπεριλήψεις είναι πιο χρήσιμες, εάν έχετε ένα τμήμα κώδικα που θέλετε να επαναχρησιμοποιήσετε σε πολλά διαφορετικά μέρη ή να συμπεριλάβετε μόνο σε ορισμένες περιπτώσεις.

Για να το κάνετε αυτό, συντάξτε το περιεχόμενο μέσα σε μια ετικέτα b:includable και, στη συνέχεια, χρησιμοποιήστε την ετικέτα b:include στα σημεία που θέλετε να εμφανίζεται.

Μορφή

 

<b:includable id='main' var='thiswidget'>
  [insert whatever content you want here]
</b:includable>

 

Χαρακτηριστικά

• id (απαιτείται): Ένα μοναδικό χαρακτηριστικό που αποτελείται από γράμματα και αριθμούς. Κάθε γραφικό στοιχείο θα πρέπει να διαθέτει ένα στοιχείο με δυνατότητα συμπερίληψης με την ετικέτα id = 'main'.
• var (προαιρετικό) Ένα χαρακτηριστικό που αποτελείται από γράμματα και αριθμούς, για την αναφορά δεδομένων εντός αυτής της ενότητας.

Εάν δημιουργήσετε περισσότερα στοιχεία με δυνατότητα συμπερίληψης με διαφορετικά αναγνωριστικά, δεν θα εμφανίζονται αυτόματα. Ωστόσο, αν δημιουργήσετε ένα στοιχείο με δυνατότητα συμπερίληψης με την ετικέτα id='new', τότε μπορείτε να το αναφέρετε στο κύριο στοιχείο με δυνατότητα συμπερίληψης με την ετικέτα <b:include name='new' /> και θα εμφανίζεται με αυτόν τον τρόπο.

Τα χαρακτηριστικά που χρησιμοποιούνται για την ετικέτα b:include είναι τα εξής:

• name (απαιτείται): Ένα αναγνωριστικό που αποτελείται από γράμματα και αριθμούς. Θα πρέπει να ταιριάζει με το αναγνωριστικό μιας υπάρχουσας ετικέτας b:includable στο ίδιο γραφικό στοιχείο.
• data (προαιρετικό): Μια έκφραση ή τμήμα δεδομένων για μεταβίβαση στην ενότητα με δυνατότητα συμπερίληψης. Αυτό το στοιχείο θα γίνει η τιμή του χαρακτηριστικού var στο στοιχείο με δυνατότητα συμπερίληψης.
• cond (προαιρετικό): Μια έκφραση η οποία προκαλεί την εκτέλεση της συμπερίληψης μόνο εάν το αποτέλεσμά της είναι αληθές. Είναι ίδιο με το χαρακτηριστικό cond στις ετικέτες b:if.

Παράδειγμα

Ακολουθεί ένα παράδειγμα του τρόπου χρήσης των ετικετών b:includable και b:include.

Το βασικό σημείο που πρέπει να γίνει κατανοητό εδώ είναι ο τρόπος με τον οποίο η ενότητα "main" περιλαμβάνει την ενότητα "post". Μεταβιβάζει μια ανάρτηση που αποκαλεί "p" και η συμπεριλαμβανόμενη ενότητα την αναφέρει ως "post" var. Στη συνέχεια, αποτυπώνει τον τίτλο.

Λάβετε υπόψη ότι η συμπερίληψη εκτελείται μόνο όταν το ευρετήριο είναι μικρότερο από 10. Επομένως, σε αυτό το παράδειγμα θα αποδοθεί μόνο το μέγιστο των 10 αναρτήσεων (το ευρετήριο ξεκινά από 0).

 

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Title: <data:post.title/>
</b:includable>

 

Παραδείγματα

• Η ετικέτα <data:title/> αποτυπώνει τον τίτλο ενός γραφικού στοιχείου

• Η ετικέτα <data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> αποτυπώνει τα χαρακτηριστικά ενός στοιχείου φωτογραφίας. Μια φωτογραφία ενδέχεται να περιέχει στοιχεία, όπως URL, ύψος και πλάτος. Η χρήση του σημείου "." υποδεικνύει ότι θέλουμε το URL για αυτήν τη φωτογραφία και όχι το URL από κάποιο άλλο στοιχείο.

Δείτε περισσότερα παραδείγματα

Δείτε τον πλήρη κατάλογο των ετικετών δεδομένων διατάξεων που υποστηρίζονται.

 

Πότε να χρησιμοποιείτε έναν βρόχο b:loop

Η ετικέτα b:loop σάς επιτρέπει να επαναλάβετε μια ενότητα περιεχομένου πολλές φορές. Χρησιμοποιείται πιο συχνά για την εκτύπωση της κάθε ανάρτησης σε μια λίστα αναρτήσεων για μια δεδομένη σελίδα ή κάθε σχόλιο ή κάθε ετικέτα, κ.λπ.

Μορφή

Η γενική μορφή για τη χρήση βρόχων είναι η εξής:

 

<b:loop var='identifier' values='set-of-data'>
  [το επαναλαμβανόμενο περιεχόμενο τοποθετείται εδώ]
</b:loop>

 

Το τμήμα "identifier" (i) μπορεί να είναι οποιοδήποτε όνομα επιλέγετε και θα χρησιμοποιείτε για τον συμβολισμό κάθε νέου στοιχείου που περιλαμβάνεται στη λίστα, κάθε φορά μέσω του βρόχου. Το σύνολο δεδομένων που καθορίζετε για τις τιμές μπορεί να είναι οποιοδήποτε τμήμα δεδομένων που περιγράφεται στο άρθρο ετικετών δεδομένων ως μια λίστα στοιχείων.

Για παράδειγμα, στο γραφικό στοιχείο αναρτήσεων ιστολογίου, το στοιχείο posts είναι μια λίστα. Kώδικας όπως ο ακόλουθος θα δημιουργήσει βρόχο σε κάθε ανάρτηση, αποτυπώνοντας τον τίτλο της καθεμίας, με ετικέτες κεφαλίδας γύρω του.

 

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

 

Παρατηρήστε πώς το στοιχείο "i" παίρνει την τιμή της κάθε ανάρτησης διαδοχικά, έτσι ώστε να μπορείτε να δείτε τον τίτλο της καθεμιάς.

Εύρος αριθμών

Μια ετικέτα βρόχου σάς επιτρέπει να επαναλάβετε ένα πλήρες εύρος αριθμών, όπως "1 έως 3", "-3 έως -9", όπου η τιμή της μεταβλητής παίρνει την τιμή του αριθμού. Το ακόλουθο παράδειγμα θα δημιουργήσει μια μη διατεταγμένη λίστα με τις τιμές 1, 2 και 3.

 

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>

 

Χαρακτηριστικό ευρετηρίου

Οι ετικέτες βρόχου διαθέτουν επίσης ένα προαιρετικό χαρακτηριστικό ευρετηρίου, το οποίο περιέχει το ευρετήριο μηδενικής βάσης της τρέχουσας επανάληψης μέσω του βρόχου.

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Number: <data:number /></li>
  </b:loop>
</ul>

 

Αυτό το παράδειγμα θα δημιουργήσει μια μη διατεταγμένη λίστα:

• Ευρετήριο: 0, Αριθμός: 9
• Ευρετήριο: 1, Αριθμός: 8
• Ευρετήριο: 2, Αριθμός: 7

Πότε να χρησιμοποιείτε τις ετικέτες if, elseif ή else

Μπορείτε να χρησιμοποιήσετε τις ετικέτες b:if, b:elseif και b:else για να εμφανίσετε συγκεκριμένο περιεχόμενο σε συγκεκριμένες περιπτώσεις και άλλο περιεχόμενο σε άλλες περιπτώσεις. Για παράδειγμα, μπορείτε να εμφανίζετε μόνο συγκεκριμένο κείμενο στην αρχική σελίδα, αλλά διαφορετικό κείμενο στις μεμονωμένες αναρτήσεις.

Μορφή

 

<b:if cond='condition'>
  [περιεχόμενο προς εμφάνιση εάν η συνθήκη είναι αληθής]
<b:elseif cond='another condition'/>
  [περιεχόμενο προς εμφάνιση εάν καμία από τις προηγούμενες συνθήκες if ή elseif δεν είναι αληθής και αυτή η συνθήκη elseif είναι αληθής]
<b:else/>
  [περιεχόμενο προς εμφάνιση εάν δεν πληρούνται οι προϋποθέσεις των συνθηκών if ή elseif]
</b:if>

 

Οι ετικέτες b:elseif και b:else είναι προαιρετικές. Χωρίς αυτές, το αποτέλεσμα θα είναι είτε το περιεχόμενο που αναφέρεται στην ενότητα b:if είτε τίποτα. Ωστόσο, η ετικέτα κλεισίματος </b:if> είναι απαραίτητη σε κάθε περίπτωση.

Στην παράμετρο "condition" μπορείτε να τοποθετήσετε οτιδήποτε κρίνεται αληθές ή μη αληθές. Ορισμένες ετικέτες δεδομένων αποτελούν οι ίδιες τιμές αληθές/μη αληθές, για παράδειγμα η ετικέτα allowComments σε μια ανάρτηση. Με άλλα τμήματα δεδομένων, μπορείτε να τα συγκρίνετε με ειδικές τιμές για να λάβετε μια τιμή αληθή ή μη αληθή. Ακολουθούν ορισμένα παραδείγματα:

• <b:if cond='data:post.showBacklinks'>
  Αληθής εάν η τρέχουσα ανάρτηση έχει οριστεί έτσι ώστε να εμφανίζει συνδέσμους αναφοράς.
• <b:if cond='data:blog.pageType == "item"'>
  Αληθής εάν η τρέχουσα σελίδα αποτελεί μια σελίδα στοιχείων (σελίδα ανάρτησης).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Αληθής εάν η τρέχουσα σελίδα αποτελεί μια σελίδα στοιχείων (σελίδα ανάρτησης) και η τρέχουσα ανάρτηση έχει οριστεί έτσι ώστε να εμφανίζει συνδέσμους επιστροφής.
• <b:if cond='data:displayname != "Fred"'>
  Αληθής εάν αυτό δεν είναι το εμφανιζόμενο όνομα του Fred.
• <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
  Αληθής αν το Fred είναι το εμφανιζόμενο όνομα ή η τρέχουσα σελίδα είναι μια στατική σελίδα (όχι σελίδα ανάρτησης).
• <b:if cond='data:post.numComments > 1'>
  Αληθής εάν η τρέχουσα ανάρτηση διαθέτει περισσότερα από ένα σχόλια.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Αληθής εάν η τρέχουσα σελίδα είναι μια συγκεκριμένη ανάρτηση ή σελίδα.

Πότε να χρησιμοποιείτε έναν διακόπτη

Μπορείτε να χρησιμοποιήσετε την ετικέτα b:switch με τον ίδιο τρόπο που θα χρησιμοποιούσατε την ετικέτα b:if που διαθέτει πολλές ετικέτες b:elseif. Το πλεονέκτημα της διακλάδωσης διακόπτη είναι ότι δεν χρειάζεται να επαναλάβετε το όνομα της μεταβλητής. Μπορείτε να τις διαβάσετε εύκολα για να δείτε τι ορίζει κάθε την περίπτωση και ποια είναι η προεπιλεγμένη περίπτωση.

Μορφή

<b:switch var='[Data expression]'>
<b:case value="[Value 1]" />
 [Έξοδος εάν η αξιολόγηση του χαρακτηριστικού var είναι ίση με την τιμή 1]
<b:case value="[Value 2]" />
 [Έξοδος εάν η αξιολόγηση του χαρακτηριστικού var είναι ίση με την τιμή 2]
[…οποιεσδήποτε άλλες τιμές]
<b:default />
 [Έξοδος εάν η αξιολόγηση του χαρακτηριστικού var δεν είναι ίση με καμία άλλη δηλωμένη ετικέτα b:case]
</b:switch>

Παράδειγμα

Αυτό το παράδειγμα δείχνει πώς μπορείτε να εξαγάγετε μια διαφορετική κεφαλίδα, ανάλογα με τον τύπο της σελίδας που αποδίδεται.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Σελίδα</h1>
<b:case value="item" />
  <h1>Ανάρτηση</h1>
<b:default />
  <h2>Blog Posts</h2>
</b:switch>

Πότε να χρησιμοποιείτε τις εκφράσεις

Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό expr για να ορίσετε τιμές χαρακτηριστικών με βάση τις τιμές στο λεξικό δεδομένων. 

Παραδείγματα

• <a expr:href='data:blog.homepageUrl'>Αρχική σελίδα</a>
  Ένας σύνδεσμος αρχικής σελίδας με το URL της αρχικής σελίδας του ιστολογίου.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS αναρτήσεων</a>
  Ένας σύνδεσμος με το URL της ροής RSS του ιστολογίου. Ο τελεστής "+" συγκεντρώνει τις δύο συμβολοσειρές.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Σχόλιο</a>
  Ένας σύνδεσμος με την κλάση "σχόλιο" όταν επιτρέπονται τα σχόλια και "χωρίς σχόλια" όταν δεν επιτρέπονται. Ο τριαδικός τελεστής (?:) χρησιμοποιεί τη δεδομένη δυαδική τιμή και επιλέγει την πρώτη τιμή (μετά το στοιχείο ?) εάν ο δυαδικός τελεστής είναι αληθής ή τη δεύτερη τιμή (μετά το στοιχείο :) εάν ο δυαδικός τελεστής δεν είναι αληθής.

Πότε να χρησιμοποιείτε μια αξιολογημένη έκφραση

Μπορείτε να χρησιμοποιήσετε την ετικέτα b:eval, για να αξιολογήσετε μια πιο περίπλοκη έκφραση αντί για μια τυπική ετικέτα δεδομένων.

Μορφή

<b:eval expr='[Expression]' />

Παραδείγματα

• min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
  Έξοδος ενός υπολογισμένου σχετικού ύψους, με βάση τη νέα τιμή πλάτους.
• <b:eval expr="data:post.labels[0].url" />
  Έξοδος του URL της ετικέτας της πρώτης ανάρτησης.
• <b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
  Έξοδος του στοιχείου "Σχόλιο" όταν επιτρέπονται τα σχόλια και "Απενεργοποιημένα σχόλια" όταν δεν επιτρέπονται. Λάβετε υπόψη ότι αυτή η έκφραση χρησιμοποιεί τον τριαδικό τελεστή.

Πότε να χρησιμοποιείτε ένα ψευδώνυμο μεταβλητής

Μπορείτε να χρησιμοποιήσετε την ετικέτα b:with για να αποθηκεύσετε προσωρινά την τιμή μιας υπολογισμένης έκφρασης και να αποφύγετε τις περίπλοκες ενσωματωμένες εκφράσεις.

Μορφή

<b:with var='myComputedValue' value='[Data expression]' />

Παραδείγματα

Για ένα περίπλοκο χαρακτηριστικό στυλ που βασίζεται σε μεταβλητές δεδομένων, μπορείτε να το υπολογίσετε πριν από το υπόλοιπο της εξόδου HTML, έτσι ώστε το ένθετο HTML να είναι ευανάγνωστο.

<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>Η κεφαλίδα μου</h1>
   </div>
 </div>
</b:with>

Λάβετε υπόψη ότι η μεταβλητή θα υπάρχει μόνο για τους θυγατρικούς κόμβους της ετικέτας b:with.

Σε αυτό το γραφικό στοιχείο, μπορείτε να δείτε παραδείγματα χρήσεων των ετικετών b:widget, b:includable (and b:include), b:if (και b:else) και b:loop.

 

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>