-
Notifications
You must be signed in to change notification settings - Fork 23
Dynamic items on home page
Το δυναμικό περιεχόμενο επιτρέπει σε μια σελίδα να αλλάζει το περιεχόμενο της προκειμένου να προσφέρει ένα εύχρηστο και εκλυστικό περιβάλλον στον χρήστη. Μπορεί να βασιστεί σε πολλά στοιχεία του χρήστη για την δημιουργία του περιεχομένου της σελίδας, όπως οι προτιμήσεις του ή η ώρα που ο χρήστης άνοιξε την σελίδα.
Στην αρχική σελίδα index.html του site-gr δημιουργούνται δυναμικά τα Posts και τα Projects. Η λειτουργία του δυναμικού περιεχομένου τους βασίζεται στα αρχεία:
-
index.htmlτουsite-gr -
_includes/dynamic.htmlτου 'minimal-ionio'
Το περιεχόμενο που θα προβληθεί στην αρχική σελίδα προέρχεται από τα αρχεία που βρίσκονται στο all_collections/_posts και στο all_collections/_projects.
To αρχείο αυτό παίρνει ως είσοδο τις εξής μεταβλητές:
-
indexοπού δηλώνει το post ή project που θα επιστρέψει στην σελίδα -
idπου δηλώνει εάν το περιεχόμενο θα προέλθει από ταpostsή ταprojects -
categoryπου δηλώνει το όνομα που θα μπει πάνω από το περιεχόμενο
Το αρχείο ελέγχει το περιεχόμενο του αντίστοιχου post ή project για την ύπαρξη τίτλου, εικόνας και περίληψης.
Για την περίπτωση που ο τίτλος ή η περίληψη είναι αρκετά μεγάλα, έχει τοποθετηθεί ένα όριο στο αρχείο αυτό που έχει την εξής μορφή: <h2 class="archive__item-title">{{ f.title | truncatewords: 10}}</h2>.
Η εντολή truncatewords θέτει το όριο των λέξεων που θα εμφανιστούν στο περιεχόμενο. Περισσότερες πληροφορίες υπάρχουν εδώ.
Παράδειγμά της κλήσης του αρχείου dynamic.html:
{% include dynamic.html id="projects" category="Projects" index=0 %}
Η μεταβλητή index για το περιεχόμενο του post είναι πάντα ίση με το μηδέν (0). Αυτό επιστρέφει πάντα το πιο πρόσφατο post από τα all_collections/_posts. Αποφασίστηκε στο #107 πως είναι καλύτερο από το να επιστρέφει τυχαία posts. Κάτω από το post που εμφανίζεται υπάρχει ένα πλήκτρο "Learn More" που οδηγεί στην σελίδα με όλα τα posts.
Για τα projects στη μεταβλητή index ανατίθεται μία random τιμή. Η τιμή αυτή προκύπτει από αυτή την εντολή {% assign random = site.time | date: "%s%N" | modulo: site.projects.size %} και βασίζεται στον χρόνο που επισκέπτεται ο χρήστης την σελίδα. Κάτω από το project που εμφανίζεται υπάρχει ένα πλήκτρο "Learn More" που οδηγεί στην σελίδα με όλα τα projects.