Τα εργαλεία χαμηλού κώδικα όπως το WordPress απλοποιούν τη διαδικασία δημιουργίας ιστολογίου. Μπορείτε να χρησιμοποιήσετε ένα προκατασκευασμένο θέμα και να αρχίσετε να γράφετε αναρτήσεις ιστολογίου μέσα σε λίγες ώρες. Εάν θέλετε περισσότερο έλεγχο στον κώδικά σας και έχετε λίγο χρόνο στα χέρια σας, είναι καλύτερα να δημιουργήσετε το ιστολόγιό σας από την αρχή. Μπορείτε ακόμη να χρησιμοποιήσετε ένα πλαίσιο όπως το Next.js για να απλοποιήσετε τη διαδικασία.

Μάθετε πώς να δημιουργείτε ένα απλό ιστολόγιο Next.js που αποδίδει αναρτήσεις με σήμανση.

Δημιουργία έργου Next.js

Το Next.js είναι ένα πλαίσιο React που απλοποιεί τον τρόπο δημιουργίας εφαρμογών. Παρέχει πολλά εργαλεία και διαμορφώσεις εκτός συσκευασίας, επιτρέποντάς σας να ξεκινήσετε να γράφετε κώδικα αμέσως μετά την εγκατάστασή του.

Ο απλούστερος τρόπος για να ξεκινήσετε με το Next.js είναι εκτελώντας την εντολή δημιουργίας-επόμενης εφαρμογής σε ένα τερματικό:

npx δημιουργώ-Επόμενο-σημείωση εφαρμογής-ιστολόγιο

Αυτή η εντολή δημιουργεί ένα έργο Next.js που περιέχει όλα τα απαραίτητα αρχεία για εκκίνηση.

instagram viewer

Πρώτα πρώτα, καθαρίστε το index.js αρχείο να μοιάζει με αυτό:

εισαγωγή Κεφάλι από 'επόμενο/κεφάλι'
εισαγωγή στυλ από "../styles/Home.module.css"
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
ΕΠΙΣΤΡΟΦΗ (
<div className={styles.container}>
<Κεφάλι>
<τίτλος>Δημιουργία Επόμενης Εφαρμογής</title>
<μετα όνομα="περιγραφή" περιεχόμενο="Δημιουργήθηκε από τη δημιουργία επόμενης εφαρμογής" />
<σύνδεσμος rel="εικόνισμα" href="/favicon.ico" />
</Head>
</div>
 )
}

Δημιουργήστε αναρτήσεις ιστολογίου Markdown

Το ιστολόγιο θα αποδοθεί αρχεία σήμανσης αποθηκευμένο τοπικά στο φάκελο του έργου. Έτσι, δημιουργήστε έναν νέο φάκελο στη ρίζα που ονομάζεται περιεχόμενο για να αποθηκεύσετε τα αρχεία. Σε αυτόν τον φάκελο, δημιουργήστε ένα νέο αρχείο που ονομάζεται create-active-link-nextjs.md και προσθέστε τα εξής:


τίτλος: Πώς να δημιουργώ ένας ενεργός Σύνδεσμοςσε Nextjs
περιγραφή: Προσαρμογή ενεργών συνδέσμων χρησιμοποιώντας userRouter()
είναι Δημοσιευμένο: αληθής
Ημερομηνία δημοσίευσης: 22/07/2022
ετικέτες:
 - Επόμενο

## Κυρίως περιεχόμενο

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

Ανάλυση αρχείων Markdown

Για κάθε ανάρτηση ιστολογίου, πρέπει να αναλύετε το περιεχόμενο σήμανσης και το μπροστινό θέμα. Για το Markdown, χρησιμοποιήστε το react-markdown και για τα δεδομένα μπροστινής ύλης, χρησιμοποιήστε τη φαιά ουσία.

Το React-markdown είναι ένα στοιχείο React που βασίζεται σε παρατήρηση που μετατρέπει με ασφάλεια τη σήμανση σε HTML. Η βιβλιοθήκη φαιάς ύλης αναλύει την μπροστινή ύλη και μετατρέπει το YAML σε αντικείμενο.

Εκτελέστε την ακόλουθη εντολή στο τερματικό για να εγκαταστήσετε το react-markdown και τη φαιά ουσία.

npm εγκαθιστώ react-markdown φαιά ύλη

Σε έναν νέο φάκελο που ονομάζεται utils, δημιουργήστε ένα νέο αρχείο που ονομάζεται md.js. Θα δημιουργήσετε βοηθητικές συναρτήσεις που επιστρέφουν περιεχόμενο ανάρτησης ιστολογίου σε αυτό το αρχείο.

Λάβετε όλες τις δημοσιευμένες αναρτήσεις

Στο md.js, προσθέστε τον ακόλουθο κώδικα για να επιστρέψετε όλες τις αναρτήσεις στο φάκελο περιεχομένου.

εισαγωγή fs από "fs"?
εισαγωγή μονοπάτι από "μονοπάτι";
εισαγωγή ύλη από "φαιά ουσία";
εξαγωγήσυνθ getPath = (φάκελος: συμβολοσειρά) => {
ΕΠΙΣΤΡΟΦΗ path.join (process.cwd(), `/${folder}`); // Λήψη πλήρους διαδρομής 
}


εξαγωγήσυνθ getFileContent = (όνομα αρχείου: συμβολοσειρά, ντοσιέ:string) => {
συνθ POSTS_PATH = getPath (φάκελος)
 επιστροφή fs.readFileSync (path.join (POSTS_PATH, όνομα αρχείου), "utf8");
};


εξαγωγήσυνθ getAllPosts = (φάκελος: συμβολοσειρά) => {
συνθ POSTS_PATH = getPath (φάκελος)
ΕΠΙΣΤΡΟΦΗ fs
 .readdirSync (POSTS_PATH) // λήψη αρχείων στον κατάλογο
 .φίλτρο((διαδρομή) => /\\.md?$/.test (διαδρομή)) // μόνο αρχεία .md
 .map((filename) => { // αντιστοίχιση σε κάθε αρχείο
συνθ πηγή = getFileContent (Όνομα αρχείου, φάκελος); // ανακτήστε τα περιεχόμενα του αρχείου
συνθ γυμνοσάλιαγκα = fileName.replace(/\\.md?$/, ""); // πάρτε το γυμνοσάλιαγκα από το όνομα αρχείου
συνθ { data } = ύλη (πηγή); // εξαγωγή μπροστινού υλικού
ΕΠΙΣΤΡΟΦΗ {
 frontmatter: δεδομένα,
 γυμνοσάλιαγκας: γυμνοσάλιαγκας,
 };
 });
};

Στη συνάρτηση getAllPosts():

  • Λάβετε την πλήρη διαδρομή προς το φάκελο περιεχομένου χρησιμοποιώντας τη μονάδα διαδρομής.
  • Λάβετε τα αρχεία στο φάκελο περιεχομένου χρησιμοποιώντας τη μέθοδο fs.readdirSync().
  • Φιλτράρετε τα αρχεία ώστε να περιλαμβάνουν μόνο αρχεία με επέκταση .md.
  • Ανακτήστε τα περιεχόμενα κάθε αρχείου, συμπεριλαμβανομένου του μπροστινού υλικού χρησιμοποιώντας τη μέθοδο χάρτη.
  • Επιστρέψτε έναν πίνακα που περιέχει το μπροστινό υλικό και το slug (το όνομα του αρχείου χωρίς την επέκταση .md) κάθε αρχείου.

Για να λάβετε μόνο τις δημοσιευμένες αναρτήσεις, μπορείτε να φιλτράρετε όλες τις αναρτήσεις και να επιστρέψετε μόνο εκείνες των οποίων το κλειδί isPublished στο μπροστινό θέμα έχει οριστεί σε true.

εξαγωγήσυνθ getAllPublished = (φάκελος: συμβολοσειρά) => {
συνθ αναρτήσεις = getAllPosts (φάκελος)
συνθ δημοσιευμένο = posts.filter((post) => {
ΕΠΙΣΤΡΟΦΗ post.frontmatter.isΔημοσιεύτηκε αληθής
 })
ΕΠΙΣΤΡΟΦΗ δημοσίευσε
 }

Στο md.js, προσθέστε τη συνάρτηση getSinglePost() για να ανακτήσετε τα περιεχόμενα μιας ανάρτησης.

εξαγωγήσυνθ getSinglePost = (slug: string, ντοσιέ:string) => {
συνθ πηγή = getFileContent(`${slug}.md`, ντοσιέ);
συνθ { δεδομένα: frontmatter, περιεχόμενο } = θέμα (πηγή);
ΕΠΙΣΤΡΟΦΗ {
 πρωτοπαλίκαρο,
 περιεχόμενο,
 };
};

Αυτή η συνάρτηση καλεί τη συνάρτηση getFileContent() για να λάβει τα περιεχόμενα κάθε αρχείου. Στη συνέχεια, χρησιμοποιώντας το πακέτο γκρι-ύλης, η συνάρτηση ανακτά το μπροστινό υλικό και το περιεχόμενο σήμανσης.

Εμφάνιση όλων των αναρτήσεων ιστολογίου

Το Next.js παρέχει διαφορετικές επιλογές απόδοσης, μία από τις οποίες είναι η στατική δημιουργία. Η στατική δημιουργία είναι ένας τύπος προ-απόδοσης όπου το Next.js δημιουργεί όλες τις σελίδες HTML κατά τη διάρκεια του χρόνου κατασκευής. Το χρησιμοποιείτε για να δημιουργήσετε γρήγορες στατικές σελίδες.

Ελέγξτε το επίσημη τεκμηρίωση Nextjs για περισσότερες πληροφορίες σχετικά με την απόδοση.

Το Next.js θα προ-αποδόσει μια σελίδα κατά το χρόνο δημιουργίας χρησιμοποιώντας τα στηρίγματα που επιστρέφονται από τη συνάρτηση getStaticProps. Σε αυτήν την περίπτωση, τα στηρίγματα θα είναι μια σειρά από δημοσιευμένες αναρτήσεις.

εξαγωγήσυνθ getStaticProps = ασυγχρονισμός () => {
 const posts = getAllPublished("αναρτήσεις");
ΕΠΙΣΤΡΟΦΗ {
 στηρίγματα: { αναρτήσεις },
 };
};

Τροποποιήστε το αρχείο index.js για να εμφανιστεί μια λίστα με αναρτήσεις ιστολογίου.

εισαγωγή Κεφάλι από "επόμενο/κεφάλι";
εισαγωγή Σύνδεσμος από "επόμενο/σύνδεσμος";
εισαγωγή { getAllPublished } από "../utils/md";
λειτουργίαΣπίτι({ αναρτήσεις }) {
ΕΠΙΣΤΡΟΦΗ (
<div className={styles.container}>
<Κεφάλι>
<τίτλος>Δημιουργία Επόμενης Εφαρμογής</title>
<μετα όνομα="περιγραφή" περιεχόμενο="Δημιουργήθηκε από τη δημιουργία επόμενης εφαρμογής" />
<σύνδεσμος rel="εικόνισμα" href="/favicon.ico" />
</Head>
<div>
 {posts.map((post) => (
<κλειδί άρθρου={post.slug}>
<Π>[ {post.frontmatter.tags.join(", ")} ]</Π>
`αναρτήσεις/${post.slug}`}>
<ένα>{post.frontmatter.title}</ένα>
</Link>{""}
<Π>{post.frontmatter.description}</Π>
</article>
 ))}
</div>
</div>
 );
}


εξαγωγήσυνθ getStaticProps = ασυγχρονισμός () => {
 const posts = getAllPublished("περιεχόμενο");


ΕΠΙΣΤΡΟΦΗ {
 στηρίγματα: { αναρτήσεις },
 };
};
εξαγωγήΠροκαθορισμένο Σπίτι;

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

Εμφάνιση ανάρτησης ιστολογίου

Όπως αναφέρθηκε, τα ονόματα αρχείων των αναρτήσεων θα χρησιμοποιηθούν ως διαδρομές URL. Αυτά τα μονοπάτια είναι επίσης δυναμικά, επομένως πρέπει να τα δημιουργήσετε κατά τη διάρκεια του χρόνου κατασκευής. Το Next.js σάς επιτρέπει να το κάνετε αυτό χρησιμοποιώντας τη συνάρτηση getStaticPaths().

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

εξαγωγήσυνθ getStaticPaths = ασυγχρονισμός () => {
 μονοπάτια const = getAllPublished("αναρτήσεις".map(({ γυμνοσάλιαγκας }) => ({ params: { slug } }));
ΕΠΙΣΤΡΟΦΗ {
 μονοπάτια,
 εναλλακτική: ψευδής,
 };
};

Σημειώστε ότι χρησιμοποιείτε τα δεδομένα αναρτήσεων που επιστρέφονται από τη βοηθητική συνάρτηση getAllPublished() που δημιουργήσατε πριν.

Ρυθμίζετε επίσης το εναλλακτικό σε false, το οποίο επιστρέφει a Σφάλμα 404 για μονοπάτια που δεν υπάρχουν.

Το getStaticPaths() χρησιμοποιείται συνήθως με το getStaticProps() το οποίο ανακτά τα περιεχόμενα κάθε ανάρτησης με βάση τις παραμέτρους.

εξαγωγήσυνθ getStaticProps = ασυγχρονισμός ({ params }) => {
συνθ ανάρτηση = αναμένω getSinglePost (params.slug, "posts");
ΕΠΙΣΤΡΟΦΗ {
 props: { ...post },
 };
};

Για να αποδώσετε το markdown σε HTML, χρησιμοποιήστε το react-markdown.

εισαγωγή ReactMarkdown από 'react-markdown'
εισαγωγή { getAllPosts, getSinglePost } από "../../utils/md";
συνθ Δημοσίευση = ({ περιεχόμενο, πρωτοπόρος }) => {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Π>{frontmatter.tags.join(', ')}</Π>
<h2>{frontmatter.title}</h2>
<σπιθαμή>{frontmatter.publishedDate}</span>
<ReactMarkdown>{περιεχόμενο}</ReactMarkdown>
</div>
 );
};

Αυτό το στοιχείο θα αποδώσει τα περιεχόμενα κάθε ανάρτησης ιστολογίου και την αντίστοιχη διεύθυνση URL.

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

Διαμόρφωση του ιστολογίου Next.js Markdown

Μέχρι στιγμής, έχετε δημιουργήσει ένα ιστολόγιο σήμανσης Next.js που εμφανίζει μια λίστα με αναρτήσεις ιστολογίου και αποδίδει τα περιεχόμενα αυτής της ανάρτησης. Για να κάνετε το ιστολόγιο να φαίνεται πιο ωραίο, θα πρέπει να προσθέσετε στυλ CSS.

Το Next.js έχει καλή υποστήριξη CSS και μπορείτε να επιλέξετε να χρησιμοποιήσετε βιβλιοθήκες CSS-in-JS όπως στοιχεία με στυλ. Εάν προτιμάτε να διαχωρίσετε το CSS από το JS, μπορείτε να χρησιμοποιήσετε μονάδες CSS.