Δημιουργήστε ένα γρήγορο αντιδραστικό ιστολόγιο με το SVELTE και SAPPER

Το Sapper είναι ένα πλαίσιο που χτίστηκε πάνω από το Svelte. Επικεντρώνεται στην ταχύτητα από το κουτί με την απόδοση διακομιστή, τη σύνδεση προφόρτισης και τη δυνατότητα δημιουργίας εργαζομένων υπηρεσιών. Σε συνδυασμό με το SVELTE, το τελικό αποτέλεσμα είναι ένα εξαιρετικά προσαρμόσιμο, ο γρήγορος χώρος αστραπής με ένα μικρό αποτύπωμα.

Σε αυτό το σεμινάριο, θα χρησιμοποιήσουμε το Sapper για να οικοδομήσουμε ένα ελαφρύ ιστότοπο blogging χρησιμοποιώντας τα svelte components (δείτε το δικό μας Πώς να ξεκινήσετε ένα blog Δημοσίευση για μερικές λιγότερο τεχνικές συμβουλές για το blogging). Το Svelte είναι ένα πλαίσιο με τη διαφορά. Αναλύει τον κώδικα κατά τη διάρκεια της κατάρτισης και δημιουργεί ένα σύνολο μονάδων στη βανίλια JavaScript, η οποία αποφεύγει την ανάγκη για ένα χρόνο εκτέλεσης. Εάν χρειάζεστε περαιτέρω βοήθεια με τις διατάξεις, ελέγξτε τη θέση μας για το πώς να πάρετε το τέλειο Διάταξη ιστότοπου . Ή για άλλες επιλογές, δείτε αυτές τις κορυφαίες Οικοδόμοι ιστοτόπων και θυμηθείτε, θα πρέπει επίσης να πάρετε το δικό σας web hosting Υπηρεσία στο σημείο.

Κατεβάστε τα αρχεία φροντιστηρίων στο FileSilo εδώ

01. Εγκαταστήστε εξαρτήσεις

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

Κατεβάστε τα αρχεία φροντιστηρίων (παραπάνω), βρείτε τα στη γραμμή εντολών και εγκαταστήστε τις εξαρτήσεις.

> npm install

02. Δημιουργήστε το διακομιστή

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

Ανοίξτε το Server.js και δημιουργήστε το διακομιστή με Express. Χρησιμοποιώντας τις συστάσεις τους, συμπεριλαμβάνουμε συμπίεση να συρρικνωθούν τα αρχεία που στέλνουμε και σέρβ Για να εξυπηρετήσετε στατικά αρχεία.

 Express ()
  .χρήση(
    συμπίεση ({όριο: 0}),
    SIRV ("Στατικό", {dev}),
    sapper.middleware ()
  )
  .listen (θύρα); 

03. Τοποθετήστε την εφαρμογή

Στην πλευρά του πελάτη, πρέπει να πούμε Sapper Πού να τοποθετήσουμε την εφαρμογή. Αυτό είναι παρόμοιο με το αντιδρά καθιστώ ή vue $ mount Μέθοδοι. Μέσα client.js, ξεκινήστε το sapper και να το τοποθετήσετε στη ρίζα & lt; div & gt; στοιχείο. Το στοιχείο αυτό περιλαμβάνεται στο αρχείο προτύπου, το οποίο θα έρθουμε αργότερα.

 Εισαγωγή * ως Sapper από το "@ sapper / app";
sapper.start ({
  Στόχος: Document.GetELEMEMEDByid (
   "ρίζα")
}) · 

04. Ξεκινήστε το διακομιστή ανάπτυξης

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

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

 & GT; npm τρέχει dev 

05. Δημιουργήστε μια διαδρομή διακομιστή

Οτιδήποτε μέσα στον κατάλογο "διαδρομές" θα μετατραπεί σε διαδρομή για την εφαρμογή. Αρχεία με το . Η επέκταση θα γίνει αυτό που ονομάζονται διαδρομές διακομιστή. Αυτές οι διαδρομές δεν έχουν UI, αλλά αντ 'αυτού ζητούνται από την αίτηση για τη λήψη δεδομένων. Στην περίπτωσή μας, θα τα χρησιμοποιήσουμε για να φορτώσουμε θέσεις ιστολογίου.

ο Διαδρομές / blog / index.json.js Το αρχείο θα δημιουργήσει το /blog.json τελικό σημείο στο διακομιστή μας. Εισαγάγετε τις αναρτήσεις του blog και δημιουργήστε κάποια json από αυτά.

 Εισαγωγές θέσεις από "./_posts.js".
conct περιεχόμενα = json.stringify (
  ports.map (post = & gt; ({
    Συντάκτης: Post.Author,
    Εικόνα: Post.Image,
    Τίτλος: Post.title,
    Slug: Post.Slug
  }))
) · 

06. Επιστρέψτε τις αναρτήσεις ιστολογίου

Δρομολόγια διακομιστή Εξαγωγή λειτουργιών που αντιστοιχούν με μεθόδους HTTP. Για παράδειγμα, για να απαντήσετε σε ένα αίτημα λήψης, θα εξάγαμε μια λειτουργία που ονομάζεται παίρνω από το αρχείο διαδρομής διακομιστή. Δημιουργώ ένα παίρνω Λειτουργία που ανταποκρίνεται με τα δεδομένα που συλλέξαμε στο προηγούμενο βήμα σε μορφή JSON. Ανοιξε http: // localhost: 3000 / blog.json Στο πρόγραμμα περιήγησης και ελέγξτε τις θέσεις που έρχονται.

 Λειτουργία εξαγωγής Λήψη (REQ, RES) {
  res.writehead (200, {
    "Τύπος περιεχομένου": "Εφαρμογή / JSON"
  });

  res.end (περιεχόμενο);
} 

07. Δημιουργία σελίδας ευρετηρίου

Οι σελίδες στο Sapper είναι τακτικά svelte components. Κάθε στοιχείο είναι ένα μόνο αρχείο με ένα .λυγερή Επέκταση και περιέχει όλη τη λογική και το στυλ για τη διαχείριση της. Κάθε javascript αυτό το στοιχείο πρέπει να τρέξει θα ζήσει μέσα σε ένα & lt; script & gt; Ετικέτα - όπως και κάθε σελίδα HTML.

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

 & lt; script & gt;
  Εισαγωγή εμπορευματοκιβωτίων από
   "../Components/container.svelte";
  Εισαγωγή postsummary από
   "../Components/PostSummary.SVELTE";
  Εξαγωγή Αφήστε τις θέσεις;
& lt; / script & gt; 

08. Fetch Blog Δημοσίευση δεδομένων

Με τη ρύθμιση της σελίδας, μπορούμε να αρχίσουμε να φέρνουμε σε αναρτήσεις ιστολογίου (ίσως να θέλετε να τα υποστηρίξετε μέσα αποθήκευση σύννεφων ). Πρέπει να το κάνουμε αυτό μόλις φορτωθεί η σελίδα. Για να το γνωρίζει ο διακομιστής αυτό και στη συνέχεια να ζητήσει αυτά τα δεδομένα όταν καθιστά τη σελίδα, πρέπει να πάει σε ξεχωριστό & lt · πλαίσιο σεναρίου = "module" & gt; ετικέτα.

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

 & lt; Σενάριο πλαίσιο = "Μονάδα" & GT;
  Εξαγωγή λειτουργίας Async λειτουργία () {
    const res = περιμένει
     αυτό.Fetch ("blog.json");
    const data = περιμένετε res.json ();
    Επιστροφή {Δημοσιεύσεις: Δεδομένα};
  }
& lt; / script & gt; 

09. Ένδειξη δημοσίευσης

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

Μπορούμε να το κάνουμε αυτό χρησιμοποιώντας ένα #καθε ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Αυτά θα επαναλάβουν ό, τι είναι μέσα στα παρένθεση για κάθε στοιχείο σε μια συστοιχία. Στο κάτω μέρος του εξαρτήματος, εκτός από τυχόν ετικέτες, προσθέστε το HTML για να εμφανίσετε τις δημοσιεύσεις.

 & lt; εμπορευματοκιβώτιο & gt;
  & lt; ul & gt;
    {#each θέσεις ως post}
      & lt; li & gt;
        & lt; postsummary {... post} / & gt;
      & lt; / li & gt;
    {/καθε}
  & lt; / ul & gt;
& lt; / εμπορευματοκιβώτιο & gt; 

10. Στυλ το δοχείο

Μπορούμε να χρησιμοποιήσουμε εξαρτήματα για να περιέχουν οποιαδήποτε επαναλαμβανόμενη λογική και να τις χρησιμοποιήσουμε όπου χρειάζεται - συμπεριλαμβάνονται οι μορφές. ο & lt; εμπορευματοκιβώτιο & gt; Το συνιστώσημα δεν κάνει τίποτα, αλλά μπορούμε να το χρησιμοποιήσουμε για να δώσουμε ένα μέγιστο πλάτος στο περιεχόμενο μέσα σε αυτό.

Ανοίγω εξαρτήματα / εμπορευματοκιβώτιο.Svelte , και προσθέστε μερικά στυλ μέσα σε ένα & lt; στυλ & gt; ετικέτα. Οποιαδήποτε στυλ που εφαρμόζουμε μέσα σε ένα εξάρτημα είναι Scoped σε αυτό το συστατικό, πράγμα που σημαίνει ότι μπορούμε να χρησιμοποιήσουμε έναν γενικό επιλογέα.

 & lt; στυλ & gt;
  {
    Περιθώριο: 0 Auto;
    Padding: 0 1Rem;
    Μέγιστο πλάτος: 50Rem;
  }
& lt; / style & gt; 

11. Καθορίστε το A & LT; SLOT & GT;

Εάν ένα συστατικό έχει σχεδιαστεί για να είναι ο γονέας σε άλλα εξαρτήματα, χρειαζόμαστε έναν τρόπο να περάσουμε αυτά τα συστατικά μέσα. ο & lt; slot & gt; Το στοιχείο κάνει ακριβώς αυτό, και μπορεί να τοποθετηθεί οπουδήποτε που έχει νόημα μέσα σε μια σημασία ενός συστατικού.

Με & lt; εμπορευματοκιβώτιο & gt; , περιτυλίγουμε το περιεχόμενο σε ένα στυλ & lt; div & gt; . Χρήση & lt; slot & gt; μεσα στην & lt; div & gt; να αφήσει τα πάντα μέσα.

 & lt; Div & GT;
  & lt; slot / & gt;
& lt; / div & gt; 

12. Εκθέστε τα posssummary στηρίγματα

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

Ανοιξε εξαρτήματα / postsummary.svelte και να ορίσετε ορισμένα χαρακτηριστικά στην κορυφή του αρχείου. Αυτά συμπληρώνονται από τον φορέα εκμετάλλευσης που προσθέσαμε στο βήμα 09.

 & lt; script & gt;
  εξαγωγή αφήστε τον συγγραφέα.
  Εξαγωγή Αφήστε την εικόνα.
  εξαγωγή αφήστε το γυμνοσάλιαγκα.
  Εξαγωγή Αφήστε τον Τίτλο;
& lt; / script & gt; 

13. Προβολή της σύνοψης Post Blog

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

Στο κάτω μέρος του εξαρτήματος, προσθέστε κάποια HTML για να δημιουργήσετε την περίληψη. Οι τάξεις σχετίζονται με τα προκαθορισμένα στυλ.

& lt; άρθρο & gt;
& lt; div class = "στυλ μετά την εικόνα" = "
 Ιστορικό - Εικόνα: URL ({image}) "/ & gt;
& lt; div class = "σώμα" & gt;
  & lt; div class = "image-image" & gt;
    & lt; img src = {συγγραφέας.Image}
     alt = {συντάκτης.Name} / & gt;
  & lt; / div & gt;
  & lt; div class = "about" & gt;
    & lt; h1 & gt; {τίτλος} & lt; / h1 & gt;
    & lt; span class = "byline" & gt; από
     {συντάκτης.Name} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / άρθρο & gt; 

14. Σύνδεση με το Blog Post

Σε αντίθεση με παρόμοια πλαίσια όπως το Next.js, το Sapper λειτουργεί με τακτικές συνδέσεις αγκύρωσης. Κατά το χρόνο κατασκευής, είναι σε θέση να ανιχνεύσει εσωτερικούς συνδέσμους, αλλά και να κάνει τις δικές της βελτιστοποιήσεις.

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

 & lt; ένα rel = "prefetch" href = "/ blog / {slug}" & gt;
  & lt; άρθρο & gt; ... / lt; / άρθρο & gt;
& lt; / a & gt; 

15. Φέρτε μια θέση με γυμνοσάλιαγκ

Το Sapper είναι σε θέση να δημιουργήσει σελίδες με βάση τις παραμέτρους URL. Στην περίπτωσή μας, συνδέουμε / Blog / Slug, που σημαίνει ότι καθιστά το στοιχείο στο / retoutes/blog/[slug].velte .

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

 & lt; Σενάριο πλαίσιο = "Μονάδα" & GT;
  Εξαγωγή Async λειτουργία
   preload ({params}) {
    const res = περιμένετε αυτό.Fetch (
     `Blog / $ {params.slug} .json`);
    const data = περιμένετε res.json ();
  }
& lt; / script & gt; 

16. Σφάλμα αν δεν βρεθεί η ανάρτηση

Σε αντίθεση με τη σελίδα ευρετηρίου, υπάρχει μια πιθανότητα να μην υπάρχει μια θέση blog στη διεύθυνση URL. Σε αυτή την περίπτωση, θα πρέπει να εμφανίσουμε ένα σφάλμα. Μαζί με φέρω , ο προφόρτιση Η μέθοδος περιλαμβάνει επίσης λάθος που αλλάζει την απάντηση σε μια σελίδα σφάλματος.

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

 εάν (res.status === 200) {
  Επιστροφή {Post: Data};
} αλλιώς {
  Αυτό.Ερκωτικό (res.status,
    data.message);
} 

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

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

 & lt; άρθρο & gt;
  & lt; εμπορευματοκιβώτιο & gt;
    & lt; div class = "τίτλος" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div class = "byline" & gt; από
       {post.author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img class = "post-image" src = {post.image} alt = "" / & gt;
     {post.html}
  & lt; / εμπορευματοκιβώτιο & gt;
& lt; / άρθρο & gt; 

18. Εμφάνιση HTML αντ 'αυτού

Κοιτάζοντας τώρα τη σελίδα, όλα εμφανίζουν σωστά εκτός από το πραγματικό περιεχόμενο μετά. Η μετατροπή MarkDown δημιουργεί HTML, αλλά βλέπουμε ότι το έντυπο ως κείμενο στην ίδια τη θέση. Το Sapper διαθέτει ένα HTML Parser που ενσωματώνεται για αυτή την περίπτωση. Τοποθέτηση @html Μπροστά από αυτό θα χρησιμοποιήσει αυτόν τον αναλυτή.

 {@ html post.html} 

19. Ορισμός σελίδας & LT; τίτλος & GT; αξία

Το blog μας λειτουργεί σωστά, αλλά υπάρχουν μερικές αλλαγές που απαιτούνται για να το τελειώσετε. Ένα από αυτά είναι να ενημερώσει το & lt; τίτλος & gt; Στη σελίδα για να απενεργοποιήσετε την καρτέλα που εμφανίζεται.

Η SVELTE υποστηρίζει ένα & lt; svelte: head & gt; στοιχείο, το οποίο ενέχει οτιδήποτε μέσα του στο & lt; κεφάλι & gt; της σελίδας. Χρησιμοποιήστε το για να ορίσετε τον τίτλο της δημοσίευσης ως & lt; τίτλος & gt; .

 & LT; SVELTE: HEAD & GT;
  & lt; τίτλος & gt; {post.title} |
   Sapper blog & lt; / τίτλος & gt;
& lt; / svelte: head & gt; 

20. Ενημέρωση του & LT; Τίτλος & GT;

Κάθε σελίδα περνά μέσα από ένα πρότυπο για να σφραγίσει το HTML για το υπόλοιπο της σελίδας. Εφόσον θα εισαχθεί οποιαδήποτε ρύθμιση όπως οι εισαγωγές γραμματοσειράς και οι μετα-ετικέτες. Ανοίξτε το πρότυπο.HTML, και προσθέστε σε ένα άγκιστρο για το περιεχόμενο του & lt; svelte: head & gt; στοιχείο από το προηγούμενο βήμα. Προσθέστε αυτό σε λίγο πριν το κλείσιμο & lt; / head & gt; ετικέτα.

 & LT; HEAD & GT;
  [...]% sapper.head%
& lt; / head & gt; το τελευταίο πράγμα που πρέπει να προσθέσουμε είναι μια διάταξη για το blog. Αντί να περιτύλιξη κάθε σελίδας σε ένα στοιχείο, ο Sapper θα αναζητήσει ένα αρχείο "_layout.svelte" για να κάνει αυτή τη δουλειά για εμάς.
Μέσα _layout.svelte, εισάγετε το & lt; header & gt; συνιστώσα και δείξτε ότι στην κορυφή κάθε σελίδας. Παρέχει μια βολική σύνδεση πίσω στην αρχική σελίδα. 

21. Προσθέστε μόνιμη κεφαλίδα

Το τελευταίο πράγμα που πρέπει να προσθέσουμε είναι μια διάταξη για το blog. Αντί να περιτύλιξη κάθε σελίδας σε ένα στοιχείο, ο Sapper θα αναζητήσει ένα _layout.svelte Αρχείο για να κάνετε αυτή τη δουλειά για εμάς. Μέσα _layout.svelte , Εισαγωγή του & LT; Header & GT; συνιστώσα και δείξτε ότι στην κορυφή κάθε σελίδας. Παρέχει μια βολική σύνδεση πίσω στην αρχική σελίδα.

 & lt; script & gt;
  Εισαγωγή κεφαλίδας από
   "../Components/header.svelte";
& lt; / script & gt;
& lt; main & gt;
  & lt; header / & gt;
  & lt; slot / & gt;
& lt; / main & gt; 

Αυτό το περιεχόμενο εμφανίστηκε αρχικά στον σχεδιαστή ιστοσελίδων.

• Web Components: Ο τελευταίος οδηγός
• 30 επεκτάσεις χρώμιο για σχεδιαστές ιστοσελίδων και devs
• 52 Εργαλεία σχεδίασης ιστοσελίδων για να σας βοηθήσουν να εργαστείτε πιο έξυπνα το 2019