Xem Nhiều 5/2022 # Tự Làm Blog Với Keystone Cms Và Next.js # Top Trend

Xem 12,078

Cập nhật thông tin chi tiết về Tự Làm Blog Với Keystone Cms Và Next.js mới nhất ngày 24/05/2022 trên website Doisonggiaitri.com. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Cho đến thời điểm hiện tại, bài viết này đã đạt được 12,078 lượt xem.

--- Bài mới hơn ---

  • Local Storage, Session Storage Và Cookie
  • Leaflet.js Là Thư Viện Bản Đồ Đơn Giản Nhất Bạn Sẽ Tìm Thấy / Bộ Công Cụ
  • Điều Gì Khiến Meteor Js 1.3 Trở Nên Đặc Biệt?
  • Minify Javascript/css Là Gì? Công Cụ Nén Js/css Trên WordPress
  • Masonry Layout Trong Thiết Kế Web Là Gì?
  • KeystoneJS là một trong những CMS ( Content Management System) tốt nhất được viết bằng Nodejs. Với CLI riêng, nó sẽ auto-generated tất cả các thành phần cần thiết để tạo ra 1 trang web với tính tùy biến cao, dễ dàng chỉnh sửa tùy theo nhu cầu sử dụng. Tuy nhiên, về phần frontend thì Keystone đang sử dụng template engine và chúng ta sẽ tìm hiểu cách tích hợp React vào trong CMS này.

    Next.js is a popular React SSR (Server Side Rendering) framework which allows you to build an SEO friendly React website with minimal configuration. With server side rendering, you can set SEO meta tags on the server before returning to the client. So search engine can crawl the data without running any Javascript, which is especially important for blogs and news websites.

    Chuẩn bị

    node & npm đã được cài đặt từ trước

    Cài đặt KeystoneJS

    Tiếp đến, cài đặt Keystone với Yeoman

    npm install yo -g npm install -g generator-keystone yo keystone

    Sau khi cài đặt thành công thì sẽ hiện bảng thông báo như này:

    … và cấu trúc thư mục sẽ như thế này:

    Chúng ta sẽ thử chạy project bằng

    node keystone

    Cài đặt Next.JS

    Chúng ta sẽ cài đặt một số module sau:

    npm install next react react-dom axios --save

    Tiếp theo, chúng ta xoá 2 thư mục templates & public, thay thế bằng pages , components và static. Project sẽ trông như thế này:

    Tiếp theo, ở file chúng tôi thêm dòng này để init next

    // Next app const next = require('next'); const dev = process.env.NODE_ENV !== 'production'; const app = next({ dev });

    // Start Next app app.ppare() // Setup common locals for your templates. The following are required for the // bundled templates and layouts. Any runtime locals (that should be set uniquely // for each request) should be added to ./routes/middleware.js keystone.set('locals', { _: require('lodash'), env: keystone.get('env'), utils: keystone.utils, editable: keystone.content.editable, }); // Load your project's Routes keystone.set('routes', require('./routes')); // Conp the navigation bar in Keystone's Admin UI keystone.set('nav', { posts: , users: 'users', }); keystone.start(); });

    Tiếp đến ở folder routes, xoá folder views và file middleware.js

    Ở routes/index.js, chúng ta sẽ viết api từ keystone rồi để chúng tôi xử lí vụ routes

    const keystone = require('keystone'); // Setup Route Bindings // Next request handler const handle = nextApp.getRequestHandler(); const Post = keystone.list('Post'); Post.model .find() .where('state', 'published') .sort('-publishedDate') .exec(function (err, results) { if (err) throw err; res.json(results); }); }); return handle(req, res); }); };

    Sau khi sửa chúng tôi và routes/index.js, chạy lại keystone

    Tiếp đến là phần React, tạo thử 1 trang chúng tôi ở /pages

    import { Component } from 'react'; class App extends Component { render() { return ( ); }; } export default App;

    Implement React và Keystone

    Tạo một bài viết mới ở localhost:3000/keystone

    Tiếp đến ở folder /pages, tạo 1 file mới tên là _document.js, thêm thư viện Boostrap:

    import Document, { Head, Main, NextScript } from 'next/document' import flush from 'styled-jsx/server' export default class MyDocument extends Document { static getInitialProps({ renderPage }) { const { html, head, errorHtml, chunks } = renderPage() const styles = flush() return { html, head, errorHtml, chunks, styles } } render() { return ( ) } }

    Call api ở App.js

    import { Component } from 'react'; import axios from 'axios' class App extends Component { static async getInitialProps() { let response = await axios.get('http://localhost:3000/api/posts'); return { posts: chúng tôi }; } render() { return ( .header { padding: 16px 16px; } .content { padding: 16px 16px; } .post { margin-bottom: 16px; } return ( ); }) } ); }; } export default App;

    Tada !

    ====================

    Bài viết được dịch từ https://medium.com/@victor36max/how-to-build-a-react-driven-blog-with-next-js-and-keystonejs-cae3cd9fb804

    --- Bài cũ hơn ---

  • Jd Là Gì? Cách Viết Mô Tả Công Việc Trong Tuyển Dụng Ra Sao?
  • Jd, Jp, Js, Cv, Kpa, Kpi Là Gì? Ý Nghĩa Của Chúng Cho Việc Tuyển Dụng Nhân Sự
  • Quản Trị Bằng Jd Và Js
  • Hàm Và Tạo Hàm (Function) Trong Javascript
  • Top 3+ Phần Mềm Đọc File Pdf Miễn Phí Tốt Nhất 2022 Cho Máy Tính
  • Bạn đang xem bài viết Tự Làm Blog Với Keystone Cms Và Next.js trên website Doisonggiaitri.com. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!

  • Web hay
  • Links hay
  • Push
  • Chủ đề top 10
  • Chủ đề top 20
  • Chủ đề top 30
  • Chủ đề top 40
  • Chủ đề top 50
  • Chủ đề top 60
  • Chủ đề top 70
  • Chủ đề top 80
  • Chủ đề top 90
  • Chủ đề top 100
  • Bài viết top 10
  • Bài viết top 20
  • Bài viết top 30
  • Bài viết top 40
  • Bài viết top 50
  • Bài viết top 60
  • Bài viết top 70
  • Bài viết top 80
  • Bài viết top 90
  • Bài viết top 100