Viết blog bằng HTML là gì?

Xin chào, Hôm nay chúng ta sẽ xem cách chúng ta có thể dễ dàng tạo một trang web viết blog chỉ bằng HTML, CSS và JS. Không có thư viện nào khác. Chúng tôi cũng sẽ sử dụng kho lưu trữ Firebase để lưu trữ/truy xuất dữ liệu blog

Đây là một dự án rất tốt để thực hành phát triển full-stack. Khi tôi bắt đầu phát triển web, tôi luôn nghĩ làm cách nào để tạo trang web viết blog của riêng mình. Và hôm nay, tôi tự hào rằng tôi đã cố gắng tạo ra trang blog. Trang web của chúng tôi rất đơn giản và có các tính năng như

1. Các trang Blog động
2. Có một trình soạn thảo dành riêng cho blog
3. Bạn có thể thêm/tạo bao nhiêu blog tùy thích
4. Bạn có thể thêm Tiêu đề, đoạn văn và Hình ảnh vào bài đăng trên blog
5. Đã đọc thêm phần blog cũng

Để xem bản demo hoặc bạn muốn có video hướng dẫn mã hóa đầy đủ. Bạn có thể xem hướng dẫn bên dưới

Video hướng dẫn

Tôi đánh giá cao nếu bạn có thể ủng hộ tôi bằng cách đăng ký kênh youtube của tôi

Vì vậy, không lãng phí thêm thời gian, hãy xem cách viết mã này

Mã số

Vì đây là một nút. ứng dụng web js. Chúng tôi cần NPM và Node. js để bắt đầu, vì vậy hãy đảm bảo rằng bạn đã cài đặt chúng trong hệ thống của mình

Vì vậy, hãy bắt đầu với cấu trúc thư mục của nó

Cấu trúc thư mục

Đây là cấu trúc thư mục của chúng tôi

Vì vậy, hãy làm cho máy chủ của chúng tôi

Người phục vụ

Mở tệp dự án (thư mục gốc) trong trình chỉnh sửa mã của bạn. Mở Terminal và chạy

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

5

Điều này sẽ khởi tạo NPM cho dự án của chúng tôi. Sau đó cài đặt một số gói bằng cách này

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

6

-

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

7 - là tạo máy chủ
-

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

8 - là xử lý tải lên
-

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

9 - là chạy máy chủ liên tục

một khi gói được cài đặt. Bạn sẽ thấy một tệp

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

0 bên trong thư mục gốc của mình. Mở nó ra

Và thay đổi nó

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

1 thành

"scripts": {
    "start":"nodemon server.js"
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ chúng tôi đã sẵn sàng để tạo một máy chủ. Tạo một tệp mới bên trong thư mục gốc của bạn, đặt tên là

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

2. Và mở nó

Đầu tiên nhập tất cả các gói mà chúng tôi cần

const express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Và sau đó lưu trữ đường dẫn thư mục

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

3 của bạn bên trong một biến

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau đó tạo máy chủ

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

4. Và đặt đường dẫn thư mục

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

3 thành đường dẫn tĩnh. Cũng sử dụng

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

6 để cho phép tải lên tệp

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau đó, tạo một tuyến đường về nhà và gửi phản hồi tệp

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

7. Và chạy máy chủ của bạn trên cổng 3000

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chạy máy chủ của bạn trước

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

8. Và máy chủ của chúng tôi đã hoàn thành. Hãy tạo trang chủ ngay bây giờ

Trang chủ

Viết cấu trúc HTML cơ bản và liên kết tệp

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

9. Sau đó bắt đầu bằng cách tạo một thanh điều hướng

Trang Chủ. html

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trang Chủ. css

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đầu ra

Bây giờ tạo tiêu đề

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đầu ra

Bây giờ là yếu tố cuối cùng cho trang chủ của chúng tôi. Tạo phần thẻ blog và tạo một thẻ, khi chúng ta tạo những thẻ này bằng JS sau

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

const express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đầu ra

Bây giờ, bạn có thể nhận xét phần tử

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

00. Trang chủ của chúng tôi đã hoàn thành. Vào bên trong máy chủ và tạo tuyến đường

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

01

Người phục vụ. js

const express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau này, hãy tạo trình chỉnh sửa của chúng tôi

biên tập viên

Trong liên kết

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

02 cả tệp

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

9 và tệp

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

04. Và bên trong thẻ body bắt đầu bằng cách tạo biểu ngữ div

const express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

const express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đầu ra

Và sau đó tạo các trường văn bản cho tiêu đề blog, bài viết

const express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

const express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đầu ra

Và cuối cùng, hãy tạo nút xuất bản bằng nút tải lên hình ảnh

const express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

const express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đầu ra

Chúng tôi đã hoàn thành việc tạo kiểu cho trình chỉnh sửa của mình. Bây giờ hãy làm cho nó hoạt động. Liên kết

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

05 với tệp HTML. Và mở nó

Bắt đầu bằng cách chọn tất cả các yếu tố mà chúng ta cần

const express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau khi chọn tất cả các yếu tố. Thêm sự kiện

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

06 vào đầu vào tải lên của chúng tôi và xử lý tải lên

const express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');

9

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ hãy tạo hàm

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

07

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

10

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Vì vậy, đây là cách chúng tôi có thể làm cho quá trình tải lên của mình hoạt động. Nhưng bây giờ nó sẽ không hoạt động vì chúng tôi chưa thực hiện lộ trình

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

08 của mình. Đối với

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

2 mở đó và tạo tuyến đường

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

08

Người phục vụ. js

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

11

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bằng cách này, chúng tôi đã hoàn thành. Bạn có thể kiểm tra tải lên của mình có hoạt động hay không. Như bạn có thể nhận thấy rằng chúng tôi đang gọi

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

11 nhưng chúng tôi vẫn chưa thực hiện điều đó. Vì vậy, hãy làm cho nó

biên tập viên. js

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

12

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chức năng này sẽ cho phép bạn chèn định dạng văn bản cho hình ảnh của mình, ví dụ: nếu tôi tải lên

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

12 thì chức năng này sẽ chèn nội dung như thế này vào trường bài viết của chúng tôi

Vì vậy, cho đến bây giờ chúng tôi cũng đã hoàn thành việc tải lên của mình. Bây giờ, hãy truy cập firebase của bạn và tạo một dự án viết blog. Và thiết lập firebase cho bạn. Bạn có thể tham khảo video này để thiết lập

Sau khi thiết lập các biến firebase trong liên kết

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

14 với tệp bên trong

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

02 ở trên

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

05 như thế này

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

13

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau đó lại đi vào bên trong

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

05. Và làm cho nút xuất bản hoạt động

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

14

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đây là cách chúng tôi tạo một tài liệu bên trong firebase firestore. Sau đó, trình chỉnh sửa của chúng tôi hoàn toàn hoạt động. Nếu bạn kiểm tra nó, bạn sẽ thấy bạn đang được chuyển hướng đến blog route. Nhưng chúng tôi đã không thực hiện tuyến đường đó. Đối với lần mở

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

2 đó. Và thực hiện tuyến đường

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

19 và cả tuyến đường

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

20

người phục vụ. js

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

15

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ, bạn sẽ thấy tệp

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

21. Vì vậy, lần cuối cùng trước tiên chúng ta hãy tạo trang blog. lần này liên kết cả 3 tệp CSS với

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

21 và sao chép thanh điều hướng từ

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

7 sang trang này

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

16

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

17

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đầu ra

Trang này có tất cả các cấu trúc phần tử. Chúng tôi sẽ cung cấp nội dung của nó một cách linh hoạt với JS

Liên kết các tập lệnh firebase,

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

14 và

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

25 với nó. Và mở

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

25

Bắt đầu bằng cách trích xuất id blog từ URL. và lấy dữ liệu từ firestore

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

18

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Khi chúng tôi có dữ liệu blog. Làm cho

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

27

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

19

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trong chức năng trên, chúng tôi đã chọn tất cả các phần tử chúng tôi cần và đặt nội dung của chúng.
Và cuối cùng. Chúng tôi đang gọi hàm

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

28 vì chúng tôi cần định dạng bài viết của mình.

Tạo hàm ________ 228 và định dạng văn bản bài báo mà chúng tôi nhận được từ cửa hàng cứu hỏa

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau đó, hãy so sánh những gì chúng tôi nhập trong trình chỉnh sửa của mình và những gì chúng tôi sẽ thấy trong blog của mình

biên tập viên

Blog

Vậy là blog của chúng ta cũng xong. Bây giờ chúng tôi muốn có đề xuất hoặc đọc thêm yếu tố trong trang blog của chúng tôi

Vì vậy, hãy mở

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

21 và tạo một cái

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau đó, sao chép phần tử

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

31 từ

app.get('/', (req, res) => {
    res.sendFile(path.join(initial_path, "home.html"));
})

app.listen("3000", () => {
    console.log('listening......');
})

7 sang

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

21

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Và như bạn có thể thấy, chúng tôi đang sử dụng các yếu tố giống nhau để đọc thêm và viết blog. Vì vậy, chúng tôi sẽ sử dụng cùng một chức năng JavaScript để tạo cả hai yếu tố này. Vì vậy, đối với tệp liên kết

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

34 đến

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

21 ở trên

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

25

Và điều cuối cùng là mở

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

34 và viết mã này

const app = express();
app.use(express.static(initial_path));
app.use(fileupload());

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đó là cách chúng tôi làm thẻ blog của chúng tôi. Chúng ta xong rồi

Đầu ra - Trang chủ. html

Đầu ra - Blog. html

À chính nó đấy. Tôi hy vọng bạn hiểu mỗi và tất cả mọi thứ. Nếu bạn có nghi ngờ hoặc tôi đã bỏ lỡ điều gì đó, hãy cho tôi biết trong phần bình luận

HTML trong viết blog là gì?

Định nghĩa của blog là gì?

CSS trong viết blog là gì?

Ví dụ blog là gì?