Αρχική ρύθμιση θέματος

1. Για να ξεκινήσετε, εγκαταστήστε πρώτα όλα τα απαραίτητα πακέτα με npm install ή pnpm install και έπειτα εκτελέστε μια αρχική έκδοση με npm run build ή pnpm build για να βεβαιωθείτε ότι η ρύθμιση λειτουργεί.
2. Αντιγράψτε την έκδοση του Pagefind (για την αναζήτηση στον ιστότοπο) ώστε να είναι διαθέσιμη στο περιβάλλον ανάπτυξης. Αυτό διαφέρει ανάλογα με το λειτουργικό σας σύστημα. Έχω δημιουργήσει μερικές εντολές που βοηθούν.
   • Για Windows, εκτελέστε npm run winsearch
   • Για OSX ή Linux, εκτελέστε npm run osxsearch
3. Στη συνέχεια, θα θελήσετε να διαμορφώσετε τη ρύθμιση i18n του ιστότοπού σας (μία γλώσσα ή περισσότερες). Απλώς εκτελέστε την εντολή npm run docs:config-i18n και ακολουθήστε τις οδηγίες του σεναρίου για να ολοκληρώσετε τη ρύθμιση!
4. Τώρα μπορείτε να διαμορφώσετε τον ιστότοπο όπως εσείς θέλετε!

Εισαγωγές στον κώδικα

Έχω δημιουργήσει μερικές ξεναγήσεις κώδικα που σας βοηθούν να γνωρίσετε τη βάση κώδικα. Θα χρειαστείτε την επέκταση Code Tour για να τις δείτε στο VSCode ή σε άλλο IDE.

Δομή του κώδικα

Ο κώδικας είναι οργανωμένος με τα περισσότερα στοιχεία κάτω από τον κατάλογο src/docs. Έτσι είναι εύκολο να τοποθετήσετε ολόκληρο τον φάκελο σε ένα υπάρχον έργο και να προσθέσετε λειτουργικότητα τεκμηρίωσης μέσα σε λίγα λεπτά.

Επιλογές διαμόρφωσης

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

Ρυθμίσεις ιστότοπου

Το αρχείο src/docs/config/siteSettings.json.ts χρησιμοποιείται για τη διαμόρφωση των ρυθμίσεων του ιστότοπου. Σε αυτές περιλαμβάνονται στοιχεία όπως αν θα ενεργοποιηθούν οι μεταβάσεις προβολής, αν θα ενεργοποιηθούν τα εφέ κίνησης και αν θα εμφανίζονται κουμπιά αντιγραφής συνδέσμου στις επικεφαλίδες της τεκμηρίωσης.

Δεδομένα ιστότοπου

Το αρχείο src/docs/config/[language]/siteData.json.ts χρησιμοποιείται για τη διαμόρφωση των δεδομένων του ιστότοπου. Σε αυτά περιλαμβάνονται στοιχεία όπως ο τίτλος του ιστότοπου, η περιγραφή, οι σύνδεσμοι κοινωνικών δικτύων και η προεπιλεγμένη εικόνα.

Δεδομένα πλοήγησης

Διαμορφώστε τα δεδομένα πλοήγησης για την επάνω μπάρα στο αρχείο src/docs/config/[language]/navData.json.ts.

Διάταξη πλευρικής μπάρας

Διαμορφώστε τη σειρά των ενοτήτων της τεκμηρίωσής σας στο αρχείο src/docs/config/[language]/sidebarNavData.json.ts.

Robots

Για να βλέπουν τα robots, όπως αυτό της Google, το σωστό sitemap, θα χρειαστεί να επεξεργαστείτε το αρχείο public/robots.txt ώστε να χρησιμοποιεί το domain του ιστότοπού σας.

Περισσότεροι πόροι

Γενικές πληροφορίες για το Astro

Το Astro αναζητά αρχεία .astro ή .md στον κατάλογο src/pages/. Κάθε σελίδα εκτίθεται ως διαδρομή με βάση το όνομα του αρχείου της.

Δεν υπάρχει κάτι ιδιαίτερο στον κατάλογο src/components/, αλλά εκεί μας αρέσει να τοποθετούμε τα στοιχεία Astro/React/Vue/Svelte/Preact.

Οποιαδήποτε στατικά στοιχεία, όπως εικόνες, μπορούν να τοποθετηθούν στον κατάλογο public/. Χρησιμοποιώ επίσης συχνά το src/assets για εικόνες, όταν αξιοποιώ τα assets του Astro για βελτιστοποίηση εικόνων.

Εντολές

Όλες οι εντολές εκτελούνται από τη ρίζα του έργου, μέσα από ένα τερματικό:

Εντολή	Ενέργεια
npm install	Εγκαθιστά τις εξαρτήσεις
npm run dev	Ξεκινά τοπικό διακομιστή ανάπτυξης στο localhost:4321
npm run build	Δημιουργεί τον ιστότοπο παραγωγής στο ./dist/
npm run preview	Κάνει τοπική προεπισκόπηση της έκδοσης πριν από την ανάπτυξη
npm run astro ...	Εκτελεί εντολές CLI όπως astro add, astro check
npm run astro -- --help	Παρέχει βοήθεια για τη χρήση του CLI του Astro

Θέλετε να μάθετε περισσότερα;

Μη διστάσετε να δείτε την τεκμηρίωση ή να μπείτε στον διακομιστή Discord.