Skip to content
This repository was archived by the owner on Jun 25, 2020. It is now read-only.

Dynamic items on home page

Konstantinos Chorianopoulos edited this page Jun 12, 2020 · 1 revision

Γενικά Στοιχεία και Μεθοδολογίες

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

Δυναμικά Posts και Projects

Στην αρχική σελίδα index.html του site-gr δημιουργούνται δυναμικά τα Posts και τα Projects. Η λειτουργία του δυναμικού περιεχομένου τους βασίζεται στα αρχεία:

  • index.html του site-gr
  • _includes/dynamic.html του 'minimal-ionio'

Το περιεχόμενο που θα προβληθεί στην αρχική σελίδα προέρχεται από τα αρχεία που βρίσκονται στο all_collections/_posts και στο all_collections/_projects.

Δομή του dynamic.html αρχείου

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 %}

Posts & Projects στο index.html

Η μεταβλητή 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.

Σχετικά issues: #107, #78

Clone this wiki locally