5.8 Διαμόρφωση Ρυθμίσεων
5.8 Διαμόρφωση Ρυθμίσεων
5.8.1 Ο Ρόλος του Αρχείου Διαμόρφωσης
Η κεντρική μονάδα ελέγχου ολόκληρου του έργου VuePress είναι το αρχείο διαμόρφωσης, config.ts, το οποίο βρίσκεται στον κατάλογο .vuepress. Η χρήση της γλώσσας TypeScript (TS) έναντι της απλής JavaScript (JS) προσφέρει ασφάλεια τύπων (type safety), μειώνοντας τα σφάλματα και βελτιώνοντας την αυτοσυμπλήρωση (autocomplete) εντός του περιβάλλοντος ανάπτυξης (IDE). Το αρχείο αυτό εκτελείται μία φορά κατά τη διαδικασία κατασκευής (build process) του ιστότοπου και λειτουργεί ως ο κεντρικός κόμβος για: Καθολικά Μεταδεδομένα, Προσαρμογές Θέματος, Δυναμική Ενεργοποίηση Plugins και Συμπεριφοράς Κατασκευής.
5.8.2 Βασικές Παράμετροι Εφαρμογής και Γλωσσική Προσαρμογή
Οι Ρυθμίσεις Εφαρμογής (App Config) αφορούν τον πυρήνα του VuePress, ενώ η διαχείριση των αρχείων γλωσσικής προσαρμογής (Locales) είναι κρίσιμη για την υποστήριξη της γλώσσας.
| Παράμετρος | Σκοπός και Τεχνική Αιτιολόγηση |
|---|---|
base | Ορίζει τη βασική διαδρομή (base path) του ιστότοπου (π.χ., /MyThesis/). Κρίσιμο για τη σωστή λειτουργία όλων των σχετικών συνδέσμων (relative links) και των πόρων (assets) κατά τη φιλοξενία σε υποφακέλους (subfolders). |
lang | Καθορίζει την προεπιλεγμένη γλώσσα (default language) για όλο τον ιστότοπο (π.χ., el-GR). Αυτό είναι θεμελιώδες για την Προσβασιμότητα (Accessibility), καθώς καθοδηγεί τα βοηθητικά προγράμματα ανάγνωσης (Screen Readers) μέσω του HTML lang attribute. |
title | Ο κύριος τίτλος της εργασίας. Χρησιμοποιείται δυναμικά στον τίτλο του παραθύρου (browser tab) και στα Meta Tags. |
locales | Επιτρέπει τον ορισμό πολλαπλών γλωσσών. Στο MyThesis, χρησιμοποιείται για την πλήρη ελληνοποίηση (localization) του περιβάλλοντος, συμπεριλαμβανομένων των προεπιλεγμένων κειμένων του VuePress (π.χ., "Αναζήτηση" αντί για "Search"), διασφαλίζοντας την ενιαία εμπειρία χρήστη στην Ελληνική γλώσσα. |
head | Επιτρέπει την εισαγωγή προσαρμοσμένων στοιχείων στην κεφαλίδα HTML (<head>). Χρησιμοποιείται για την εισαγωγή εξωτερικών πόρων (π.χ., Google Fonts) και Meta Tags (π.χ., favicon), ολοκληρώνοντας την οπτική ταυτότητα (Branding). |
5.8.3 Παραμετροποίηση Πλοήγησης και Εμφάνισης
Το αντικείμενο theme.ts ελέγχει το UI (User Interface) και την εργονομία του Theme Hope. Η παραμετροποίηση αυτή είναι κρίσιμη για την επίτευξη τόσο της γνωστικής ευκολίας (cognitive ease) όσο και της Στρατηγικής Ταυτότητας (Branding) της MyThesis.
5.8.3.1 Στρατηγική και Τεχνική Παραμετροποίηση των Μενού
Η ρύθμιση των κύριων μενού (Navbar και Sidebar) δεν είναι απλώς αισθητική, αλλά καθορίζει τη στρατηγική πλοήγηση και την ιεράρχηση του περιεχομένου.
| Παράμετρος | Ορισμός και Στρατηγικός Σκοπός | Τεχνική Επέκταση και Αιτιολόγηση |
|---|---|---|
navbar (Γραμμή Πλοήγησης) | Ορίζεται ως στατικός πίνακας αντικειμένων (static array of objects) για σταθερή πρόσβαση στα κρίσιμα σημεία της εργασίας. Λειτουργεί ως το αμετάβλητο σημείο αναφοράς (unchanging reference point) του χρήστη. | Η ρύθμιση activeMatch επιτρέπει τον ορισμό τακτικών εκφράσεων (regular expressions), όπως π.χ. activeMatch: '^/config/', για τον καθορισμό του πότε ένας σύνδεσμος θα εμφανίζεται ως ενεργός (active), ακόμη και σε υποσελίδες. Αυτό διασφαλίζει την οπτική συνέπεια (visual consistency) της πλοήγησης. |
sidebar (Πλαϊνή Μπάρα) | Ορίζεται ως δενδρική δομή αντικειμένων που αντικατοπτρίζει την ιεράρχηση των φακέλων του έργου. Είναι ο γνωστικός χάρτης του περιεχομένου, υποστηρίζοντας τη Σταδιακή Αποκάλυψη (Progressive Disclosure). | Η ρύθμιση collapsible: true επιτρέπει την αναδίπλωση των ενοτήτων, μειώνοντας τον οπτικό φόρτο (visual clutter). Επιπλέον, η χρήση link: true για τους τίτλους της Sidebar επιτρέπει την άμεση μετάβαση στην αρχική σελίδα της ενότητας, βελτιώνοντας την ταχύτητα πλοήγησης (navigation efficiency). |
5.8.3.2 Ρυθμίσεις Εμφάνισης
Η παραμετροποίηση του στυλ είναι απαραίτητη για να αποκτήσει το VuePress τη δική του επαγγελματική ταυτότητα (Branding) και να βελτιστοποιήσει την οπτική υγιεινή (visual hygiene) για τον αναγνώστη.
| Τεχνική Παράμετρος | Σκοπός και Στρατηγική Αξία | Τεχνική Εφαρμογή και Βελτιστοποίηση |
|---|---|---|
theme-color | Καθορίζει το κυρίαρχο χρώμα (Theme Color) της εφαρμογής, όπως για συνδέσμους και έμφαση, ενισχύοντας την αισθητική ταυτότητα του έργου. | Προσδιορίζεται ένας δεκαεξαδικός κωδικός (hex code) χρώματος (π.χ., #f62b7d), ο οποίος εφαρμόζεται σε όλα τα διαδραστικά στοιχεία του UI. |
darkmode | Ενεργοποιεί τη λειτουργία Σκοτεινής Λειτουργίας (Dark Mode), κρίσιμο στοιχείο για την οπτική υγιεινή και την προσαρμογή στις προτιμήσεις του χρήστη (prefers-color-scheme). | Η ρύθμιση μπορεί να λάβει τιμές 'switch' (επιτρέπει την επιλογή του χρήστη), 'auto' (ακολουθεί τις ρυθμίσεις του λειτουργικού) ή false. |
| Προσαρμογή SCSS/Στυλ | Επιτρέπει την ανάπτυξη μοναδικών κλάσεων (Custom Classes) και την εφαρμογή του δικού μας στυλ γραμματοσειράς (font style) για το κείμενο και τον κώδικα. | Μέσω του αρχείου palette.scss, τροποποιούνται οι μεταβλητές του θέματος, όπως $font-family και $code-font-family, διασφαλίζοντας την πλήρη προσαρμογή της τυπογραφίας. |
hostname | Ορίζει το επίσημο domain (official domain) της τεκμηρίωσης, ακόμα κι αν φιλοξενείται σε υποφάκελο. | Μια κρίσιμη ρύθμιση για το SEO (Search Engine Optimization) και τη σωστή λειτουργία των κανονικών συνδέσμων (canonical links), εξασφαλίζοντας την ορθή ευρετηρίαση από τις μηχανές αναζήτησης. |
lastUpdated | Ενεργοποιεί την εμφάνιση της Ημερομηνίας Τελευταίας Ενημέρωσης (Last Updated Date) στο κάτω μέρος κάθε σελίδας. | Αυξάνει την αξιοπιστία (credibility) και τη διαφάνεια του περιεχομένου, δείχνοντας την επικαιρότητα των τεχνικών πληροφοριών. |
Note
Το lastUpdated δεν ενεργοποιήθηκε στην ανάπτυξη της εργασίας
5.8.4 Ενεργοποίηση και Παραμετροποίηση Plugins
Η δυναμική λειτουργικότητα του VuePress επιτυγχάνεται μέσω της χρήσης Plugins. Αυτά λειτουργούν ως συμπληρωματικά εργαλεία που επεκτείνουν τον πυρήνα του συστήματος, προσδίδοντας εξειδικευμένες δυνατότητες στο VuePress.
| Plugin | Σκοπός και Τεχνική Αξία |
|---|---|
@vuepress/plugin-search | Παρέχει τη βασική Λειτουργία Αναζήτησης. Η παραμετροποίησή του (π.χ., φιλτράρισμα αποτελεσμάτων) διασφαλίζει ότι η ευρεσιμότητα (Findability) εστιάζει στις πιο σχετικές πληροφορίες. |
vuepress-plugin-reading-time | Υπολογίζει τον Χρόνο Ανάγνωσης (Reading Time). Η τεχνική αξία του είναι η παροχή γνωστικής προοπτικής (cognitive foresight) για την εργονομική διαχείριση της ανάγνωσης. |
@vuepress/plugin-pwa | Μετατρέπει τον ιστότοπο σε PWA (Progressive Web App). Η ενεργοποίηση αυτού του plugin είναι απαραίτητη για την offline (εκτός σύνδεσης) χρήση της τεκμηρίωσης, μεγιστοποιώντας την προσβασιμότητα και τη χρηστικότητα. |
@vuepress/plugin-toc | Δημιουργεί τον Πίνακα Περιεχομένων (Table of Contents, TOC). Η παραμετροποίησή του επιτρέπει τον καθορισμό του ελάχιστου και μέγιστου επιπέδου επικεφαλίδων προς εμφάνιση, βελτιστοποιώντας τη μικρο-πλοήγηση εντός του άρθρου. |
@vuepress/plugin-external-link-icon | Προσθέτει αυτόματα ένα εικονίδιο εξωτερικού συνδέσμου (external link icon) στους συνδέσμους. Αυτό είναι ένα σημαντικό στοιχείο γνωστικής εργονομίας, καθώς ενημερώνει τον χρήστη για την έξοδο από το περιβάλλον του MyThesis. |
Η πλήρης κατανόηση και η ορθή διαμόρφωση του αρχείου
config.tsείναι το τεχνικό θεμέλιο που επιτρέπει στο MyThesis να είναι μια πλήρως ελεγχόμενη, παραμετροποιημένη και τεχνολογικά ανεπτυγμένη τεκμηρίωση, προσαρμοσμένη στις δικές σου προδιαγραφές.