html post怎么发head,GitHub - posthtml/posthtml-head-elements: Build HTML head elements from a JSON file...-CSDN博客

这篇博客介绍了如何利用PostHTML的posthtml-head-elements插件将HTML头部元素如title, script, link, base和meta等存储在单独的JSON文件中，以便在构建过程中方便地插入到文档头部。通过配置gulp任务，可以实现从JSON文件动态插入头部元素，并保持元素的顺序。此方法有助于维护大型项目的结构清晰和代码分离。

摘要由CSDN通过智能技术生成

posthtml-head-elements

68747470733a2f2f7472617669732d63692e6f72672f706f737468746d6c2f706f737468746d6c2d686561642d656c656d656e74732e737667

68747470733a2f2f64617669642d646d2e6f72672f74636f74746f6e2f706f7274666f6c696f2f6465762d7374617475732e7376673f7374796c653d666c61742d737175617265

68747470733a2f2f62616467652e667572792e696f2f6a732f706f737468746d6c2d686561642d656c656d656e74732e737667

68747470733a2f2f636f766572616c6c732e696f2f7265706f732f706f737468746d6c2f706f737468746d6c2d686561642d656c656d656e74732f62616467652e7376673f6272616e63683d6d617374657226736572766963653d676974687562

This plugin is intended to work with PostHTML. It will allow you to keep HTML head elements - title, script, link, base and meta - in a separate JSON file:

{

"meta": [

{

"charset": "utf-8"

{

"http-equiv": "X-UA-Compatible",

"content": "IE=edge"

{

"name": "description",

"content": "A front-end template that helps you build fast, modern mobile web apps."

{

"name": "viewport",

"content": "width=device-width, initial-scale=1"

}

"title": "Web Starter Kit",

"link": [

{

"rel": "manifest",

"href": "manifest.json"

{

"rel": "icon",

"sizes": "192x192",

"href": "images/touch/chrome-touch-icon-192x192.png"

}

"script": [

{

"src": "//cdn.polyfill.io/v1/polyfill.min.js"

}

"base": [

{

"href": "/"

}

]

}

A custom tag, which signifies where the HTML head elements should be inserted during the build process, needs to be placed in the document head:

This is then configured like below if you are using gulp-posthtml.

Please read the PostHTML GitHub page for plugin configuration guidelines.

var posthtml = require('gulp-posthtml');

var gulp = require('gulp');

var jsonPath = '/data/posthtml-head-elements.json';

gulp.task('posthtml', function() {

var plugins = [

require('posthtml-head-elements')({headElements: jsonPath})

];

return gulp.src('/app/index.html')

.pipe(posthtml(plugins))

.pipe(gulp.dest('/build/'));

});

Note that the HTML head elements are inserted into the document in the spatial order they are laid out - from top to bottom

It is possible to mix the head elements, but the JSON syntax requires a unique key. Therefore, if you are using more than one head element, place an underscore immediately afterwards.

An example of a JSON file with multiple head elements:

{