Tôi có thể đưa html vào tệp javascript không?

Khi bạn đang làm việc với HTML, kiểu và tập lệnh và bạn đang làm việc trên một dự án lớn, tôi thực sự khuyên bạn nên tách các tệp trong các thư mục khác nhau. Có tất cả các tệp CSS của bạn trong một thư mục và tất cả các tệp JavaScript của bạn trong một thư mục khác. Làm tương tự cho các tệp HTML của bạn

Để liên kết tệp CSS với tệp HTML của bạn, bạn phải viết tập lệnh tiếp theo trên tệp HTML của mình bên trong thẻ đầu

Nếu bạn có tệp CSS trong cùng thư mục với tệp HTML của mình, bạn chỉ cần viết tên tệp CSS của mình, như thế này (Tôi khuyên bạn nên đặt các tệp trong các thư mục khác nhau được liên kết theo loại)

Nếu bạn đang làm việc với chủ đề bootstrap, bạn có thể thêm liên kết của tệp

Để liên kết tệp Js với HTML của bạn, bạn chỉ cần thêm nguồn của tập lệnh bên trong thẻ body hoặc bên ngoài;

Nếu bạn có tệp Js trong cùng thư mục với tệp HTML của mình, bạn chỉ cần viết tên tệp Js của mình, như thế này (Tôi khuyên bạn nên đặt các tệp trong các thư mục khác nhau được liên kết theo loại)

Tôi vô cùng ngạc nhiên rằng HTML chưa bao giờ có bất kỳ cách nào để bao gồm các tệp HTML khác trong đó. Dường như không có bất cứ điều gì trên đường chân trời giải quyết nó. Tôi đang nói về việc bao gồm trực tiếp, chẳng hạn như lấy một đoạn HTML và ghép nó vào một đoạn khác. Ví dụ: trường hợp sử dụng cho phần lớn toàn bộ internet, bao gồm đầu trang và chân trang cho tất cả các trang

...

   

   Content

   

...

Nhân tiện, điều đó không có thật. Tôi chỉ ước nó là

Mọi người đã tìm đến các ngôn ngữ khác để giải quyết vấn đề này cho họ mãi mãi. Đó là tiền xử lý HTML, theo một nghĩa nào đó. Rất lâu trước khi chúng tôi tiền xử lý CSS của mình, chúng tôi đã sử dụng các công cụ để thao tác HTML của mình. Và chúng tôi vẫn vậy, bởi vì ý tưởng bao gồm hữu ích trên hầu hết mọi trang web trên thế giới

Sử dụng PHP

Bạn có thể sử dụng PHP để thay thế không?

...

   

   Content

   

...

Điều này sẽ thực hiện bao gồm ở cấp máy chủ, làm cho yêu cầu cho nó xảy ra ở cấp hệ thống tệp trên máy chủ, do đó, nó sẽ nhanh hơn nhiều so với giải pháp phía máy khách

Sử dụng Gulp

Điều gì thậm chí còn nhanh hơn bao gồm phía máy chủ? . Gulp có nhiều bộ xử lý có thể làm điều này. Một là gulp-file-gồm

Điều đó sẽ trông như thế này

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

Và bạn sẽ xử lý nó như thế nào

var fileinclude = require('gulp-file-include'),
  gulp = require('gulp');
 
gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

Có vẻ như plugin cụ thể này có các tính năng ưa thích nơi bạn có thể chuyển các biến vào phần bao gồm, giúp bạn có thể tạo các thành phần điều khiển dữ liệu nhỏ

Sử dụng tiếng càu nhàu

Đây là chức năng của plugin grunt-bake. Bạn sẽ định cấu hình Grunt để xử lý HTML của mình

grunt.initConfig({
    bake: {
        your_target: {
            files: {
                "dist/index.html": "app/index.html",
            }
        }
    }
});

Sau đó, HTML của bạn có thể sử dụng cú pháp đặc biệt này để bao gồm

...

   

   Content

   

...

Sử dụng tay lái

Tay lái có một phần

Bạn đăng ký chúng

Handlebars.registerPartial('myPartial', '{{name}}')

Sau đó sử dụng chúng

{{> myPartial }}

Ngoài ra còn có các tính năng ưa thích này cho phép đánh giá và truyền dữ liệu. Bạn vẫn sẽ cần một bộ xử lý để chạy nó, có thể là thứ gì đó như gulp-handlebars

Nói về các ngôn ngữ tạo khuôn mẫu sử dụng dấu ngoặc nhọn… Ria mép

Sử dụng Pug

Pug là một bộ tiền xử lý HTML có cú pháp hoàn toàn mới cho HTML ngắn gọn hơn một chút. Nó có bao gồm mặc dù

________số 8_______

Sau đó, bạn chạy nó với thứ gì đó như gulp-pug

Sử dụng Nunjucks

Tôi yêu tôi một số Nunjucks. Nunjucks có. Bạn sẽ làm như thế này

...

   {% include "./header.html" %}

   Content

   {% include "./footer.html" %}

...

Nếu bạn đặt nó trong một tệp có tên là

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

1, bạn có thể xử lý nó bằng một tập lệnh Node đơn giản thành chỉ mục. html như thế này

...

   

   Content

   

...

0

Hoặc xử lý nó bằng thứ gì đó như gulp-nunjucks

11ty có sẵn Nunjucks, cùng với nhiều thứ khác được đề cập cho đến nay. Có thể tốt cho bạn nếu bạn đang thực sự xây dựng một trang web nhỏ

Sử dụng Ajax

Nói rằng bạn đã…

...

   

   Content

   

...

1

Bạn có thể tìm nạp nội dung cho đầu trang và chân trang từ các tệp tương ứng và kết xuất nội dung vào

...

   

   Content

   

...

2

Nói về JavaScript… Nếu bạn đang xây dựng trang web của mình bằng bất kỳ loại khung JavaScript nào, thì việc xây dựng thông qua các thành phần là vấn đề chính ở đó và việc phá vỡ các phần bạn muốn đưa vào các tệp khác sẽ không có vấn đề gì. Một số loại 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

2 và 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

3 là lãnh thổ mà bạn sẽ đến trong React land

Sử dụng iframe

bạn có thể làm điều này

...

   

   Content

   

...

3

Nhưng nội dung trong các iframe đó không chia sẻ cùng một DOM, vì vậy sẽ hơi kỳ lạ, chưa kể đến việc tạo kiểu chậm và khó sử dụng (vì iframe không biết độ cao của nội dung của chúng)

Tuy nhiên, Scott Jehl đã ghi lại một ý tưởng tuyệt vời. Bạn có thể yêu cầu khung nội tuyến đưa nội dung của chính nó vào trang mẹ rồi tự xóa

...

   

   Content

   

...

4

Kolya Korruptis đã viết bằng bản điều chỉnh này sẽ bao gồm nhiều hơn phần tử con đầu tiên của nội dung trong trường hợp tệp HTML của bạn có nội dung đó

...

   

   Content

   

...

5

Sử dụng Jekyll

Jekyll là trình tạo trang web tĩnh dựa trên Ruby có bao gồm. Bạn giữ bao gồm của mình trong thư mục 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

4, sau đó

...

   

   Content

   

...

6

Jekyll là một công cụ lớn, vì vậy tôi gọi nó ở đây, nhưng có rất nhiều công cụ tạo trang web tĩnh và tôi cá rằng bất kỳ công cụ nào trong số chúng có thể làm được bao gồm

Sử dụng Serge

Được rồi, tôi sẽ gọi thêm một SSG vì nó mới và siêu tập trung. Sergey có định dạng kiểu thành phần web

...

   

   Content

   

...

7

Bạn sẽ đặt tên cho các tệp _______2_______5 và 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

6 và đặt chúng vào 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

7 và sau đó nó sẽ tạo một bản dựng với các tệp bao gồm được xử lý khi bạn chạy tập lệnh npm mà bạn đã làm

Sử dụng Apache SSI

Apache, một máy chủ web phổ biến siêu lừa đảo, có thể bao gồm. Bạn làm như thế này

...

   

   Content

   

...

8

Nhưng bạn cần cấu hình Apache phù hợp để cho phép nội dung. Tôi đã cố gắng hết sức để bản demo hoạt động nhưng không gặp nhiều may mắn

Tôi đã thử sử dụng 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

8 trong một thư mục trên máy chủ Apache và mở những nội dung mà tôi cho là phù hợp

...

   

   Content

   

...

9

Tôi chắc chắn rằng có một số cách để làm cho nó hoạt động, và nếu bạn làm như vậy, thật tuyệt khi nó không cần các phụ thuộc khác

Sử dụng CodeKit

Chỉ dành cho máy Mac, nhưng CodeKit có một ngôn ngữ đặc biệt gọi là Kit nó xử lý trong đó 90% điểm của nó là HTML bao gồm. Nó sử dụng các nhận xét HTML đặc biệt

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

0

Sử dụng Dreamweaver

Lol JK. Nhưng đó thực sự là một điều. DWT, em bé

thánh tào lao

Đó là rất nhiều cách, phải không?

Như tôi đã nói ở trên, tôi rất ngạc nhiên khi bản thân HTML không giải quyết vấn đề này một cách trực tiếp. Không phải tôi nghĩ sẽ là một ý tưởng tuyệt vời cho hiệu suất khi có 

...

   @@include('./header.html')

   Content

   @@include('./footer.html')

...

9 câu lệnh kích hoạt các yêu cầu mạng trên tất cả mã của chúng tôi, nhưng có vẻ như điều đó phù hợp với nền tảng. Sử dụng ES6 nhập trực tiếp mà không cần đóng gói cũng không phải là một ý tưởng tuyệt vời, nhưng chúng tôi có chúng.

var fileinclude = require('gulp-file-include'),
  gulp = require('gulp');
 
gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

0Việc tạo CSS trong CSS không phải lúc nào cũng là một ý tưởng tuyệt vời, nhưng chúng tôi có nó. Nếu nền tảng có cú pháp gốc, có lẽ công cụ khác sẽ loại bỏ điều đó, giống như các gói JavaScript hỗ trợ định dạng nhập ES6

Tôi có thể thêm HTML vào tệp JavaScript không?

HTML có thể được viết bằng JavaScript không?

Làm cách nào để sử dụng mã HTML trong tệp JavaScript?