Fast Coding

Ευαγγελία Κατσιαντώνη6/16/25Περίπου 21 λεπτάOriginal

Εισαγωγή

Η παρούσα σελίδα λειτουργεί ως αποθετήριο προτύπων (templates), βέλτιστων πρακτικών και ρυθμίσεων, σχεδιασμένων να επιταχύνουν και να τυποποιήσουν τη διαδικασία συγγραφής τεχνικού περιεχομένου.

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

Tips

Ο κώδικας των παρακάτω μορφοποιήσεων λειτουργεί μόνο στη σελίδα WBL, καθώς προέρχεται από τροποποιήσεις και προσθήκες στο vuepress theme-hope

Πρότυπα σελίδων

Frontmatter

VuePress Theme Hope ( αναλυτικές πληροφορίες των παραμέτρων )

Οι ρυθμίσεις Frontmatter ορίζονται στην αρχή κάθε αρχείου Markdown (.md) και παρέχουν μεταδεδομένα για τη συγκεκριμένη σελίδα, επηρεάζοντας την εμφάνισή της και τη λειτουργικότητα του VuePress Hope Theme.
[Περισσότερα...](/mythesis/Κυρίως%20Μέρος/04-Vuepress/vuepress-frontmatter.md

order
- Καθορίζει τη σειρά εμφάνισης της σελίδας στο πλευρικό μενού (sidebar) όταν αυτό δημιουργείται αυτόματα από τα αρχεία ενός φακέλου. Όσο μικρότερη η τιμή, τόσο ψηλότερα εμφανίζεται.
title
- Ο τίτλος της σελίδας, όπως αυτός εμφανίζεται στον browser, στο πλευρικό μενού και εντός του περιεχομένου της σελίδας.
lang
- Ορίζει τη γλώσσα της σελίδας (π.χ., el-GR για ελληνικά). Δεν είναι υποχρεωτικό αν η προεπιλεγμένη γλώσσα του site είναι η επιθυμητή.
index
- Χρησιμοποιείται για την εξαίρεση μιας σελίδας από την αυτόματη δημιουργία του πλευρικού μενού.
- Τιμές: true (για εμφάνιση), false (για απόκρυψη). Αν η σελίδα είναι ένα "index" αρχείο (π.χ. README.md) και θέλεις να εμφανίζεται μόνο η υποδομή του φακέλου, τότε το index: false είναι χρήσιμο.
description
- Μια σύντομη περιγραφή του περιεχομένου της σελίδας, χρήσιμη για SEO (search engine optimization) και για την προεπισκόπηση της σελίδας σε κάποια σημεία του θέματος.
date
- Η ημερομηνία δημιουργίας ή τελευταίας τροποποίησης της σελίδας. Εμφανίζεται συνήθως στη γραμμή πληροφοριών στο κάτω μέρος της σελίδας.
- Μορφή: YYYY-MM-DD (π.χ., 2023-10-27).
category
- Ορίζει τις κατηγορίες στις οποίες ανήκει η σελίδα. Μπορεί να είναι ένα string ή ένας πίνακας strings.
  Παράδειγμα Category

date:2025-06-15 21:00:00
category: Linux

Περισσότερες από μια κατηγορίες δημιουργούν έναν πίνακα με την ακόλουθη μορφή σύνταξης.

date:2025-06-15 21:00:00
category: 
 - Linux
 - Bash Scripting

tag
- Ορίζει τις ετικέτες (tags) της σελίδας. Μπορεί να είναι ένα string ή ένας πίνακας strings.
  Παράδειγμα Tag

date:2025-06-15 21:00:00
category: 
 - Linux
 - Bash Scripting
tag: CLI

Περισσότερες από μια κατηγορίες δημιουργούν έναν πίνακα με την ακόλουθη μορφή σύνταξης.

date:2025-06-15 21:00:00
category: 
 - Linux
 - Bash Scripting
tag: 
 - CLI
 - Automation

editLink
- Ελέγχει την εμφάνιση του συνδέσμου "Edit this page" (Τροποποίηση αυτής της σελίδας) που οδηγεί στο αποθετήριο του κώδικα (π.χ., GitHub).
- Τιμές: true (ενεργό), false (απενεργοποιημένο). Το απενεργοποιείς αν δε θες να εμφανίζεται.
isOriginal
- Εμφανίζει το κείμενο "Πρωτότυπο" στις πληροφορίες της σελίδας, υποδεικνύοντας ότι το περιεχόμενο είναι πρωτότυπο.
- Τιμές: true / false.

Με τον χαρακτήρα # πριν από κάθε ρύθμιση του frontmatter και αμέσως μετά κενό διάστημα, ακυρώνουμε, παραλείπουμε τη ρύθμιση.

Είναι οι ρυθμίσεις που γίνονται στην αρχή της κάθε σελίδας και καθορίζουν μια σειρά από ιδιότητες.

Αρχική Σελίδα Κατηγορίας

---
order: Εισάγετε-Αριθμό_μια_καλή_πρακτική_οργάνωσης_είναι_να_παίρνει_αριθμό_εκατοντάδας(100,200,300..)
index: true
icon: windows
title: Δώστε-Όνομα
description: Δώστε-Περιγραφή
date: 2025-01-06
category:
 - Δώστε-Κατηγορία

tag: 
 - Αρχκική Σελίδα Κατηγορίας

editLink: false
lastUpdated: true
pageInfo: false
breadcrumb: false
---

Βασική Σελίδα

---
# Με τον χαρακτήρα # σχολιάζουμε μια γραμμή και την εξαιρούμε από το Frontmatter
# Ο αριθμός σύμφωνα με τον οποίο γίνεται η ταξινόμηση στο Sidebar
order:  Εισάγετε-Αριθμό
index: true
title: Δώστε-Όνομα
description: Δώστε-Περιγραφή_μπορεί_και_να_παραληφθεί_εάν_το επιθυμείτε
date: 2025-03-12
category:
 - Δώστε-Κατηγορία-(διαγράψτε_εάν_δεν_υπάρχουν)
tag: 
 - Εισάγετε-Ετικέτες-(διαγράψτε_εάν_δεν_υπάρχουν)

editLink: false
pageInfo: true
navbar: true

---

Παράλειψη από Sidemenu

---
index: false
title: Πρόχειρο
icon: windows
date: 2025-10-19
category:
 -  Αναπτυξη
tag: 
 - Πρόχειρο

editLink: false
---

Ευρετήρο σελίδας

Το εισάγουμε στο τέλος κάθε σελίδας.

Γιατί να το χρησιμοποιήσω;

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

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

Μια βέλτιστη πρακτική οργάνωσης, με στόχο τη διευκόλυνση της σύνταξης κώδικα και της διαχείρισης περιεχομένου, συνίσταται στην ομαδοποίηση των πόρων σε διακριτές κατηγορίες, όπως οι σύνδεσμοι (Links), τα αρχεία εικόνων (PNG), τα αρχεία εγγράφων (PDF) και τα αρχεία προς λήψη (Downloads). Αυτή η δομημένη προσέγγιση βελτιώνει την προσβασιμότητα και την αποδοτικότητα της ανάπτυξης.

Ευρετήριο σελίδας

<!----------Start Page Index ---------------->

<!--1.Links -------->
[link_name -1-]:url της σύνδεσης που θέλουμε να εμφανίσουμε

<!--2.Png-Files -------->
[photo -1-]:διαδρομή στα docs μας/όνομα_αρχείου.png 

<!--3.Pdf-Files -------->
[file_name -1-]:διαδρομή στα docs μας/όνομα_αρχείου.pdf
f
<!--4.Download-Files-->
[file-d -1-]:διεύθυνση πηγής λήψης

<!----------End Page Index ------------------>

Έμφαση Κειμένου

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

Αυτή η τεχνική είναι κρίσιμη για την ανάδειξη βασικών πληροφοριών και τη βελτίωση της αναγνωσιμότητας. Ακολουθεί ένας αναλυτικός οδηγός με παραδείγματα κώδικα για την εφαρμογή προσαρμοσμένων στυλ CSS.

Πλάγια αραιωμένη γραφή

Για να εστιάσουμε σε ορισμένες φράσεις εντός των κειμένων, χωρίς φανταχτερά στοιχεία χρησιμοποιώντας την ίδια γραμματοσειρά, απλώς επιλέγουμε την πιο αραιωμένη απόσταση των χαρακτήρων στις λέξεις σε συνδυασμό με την πλάγια γραφή.
Η κλάση που χρησιμοποιείται είναι:

 <span class="thesis-emphasis">

Αναλυτικά ο κώδικα

Για να εστιάσουμε σε ορισμένες φράσεις εντός των κειμένων,  <span class="thesis-emphasis">χωρίς φανταχτερά στοιχεία χρησιμοποιώντας την ίδια γραμματοσειρά</span>, απλώς επιλέγουμε την πιο αραιωμένη απόσταση των χαρακτήρων στις λέξεις σε συνδυασμό με την πλάγια γραφή.
Η κλάση που χρησιμοποιείται είναι:
```html
 <span class="thesis-emphasis">
 ```

Υπογράμμιση

Ακολουθήστε το χρώμα του Θέματος ή του Κειμένου

1. Theme Color

Σε περίπτωση που θέλετε οι υπογραμμίσεις να ακολουθούν το χρώμα του θέματος, απλά αλλάξτε την κλάση από fuxia σε 'theme'

Παράδειγμα 1ο
Υπογράμμιση έντονα πλάγιου κειμένου στο χρώμα του θέματος

Υπογράμμιση <span class="text-eui-theme-i-600">έντονα πλάγιου κειμένου στο χρώμα του θέματος</span>

2. Text Color

Σε περίπτωση που θέλετε οι υπογραμμίσεις να ακολουθούν το χρώμα του κειμένου, απλά παραλείψτε στην κλάση το fuxia ή το theme

Παράδειγμα 2ο
Υπογράμμιση έντονα πλάγιου κειμένου στο χρώμα του κειμένου

Υπογράμμιση <span class="text-eui-i-600">έντονα πλάγιου κειμένου στο χρώμα του κειμένου</span>

Παράδειγμα 3ο
Υπογράμμιση πλάγιου κειμένου στο χρώμα του κειμένου

Υπογράμμιση <span class="text-eui-i">πλάγιου κειμένου στο χρώμα του κειμένου</span>

Απλή υπογράμμιση κειμένου φούξια

Κώδικας

- Απλή υπογράμμιση <span class="text-eui-fuxia">κειμένου φούξια </span>

Υπογράμμιση πλάγιου κειμένου φούξια

Κώδικας

- Υπογράμμιση <span class="text-eui-fuxia-i"> πλάγιου κειμένου φούξια</span>

Υπογράμμιση έντονα πλάγιου κειμένου φούξια

Κώδικας

- Υπογράμμιση <span class="text-eui-fuxia-i-600"> έντονα πλάγιου κειμένου φούξια</span>

Επισήμανση

Αυτή είναι μια σημαντική λέξη την οποία επισημαίνουμε με την προεπιλεγμένη σύνταξη του vuepress.

Αυτή είναι μια σημαντική λέξη (INFO! EMPTY) την οποία επισημαίνουμε με το στυλ στην πρόταση.

Αυτή είναι μια σημαντική λέξη (INFO!) την οποία επισημαίνουμε με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια σημαντική λέξη (TIP! EMPTY ) την οποία επισημαίνουμε με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια σημαντική λέξη (TIP!) την οποία επισημαίνουμε με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια σημαντική λέξη (WARNING! EMPTY ) την οποία επισημαίνουμε με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια σημαντική λέξη (WARNING!) την οποία επισημαίνουμε με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια σημαντική λέξη (CAUTION! EMPTY ) την οποία επισημαίνουμε με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια σημαντική λέξη (CAUTION!) την οποία επισημαίνουμε με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια σημαντική λέξη (THEME! EMPTY ) την οποία επισημαίνουμε με το χρώμα του θέματος στην πρόταση.

Αναλυτικά ο κώδικας

Αυτή είναι ==μια σημαντική λέξη== την οποία επισημαίνουμε με την προεπιλεγμένη σύνταξη του vuepress. 

Αυτή είναι μια <span class="text-eui-inf-em">σημαντική λέξη (INFO! EMPTY)</span> την οποία επισημαίνουμε με το στυλ στην πρόταση.

Αυτή είναι μια <span class="text-eui-inf">σημαντική λέξη (INFO!) την οποία επισημαίνουμε </span> με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια <span class="text-eui-tp-em">σημαντική λέξη (TIP! EMPTY ) την οποία επισημαίνουμε </span> με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια <span class="text-eui-tp">σημαντική λέξη (TIP!) την οποία επισημαίνουμε </span> με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια <span class="text-eui-w-em">σημαντική λέξη (WARNING! EMPTY ) την οποία επισημαίνουμε </span> με το χρώμα του θέματος στην πρόταση. 

Αυτή είναι μια <span class="text-eui-w">σημαντική λέξη (WARNING!) την οποία επισημαίνουμε </span> με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια <span class="text-eui-c-em">σημαντική λέξη (CAUTION! EMPTY ) την οποία επισημαίνουμε </span> με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια <span class="text-eui-c">σημαντική λέξη (CAUTION!) την οποία επισημαίνουμε </span> με το χρώμα του θέματος στην πρόταση.    

Αυτή είναι μια <span class="text-eui-th">σημαντική λέξη (THEME! EMPTY ) την οποία επισημαίνουμε </span> με το χρώμα του θέματος στην πρόταση.

Αυτή είναι μια <span class="text-eui-den">σημαντική λέξη (THEME! EMPTY ) την οποία επισημαίνουμε </span> με το χρώμα του θέματος στην πρόταση.

Warning

Οι παραπάνω ρυθμίσεις συγγραφής κειμένου ισχύουν Μόνο για την MyThesis καθώς είναι παραμετροποιημένο css.

Παράγραφος Τετραδίου

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

Σημείωση!
Είναι μια ωραία ιδέα για να δώσετε έμφαση σε συγκεκριμένες παραγράφους ή να προσδώσετε ένα ρετρό στυλ.

Ο κώδικας του παραδείγματος


<div class="notebook-paragraph">
  <span class="line-border">
    Αυτή είναι η πρώτη γραμμή της παραγράφου, που έχει ένα διακριτικό περίγραμμα κάτω. Το κείμενο τυλίγεται αυτόματα και κάθε οπτική γραμμή έχει τη δική της κάτω γραμμή, σαν σε σχολικό τετράδιο. <span style="color:var(--text-color);font-weight:600 !important;">Μπορείτε να προσαρμόσετε το χρώμα και το πάχος του περιγράμματος στο <em><u>inline style</u></em> για να ταιριάζει με το θέμα σας.</span> <br/><br/> <b style="color:red;">Σημείωση!</b><br/><em class="handwritten-text">Είναι μια ωραία ιδέα για να δώσετε έμφαση σε συγκεκριμένες παραγράφους ή να προσδώσετε ένα ρετρό στυλ.</em>    
  </span>
</div>

Προσοχή!

Δεν εμφανίζεται στην εκτύπωση, είναι μόνο για web ανάγνωση

Γραμμές

Για άρθρα με ιδιαίτερο στυλ, έχουν δημιουργηθεί css classes έτσι ώστε να εισάγετε γραμμές από 95% έως 5% του πλάτους. Ενδεικτικά τα παρακάτω παραδείγματα, όπου ανάλογα με τον αριθμό στην κλάση έχετε την αντίστοιχη γραμμή.

Στο χρώμα των γραμμών του θέματος

Γραμμή στο 95% του πλάτους

Γραμμή στο 90% του πλάτους

Γραμμή στο 85% του πλάτους

Γραμμή στο 70% του πλάτους

Γραμμή στο 35% του πλάτους

Ο κώδικας του παραδείγματος

Γραμμή στο 95% του πλάτους
<hr class="hr hr-95">

Γραμμή στο 90% του πλάτους
<hr class="hr hr-90">

Γραμμή στο 85% του πλάτους
<hr class="hr hr-85">

Γραμμή στο 70% του πλάτους
<hr class="hr hr-70">

Γραμμή στο 35% του πλάτους
<hr class="hr hr-35">

Σε επιλεγμένα χρώματα

Γραμμή στο 95% του πλάτους χρώματος navy-blue

Γραμμή στο 90% του πλάτους χρώματος blue

Γραμμή στο 85% του πλάτους χρώματος darkblue

Γραμμή στο 70% του πλάτους χρώματος orange

Γραμμή στο 65% του πλάτους χρώματος warmgrey

Γραμμή στο 55% του πλάτους χρώματος cyan

Γραμμή στο 45% του πλάτους χρώματος green

Γραμμή στο 35% του πλάτους χρώματος red

Ο κώδικας του παραδείγματος

Γραμμή στο 95% του πλάτους χρώματος ***<color style="color:#2c3e50;">navy-blue</color>***
<hr class="hr hr-95 hr-navy-blue">

Γραμμή στο 90% του πλάτους χρώματος ***<color style="color:blue;">blue</color>***
<hr class="hr hr-90 hr-blue">

Γραμμή στο 85% του πλάτους χρώματος ***<color style="color:darkblue;">darkblue</color>***
<hr class="hr hr-85 hr-darkblue">

Γραμμή στο 70% του πλάτους χρώματος ***<color style="color:#E95420;">orange</color>***
<hr class="hr hr-70 hr-orange">

Γραμμή στο 65% του πλάτους χρώματος ***<color style="color:#AEA79F;">warmgrey</color>***
<hr class="hr hr-65 hr-warmgrey">

Γραμμή στο 55% του πλάτους χρώματος ***<color style="color:#02A5F0;">cyan</color>***
<hr class="hr hr-55 hr-cyan">

Γραμμή στο 45% του πλάτους χρώματος ***<color style="color:green;">green</color>***
<hr class="hr hr-45 hr-green">

Γραμμή στο 35% του πλάτους χρώματος ***<color style="color:red;">red</color>***
<hr class="hr hr-35 hr-red">

Ειδοποιήσεις (Alerts)

Important

This is important text

Info

This is information text

Tips

This is tip text

Warning

This is warning text

Caution

This is caution text

Note

This is note text

Ο κώδικας του παραδείγματος

> [!important]
> This is important text

> [!info]
> This is information text

> [!tip]
> This is tip text

> [!warning]
> This is warning text

> [!caution]
> This is caution text

> [!note]
> This is note text

Εικόνες

Για την εισαγωγή εικόνων στο VuePress ακολουθούμε την καθαρή δομή των καταλόγων των άρθρων και στους καταλόγους των εικόνων.

Τι σημαίνει αυτό ;

Έστω ότι η βιβλιοθήκη μας βρίσκεται εγκατεστημένη στον κατάλογο src όπως είναι εξ' ορισμού. Το όνομά της είναι για παράδειγμα mythesis και εκεί μέσα είναι τα διάφορα άρθρα (χύμα αρχεία md) μαζί με τα κατηγοριοποιημένα άρθρα (οι κατηγορίες είναι οι κατάλογοι), όπου υπάρχουν μέσα άλλα άρθρα.

mythesis
- άρθρο_1.md
- άρθρο_2.md
- άρθρο_3.md
- ΚΑΤΗΡΟΡΙΑ 1
  - άρθρο_1.4
  - άρθρο_1.5
- ΚΑΤΗΡΟΡΙΑ 2
  - Υποκατηγορία 1
    - άρθρο_2.1.6
    - άρθρο_2.1.7
  - Υποκατηγορία 2
- ΚΑΤΗΡΟΡΙΑ 3

Την ίδια δομή πρέπει να σχεδιάσουμε και στο φάκελο assets για τα διάφορα αρχεία (pdf) και πολυμέσα (εικόνες, βίντεο, ήχος), όπου θα είναι συνημμένα στη σελίδα μας, μέσα σε έναν κεντρικό φάκελο.

Για το λόγο αυτό εντός του φακέλου assets δημιουργούμε (για το παράδειγμα mythesis) τον αρχικό κατάλογο mythesis και εντός αυτού τους τρεις αντίστοιχους pdf, img, media. Εντός αυτών ακολουθώντας τη δομή που αναφέραμε παραπάνω δημιουργούμε τις κατηγορίες με τις υπο κατηγορίες τους.

Οπότε οποιοδήποτε τύπο αρχείου της συγγραφής μας το μεταφορτώνουμε στον αντίστοιχο.

Η οργάνωση αυτή βοηθάει την εύκολη μετακίνηση άρθων, μαζί με τα συνημμένα του

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

Αυτόματος υπολογισμός διαστάσεων: Στην περίπτωση αυτή οι διαστάσεις καταλαμβάνουν το πλήρος πλάτος της σελίδας και αναλογικά με αυτό ρυθμίζεται το ύψος. (παράδειγμα 1)
Καθορισμός ύψους: Όπως είναι κατανοητό εδώ θέλουμε να ορίσουμε το ύψος της εικόνας, αυτό θα συμπαρασύρρει τον αυτόματο υπολογισμό του πλάτους. (παράδειγμα 2) Προσοχή στις μικρές οθόνες των tablet και κινητών, εάν ο υπολογισμός είναι μεγαλύτερος από τη διάσταση της οθόνης μας η εικόνα θα πάρει το πλάτος της οθόνης αναγκαστικά και θα μοιάζει παραμορφωμένη.
Καθορισμός πλάτους: Εδώ καθορίζουμε το πλάτος της εικόνας μας είτε στο 100% που είναι το ίδιο με την περίπτωση 1 είτε σε μικρότερη διάσταση οπότε το ύψος ακολουθεί αυτόματο υπολογισμό. (παράδειγμα 3)

Το πιο ασφαλές για καλογρμμένα άρθρα είναι ο καθορισμός του πλάτους και μάλιστα με τη μορφή ποσοστού όχι σε ορισμό pixel

παράδειγμα 1 | Αυτόματος υπολογισμός διαστάσεων

παράδειγμα 2 | Καθορισμός ύψους 350px

στην ουσία μετά την πλήρη διαδρομή του αρχείου ορίσζουμε τη διάσταση με τη μορφή {height=350} όπου 350 είναι η αριθμητική τιμή και height ή width είναι το ύψος ή το πλάτος.

::: center
![](/assets/mythesis/img/mainpart/01-linux/Εικόνα-1_Κουμπί_New_στο_VirtualBox.png){height=350} 
:::

παράδειγμα 3 | Καθορισμός πλάτους στο 50% της σελίδας


::: center
![](/assets/mythesis/img/mainpart/01-linux/Εικόνα-1_Κουμπί_New_στο_VirtualBox.png){width=50%} 
:::

Υπερσύνδεσμοι (Links)

Οι εξωτερικοί σύνδεσμοι που εμφανίζονται στα κείμενα εξ' ορισμού του Vuepress ανοίγουν σε νέα καρτέλα.
Σε αντίθεση όλοι οι [εσωτερικοί σύνδεσμοι], σελίδες εντός του site ανοίγουν στην ίδια καρτέλα του περιηγητή.
Υπάρχουν περιπτώσεις που θέλετε να κάνετε τους [εσωτερικούς συνδέσμους]{target="_blank"} να ανοίγουν σε ξεχωριστή καρτέλα, για να διευκολύνετε τους αναγνώστες.

Σύνταξη υπέρ-συνδέσμων

Με Ευρετηριοποίηση

Όπως αναφέρθηκε παραπάνω, η χρήση ευρετηρίου σε μια σελίδα είναι μια πολύ καλή πρακτική στη διαχείριση κειμένων.
Δημιουργώντας τα links εκεί μπορούμε να τα εμφανίζουμε σε κάθε σημείο του κειμένου όπου αναφέρεται ακριβώς η ίδια λέξη ή φράση.
Εντός των " " μπορούμε να εισάγουμε κείμενο το οποίο θα εμφανίζεται, όπως το <title> στο <href> όταν περνάει ο δείκτης του ποντικιού και κάνει ελάχιστα στάση. Φυσικά μπορούμε να τα παραλήψουμε όπως στο 2ο Παράδειγμα, στην παραπάνω περιγραφή.

Παράδειγμα 1ο | Εξωτερικός

[εξωτερικοί σύνδεσμοι]: https://digilady.gr "κάντε κλικ για να περιηγηθείτε στην εξωτερική σελίδα digilady.gr"

Παράδειγμα 2ο | Εσωτερικός

[εσωτερικοί σύνδεσμοι]: /mythesis/Κυρίως Μέρος/08 Βιβλιογραφίαbibliography.html

Για να ανοίξετρε τους [εσωτερικούς συνδέσμους]{target="_blank"} σε ξεχωριστή καρτέλα, αρκεί εντός του κειμένου συγγραφής, να προστεθεί ή σύνταξη {target="_blank"}

Παράδειγμα 3ο | Εσωτερικός σε Νέα Καρτέλα

Για να ανοίξετρε τους **[εσωτερικούς συνδέσμους]{target="_blank"}** σε ξεχωριστή καρτέλα, αρκεί εντός του κειμένου συγγραφής, να προστεθεί ή σύνταξη `{target="_blank"}`

Ενσωμάτωση στη ροή του κειμένου

Παράδειγμα 1ο | Εξωτερικός
Κάθε εξωτερικός σύνδεσμος που εμφανίζεται στα κείμενα εξ' ορισμού του Vuepress ανοίγει σε νέα καρτέλα.

Κάθε [εξωτερικός σύνδεσμος](https://digilady.gr "κάντε κλικ για να περιηγηθείτε στην εξωτερική σελίδα digilady.gr") που εμφανίζεται στα κείμενα εξ' ορισμού του ***Vuepress*** ανοίγει σε νέα καρτέλα.

Παράδειγμα 2ο | Εσωτερικός
Σε αντίθεση ο [εσωτερικός σύνδεσμος](/mythesis/Κυρίως Μέρος/08 Βιβλιογραφίαbibliography.md "κάντε κλικ για να μεταβείτε στη βιβλιογραφία"), σελίδα εντός του site, ανοίγει στην ίδια καρτέλα του περιηγητή.

Σε αντίθεση ο [εσωτερικός σύνδεσμος](/mythesis/Κυρίως Μέρος/08 Βιβλιογραφίαbibliography.md ""κάντε κλικ για να μεταβείτε στη βιβλιογραφία"), σελίδα εντός του site, ανοίγει στην ίδια καρτέλα του περιηγητή.

Παράδειγμα 3ο | Εσωτερικός σε Νέα Καρτέλα
Υπάρχουν περιπτώσεις που θέλετε να κάνετε τους [εσωτερικούς συνδέσμους](/mythesis/Κυρίως Μέρος/08 Βιβλιογραφίαbibliography.md "κάντε κλικ για να μεταβείτε στη βιβλιογραφία, ανοίγοντας μια ξεχωριστή καρτέλα"){target="_blank"} να ανοίγουν σε ξεχωριστή καρτέλα, για να διευκολύνετε τους αναγνώστες.

Υπάρχουν περιπτώσεις που θέλετε να κάνετε τους [εσωτερικούς συνδέσμους](/mythesis/Κυρίως Μέρος/08 Βιβλιογραφίαbibliography.md "κάντε κλικ για να μεταβείτε στη βιβλιογραφία, ανοίγοντας μια ξεχωριστή καρτέλα"){target="_blank"} να ανοίγουν σε ξεχωριστή καρτέλα, για να διευκολύνετε τους αναγνώστες.

Πίνακες

Απλός Πίνακας

To	Action	From
22/tcp	ALLOW IN	Anywhere
22/tcp (v6)	ALLOW IN	Anywhere (v6)

Ο κώδικας σε μορφή md

|To| Action|From|
|---|---|---|
|22/tcp|ALLOW IN|Anywhere|
|22/tcp (v6)|ALLOW IN|Anywhere (v6)|

Καθορισμός Στοίχισης

Α/Α	Αριστερά	Κέντρο	Δεξιά
1	Δίκτυα LAN	Πρωτόκολλο	Δίκτυα WAN
2	IP Διευθύνσεις	DHCP	DNS
3	VPN	Σύνδεση	Firewall
4	Συσκευές Switch	NAT	Proxy Server

Ο κώδικας σε μορφή md

|Α/Α  | Αριστερά         | Κέντρο         | Δεξιά            |
|:---:|:-----------------|:--------------:|-----------------:|
|1	  | Δίκτυα LAN       | Πρωτόκολλο     | Δίκτυα WAN       |
|2	  | IP Διευθύνσεις   | DHCP           | DNS              |
|3	  | VPN              | Σύνδεση        | Firewall         |
|4	  | Συσκευές Switch  | NAT            | Proxy Server     |

Επεξήγηση

Η πρώτη γραμμή περιέχει τους τίτλους των στηλών.
Η δεύτερη γραμμή καθορίζει την ευθυγράμμιση:
- :--------- για αριστερή ευθυγράμμιση στήλης.
- :-------: για κεντρική ευθυγράμμιση στήλης.
- ---------: για δεξιά ευθυγράμμιση στήλης.
Οι επόμενες γραμμές περιέχουν τα δεδομένα του πίνακα.

Για τη στοίχιση χρησιμοποιείται το στοιχείο :

Μορφή HTML

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

Α/Α	Αριστερά	Κέντρο	Δεξιά	Πλήρης Στοίχιση
1	Δίκτυα LAN	Πρωτόκολλο	Δίκτυα WAN	Συσκευές Router
2	IP Διευθύνσεις	DHCP	DNS	Firewall
3	VPN	Σύνδεση	Υποδομή	Συσκευές Switch
4	NAT	Proxy Server	Προστασία	Δίκτυα VPN

Ο κώδικας σε μορφή html

<table>
  <thead>
  <tr>
    <th style="text-align: center;">Α/Α</th>
    <th style="text-align: left;">Αριστερά</th>
    <th style="text-align: center;">Κέντρο</th>
    <th style="text-align: right;">Δεξιά</th>
    <th style="text-align: justify;">Πλήρης Στοίχιση</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td style="text-align: center;">1</td>
    <td style="text-align: left;">Δίκτυα LAN</td>
    <td style="text-align: center;">Πρωτόκολλο</td>
    <td style="text-align: right;">Δίκτυα WAN</td>
    <td style="text-align: justify;">Συσκευές Router</td>
  </tr>
  <tr>
    <td style="text-align: center;">2</td>
    <td style="text-align: left;">IP Διευθύνσεις</td>
    <td style="text-align: center;">DHCP</td>
    <td style="text-align: right;">DNS</td>
    <td style="text-align: justify;">Firewall</td>
  </tr>
  <tr>
    <td style="text-align: center;">3</td>
    <td style="text-align: left;">VPN</td>
    <td style="text-align: center;">Σύνδεση</td>
    <td style="text-align: right;">Υποδομή</td>
    <td style="text-align: justify;">Συσκευές Switch</td>
  </tr>
  <tr>
    <td style="text-align: center;">4</td>
    <td style="text-align: left;">NAT</td>
    <td style="text-align: center;">Proxy Server</td>
    <td style="text-align: right;">Προστασία</td>
    <td style="text-align: justify;">Δίκτυα VPN</td>
  </tr>
  </tbody>
</table>

Πίνακας συγγραφής

Ο παρακάτω πίνακας είναι αυτόματα στοιχισμένος στο κέντρο της σελίδας και περιέχει ετικέτα, όπως τα σχήματα και οι εικόνες. Επίσης μια άλλη πινελιά επαγγελματισμού στη συγγραφή προσθέτει το διακριτικό background που τον περικλύει

Α/Α	Πρόγραμμα (Εφαρμογή)	Ubuntu	macOS	Windows
1	Visual Studio Code	✓	✓	✓
2	Sublime Text	✓	✓	✓
3	Atom	✓	✓	✓
4	Notepad++			✓
5	Vim	✓	✓	✓

Πίνακας - Προγράμματα επεξεργασίας κώδικα

Ο κώδικας του παραδείγματος

<div class="table-info">

| Α/Α | Πρόγραμμα (Εφαρμογή) | Ubuntu | macOS | Windows |
|:---:|:---|:---:|:---:|:---:|
| 1 | **[Visual Studio Code](https://code.visualstudio.com/)** | ✓ | ✓ | ✓ |
| 2 | **[Sublime Text](https://www.sublimetext.com/)** | ✓ | ✓ | ✓ |
| 3 | **[Atom](https://flight-manual.atom-editor.cc/getting-started/sections/installing-atom/)** | ✓ | ✓ | ✓ |
| 4 | **[Notepad++](https://notepad-plus-plus.org/)** | | | ✓ |
| 5 | **[Vim](https://www.vim.org/)** | ✓ | ✓ | ✓ |

<p><strong>Πίνακας</strong> - Προγράμματα επεξεργασίας κώδικα</p>

</div>

Markmap

Στο διάγραμμα που ακολουθεί παριστάνεται γραφικά η δομή της πτυχιακής μου εργασίας.

Ο κώδικας μου

````markmap
---
title: MyThesis
markmap:
  colorFreezeLevel: 2
---

# MyThesis

## **DL-Thesis-UTH**
   [VM DL-Thesis-UTH](http://192.168.1.70:10110/mythesis/)

### **Os** | Ubuntu Server 24.04LTS
  
### Users <!-- markmap: fold -->
- root
- digilady

### Apps
- Webmin
- Glances
- LXD <!-- markmap: fold -->
  - DEV Server <!-- markmap: fold -->
    - Nodejs v20.19.4
    - Vuepress v.2.0.0 Theme Hope
    - Scripts (start, build, Deploy)
  - WEB Server
  - FILE Server
    
    
### Settings <!-- markmap: fold -->
- ssh
  - port: 31213
  - root access: no
  

## **LAB-Thesis-UTH**


### **Os** <!-- markmap: fold -->
  Ubuntu Server 24.04LTS 

- Users 
  - root
  - labrat

- Settings  
  - ssh (default)
  
- Hands on Keyboard
  


````

chartjs

Πηγή:https://gs.statcounter.com/os-market-share/desktop/worldwide/

Ραβδοδιάγραμμα

Ο κώδικας

<center>

Πηγή:[https://gs.statcounter.com/os-market-share/desktop/worldwide/](https://gs.statcounter.com/os-market-share/desktop/worldwide/)

</center>

::: chartjs Ραβδοδιάγραμμα


```json
{
  "type": "bar",
  "data": {
    "labels": ["Windows", "macOS",  "Linux", "Chrome OS", "Άγνωστο / Άλλο"],
    "datasets": [
      {
        "label": "% Εγκατάσταση λειτουργικών συστημάτων",
        "data": [71.83, 13.62, 3.9, 1.02, 9.62],
        "backgroundColor": [
          "rgba(255, 99, 132, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(153, 102, 255, 0.2)",
          "rgba(255, 159, 64, 0.2)"
        ],
        "borderColor": [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
          "rgba(255, 159, 64, 1)"
        ],
        "borderWidth": 1
      }
    ]
  },
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true
      }
    }
  }
}
```

PDF files

Σύνταξη με iframe

Ο κώδικάς μου

<Badge text="Σύνταξη με iframe" type="tip" vertical="middle" />
<iframe class="pdf" src="/assets/mythesis/pdf/Διαβιβαστικό-Απόφασης-Πιστοποίησης.pdf" />

Σύνταξη με pdf

Ο κώδικάς μου

<Badge text="Σύνταξη με pdf" type="important" vertical="middle" />

<PDF url="/assets/mythesis/pdf/Διαβιβαστικό-Απόφασης-Πιστοποίησης.pdf" no-toolbar />

Google Search

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

Συγκεκριμένη Λέξη
Στο παράδειγμα, πατώντας το σύνδεσμο Βιβλιογραφία γίνεται αναζήτηση στη Google για τη λέξη frontmatter

Βιβλιογραφία

Demo

## [Βιβλιογραφία](https://www.google.com/search?q=frontmatter)

Συγκεκριμένη φράση
Στο παράδειγμα, πατώντας το σύνδεσμο Βιβλιογραφία γίνεται αναζήτηση στη Google για τη φράση vuepress frontmatter

Βιβλιογραφία

εναλλακτικά για την κράτηση κενού χαρακτήρα αντι του - χρησιμοποιείται και το %20
Στο παράδειγμα, πατώντας το σύνδεσμο Βιβλιογραφία γίνεται αναζήτηση στη Google για τη φράση vuepress frontmatter

Βιβλιογραφία

Demo

## [Βιβλιογραφία](https://www.google.com/search?q=vuepress+frontmatter)

εναλλακτικά για την κράτηση κενού χαρακτήρα αντι του `-` χρησιμοποιείται και το `%20`
Στο παράδειγμα, πατώντας το σύνδεσμο **Βιβλιογραφία** γίνεται αναζήτηση στη Google για τη φράση `vuepress frontmatter`
## [Βιβλιογραφία](https://www.google.com/search?q=vuepress%20frontmatter)

Πολλαπλές Λέξεις Κειμένου
Στο παράδειγμα, πατώντας το σύνδεσμο Βιβλιογραφία γίνεται αναζήτηση στη Google για τη φράση VuePress Ecosystem frontmatter', 'VuePress theme hope frontmatter

Βιβλιογραφία

Επίσημη Τεκμηρίωση VuePress Hope Theme: https://theme-hope.vuejs.press/config/frontmatter/

Demo

## [Βιβλιογραφία](https://www.google.com/search?q=VuePress+Ecosystem+frontmatter%20VuePress-theme-hope+frontmatter%20gohugo+frontmatter)


1. *Επίσημη Τεκμηρίωση VuePress Hope Theme:* [https://theme-hope.vuejs.press/config/frontmatter/][1]

Υποστηριζόμενα Aliases για το Syntax Highlighting

Κατηγορία	Γλώσσα (Language)	Aliases (Το Κλειδί)
Web/Frontend	JavaScript	javascript, js
Web/Frontend	TypeScript	typescript, ts
Web/Frontend	HTML/XML	markup, html, xml
Web/Frontend	CSS	css
Web/Frontend	SCSS/SASS	scss, sass
Server/Backend	Python	python, py
Server/Backend	Java	java
Server/Backend	C/C++	c, cpp
Διαμόρφωση	Apache Config	apacheconf
Διαμόρφωση	Nginx Config	nginx
Διαμόρφωση	Shell/Bash	bash, sh
Διαμόρφωση	JSON	json
Διαμόρφωση	YAML	yaml, yml
Γενικά	Markdown	markdown, md
Γενικά	C-like	clike (Για γλώσσες τύπου C)

[εσωτερικοί σύνδεσμοι]: /mythesis/Κυρίως Μέρος/08 Βιβλιογραφίαbibliography.md
[εσωτερικούς συνδέσμους]: /mythesis/Κυρίως Μέρος/08 Βιβλιογραφίαbibliography.md "κάντε κλικ για να μεταβείτε στη βιβλιογραφία, ανοίγοντας μια ξεχωριστή καρτέλα"