Vuepress | Επεκτάσεις(VER1)
Επεκτάσεις (Plugins)
Ορισμός - Περιγραφή - Αρχιτεκτονική
Οι επεκτάσεις (plugins) στο VuePress είναι πακέτα λογισμικού που επεκτείνουν τις βασικές λειτουργίες της πλατφόρμας, προσφέροντας νέες δυνατότητες και χαρακτηριστικά. Αυτά μπορεί να περιλαμβάνουν προσαρμοσμένα θέματα, βελτιωμένη διαχείριση SEO, υποστήριξη για ειδικούς τύπους περιεχομένου και πολλά άλλα. Τα plugins αποτελούν τον κεντρικό μηχανισμό επεκτασιμότητας του VuePress, επιτρέποντας την προσαρμογή της συμπεριφοράς της πλατφόρμας τόσο κατά τη διαδικασία δόμησης (build-time) όσο και στο τελικό προϊόν (client-side).
Κάθε plugin στο VuePress ακολουθεί μια συγκεκριμένη δομη και μπορεί να παρέχει λειτουργίες τόσο για το server-side (Node.js) όσο και για το client-side (browser). Η ομάδα του VuePress διαθέτει ένα επίσημο Ecosphere plugins που διασφαλίζουν συμβατότητα και ασφάλεια.
Εγκατάσταση Plugins
Οι επεκτάσεις εγκαθίστανται ως εξαρτήσεις Node.js μέσω του package manager npm και διαχειρίζονται μέσω του αρχείου package.json. Φυσικά, βρίσκονται στον κατάλογο node_modules του project. Η ενεργοποίηση και η ρύθμιση τους πραγματοποιείται στο κεντρικό αρχείο διαμόρφωσης .vuepress/config.js.
Ακολουθεί μια ταξινόμηση δημοφιλών plugins, από τα πιο βασικά και απαραίτητα έως τα πιο εξειδικευμένα. Για κάθε plugin παρέχεται η εντολή εγκατάστασης, μια σύντομη περιγραφή του σκοπού του και σύνδεσμος προς την επίσημη τεκμηρίωση για λεπτομερή οδηγίες ρύθμισης.
Caution
Προαπαιτούμενα: Για την εκτέλεση των εντολών εγκατάστασης, βεβαιωθείτε ότι βρίσκεστε στον ριζικό φάκελο του VuePress project σας (π.χ., /home/digilady/Vuepress/MyThesis).
Για να επαληθεύσετε την τρέχουσα θέση εργασίας στο terminal, εκτελέστε την εντολή pwd (print working directory).
Search
npm install -D @vuepress/plugin-search
Παρέχει αποκεντρωμένη λειτουργία αναζήτησης (client-side search) για τον ιστότοπο. Είδα ιδανικό για μικρότερες και μεσαίες τεκμηριώσεις, καθώς επιτρέπει στους χρήστες να βρίσκουν γρήγορα περιεχόμενο χωρίς να απαιτείται εξωτερική υπηρεσία. Λειτουργεί με δημιουργία ευρετηρίου όλων των σελίδων κατά τη δόμηση.
Prism.js
npm install -D @vuepress/plugin-prismjs
Ενσωματώνει τη βιβλιοθήκη Prism.js για την παροχή χρωματισμού σύνταξης (syntax highlighting) στα code blocks των Markdown αρχείων. Μια ελαφριά και ευρέως υποστηριζόμενη λύση που υποστηρίζει πάνω από 300 γλώσσες προγραμματισμού.
Shiki
npm install -D @vuepress/plugin-shiki
Χρησιμοποιεί τη βιβλιοθήκη Shiki για υψηλής πιστότητας χρωματισμό σύνταξης, ο οποίος βασίζεται στη γραμματοσειρά και τα χρωματικά σχήματα του Visual Studio Code. Αποδίδει ακριβώς όπως στο editor. Το Shiki χρησιμοποιεί το TextMate grammar για την tokenization της κάθε γλώσσας, παρέχοντας ακριβέστερα αποτελέσματα.
Copyright
npm install -D @vuepress/plugin-copyright
Προσθέτει αυτόματα πληροφορίες πνευματικών δικαιωμάτων στο περιεχόμενο της σελίδας, με δυνατότητα ρύθμισης. Χρήσιμο για προστασία πνευματικής ιδιοκτησίας. Μπορεί να ρυθμιστεί να εμφανίζει δυναμικά το τρέχον έτος και τον κάτοχο των δικαιωμάτων.
Watermark
npm install -D @vuepress/plugin-watermark
Προσθέτει υδατογράφημα στο παρασκήνιο των σελίδων. Μπορεί να χρησιμοποιηθεί για προστασία περιεχομένου ή για εμφανή branding. Το υδατογράφημα μπορεί να είναι κείμενο ή εικόνα και επιτρέπει ρύθμιση της διαφάνειας και της γωνίας περιστροφής.
Reveal.js
npm install -D @vuepress/plugin-revealjs
Ενσωματώνει το Reveal.js, επιτρέποντας τη δημιουργία παρουσιάσεων (slides) απευθείας μέσα σε Markdown αρχεία χρησιμοποιώντας ειδικό syntax. Το Reveal.js είναι μία από τις πιο δημοφιλείς βιβλιοθήκες για δημιουργία παρουσιάσεων στον browser, με support για transitions, zoom και speaker notes.
ECharts
npm install -D echarts
Ενσωματώνει τη βιβλιοθήκη ECharts για τη δημιουργία διαδραστικών και πολύπλοκων γραφημάτων και γραφικών απεικόνισης δεδομένων. Η ECharts είναι μια ισχυρή βιβλιοθήκη της Baidu που υποστηρίζει line, bar, scatter, pie charts και πολλά άλλα.
Chart.js
npm install -D chart.js
Ενσωματώνει τη βιβλιοθήκη Chart.js, μια απλή yet ευέλικτη βιβλιοθήκη για τη δημιουργία βασικών διαγραμμάτων και γραφημάτων. Είναι εύκολη στη χρήση και έχει clean API, ιδανική για γρήγορη και απλή οπτικοποίηση δεδομένων.
Markmap
npm install -D markmap-lib markmap-toolbar markmap-view
Ενσωματώνει τη βιβλιοθήκη Markmap, επιτρέποντας τη δημιουργία διαδραστικών νοητικών χαρτών (mind maps) απευθείας από ένθετο Markdown. Οι νοητικοί χάρτες δημιουργούνται αυτόματα από την ιεραρχική δομή των headers (##, ### κλπ) και υποστηρίζουν zoom και pan για εύκολη πλοήγηση.
Βιβλιογραφία
- VuePress Ecosystem. (2024). Official Plugins. https://ecosystem.vuejs.press/plugins/
- Hope Project. (2024). Markdown Enhancements - Charts & Presentations. https://theme-hope.vuejs.press/guide/markdown/
- Shiki Documentation. (2024). Shiki - A beautiful syntax highlighter. https://shiki.style/
Προς αντικατάσταση / νέα προσθήκη σε αυτέ τις συγγραφής...
npm install -D @vuepress/plugin-copyright@^2.0.0-rc.112
npm install -D @vuepress/plugin-prismjs@^2.0.0-rc.112
npm install -D @vuepress/plugin-reading-time@^2.0.0-rc.112
npm install -D @vuepress/plugin-revealjs@^2.0.0-rc.112
npm install -D @vuepress/plugin-search@^2.0.0-rc.112
npm install -D @vuepress/plugin-shiki@^2.0.0-rc.112
npm install -D @vuepress/plugin-watermark@^2.0.0-rc.112
npm install -D chart.js@^4.5.0
npm install -D echarts@^5.6.0
npm install -D markmap-lib@^0.18.12
npm install -D markmap-toolbar@^0.18.12
npm install -D markmap-view@^0.18.12
npm install -D sass-embedded@^1.89.2
npm install -D vuepress-plugin-reading-time@^0.1.1