使用Express动态地将元标记注入HTML(Inject meta tag dynamically to HTML with Express)
概要:
我目前正在将Apache + PHP堆栈上的网站迁移到Node + Express,并且想知道在新堆栈下动态注入元标记的最佳方法/最佳实践(如果有的话)是什么。
细节:
在现有堆栈下,通过直接将PHP代码添加到HTML文件中来动态注入元标记。 由于渲染是在服务器端完成的,因此Facebook / Google + /任何网络爬虫都能正确解释标签。
在新的堆栈下,经过一些研究,我遇到了两个选择:
- 使用像Pug(Jade)这样的模板引擎来呈现带有本地的HTML。 (用Pug的语法重写现有的HTML似乎有点过分了?Pug可以处理HTML,还是我要考虑像EJS这样的其他模板引擎?你建议我去探索哪些模板引擎?)
- 在渲染开始之前,使用像Cheerio这样的DOM操作插件首先注入元标记。
在这两个选项之间,哪一个会有更好的表现还是没有实质性差异? 你还有其他方式推荐吗? 谢谢!
Summary:
I'm currently migrating a website on Apache + PHP stack over to Node + Express, and would like to know what is the best way/best practice (if there is one) for dynamically injecting meta tags under the new stack.
Details:
Under the existing stack, meta tags are injected dynamically by adding PHP codes into the HTML file directly. As rendering is done on server side, the tags are properly interpreted by Facebook/Google+/whatever web crawlers.
Under the new stack, after doing some research, I've come across two options:
- Use template engine like Pug (Jade) to render the HTML with locals. (It seems to be an overkill to rewrite the existing HTML with Pug's syntax though? Can Pug deal with HTML, or I've to consider other template engine like EJS? What template engine do you advise me to explore?)
- Use DOM manipulation plugin like Cheerio to inject the meta tags first, before rendering begins.
Between these two options, which one will have a better performance or there is no material difference? Are there any other ways that you'd otherwise recommend? Thanks!
最满意答案
EJS可能是最简单的,与PHP非常相似。
您还可以使用Mustache和Handlebars查看其他选项,只需对现有HTML进行最少的更改。
- 与EJS:
<html><head><%= yourMetaTags %> ...
- 与胡子:
<html><head>{{ yourMetaTags }} ...
- 使用把手:
<html><head>{{ yourMetaTags }} ...
doT.js也非常快。
看到:
- http://www.embeddedjs.com/
- https://mustache.github.io/
- http://handlebarsjs.com/
- http://olado.github.io/doT/
在我看来,解析HTML并使用DOM API操作它只是为了插入元标记将是一种矫枉过正。
另一方面,如果您只需要插入元标记,那么您可以使用类似您的
yourHTML.replace('<head>', '<head>'+yourMetaTags);
进行简单的正则表达式替换yourHTML.replace('<head>', '<head>'+yourMetaTags);
但是当您需要更多功能时,它可能会随着时间的推移变得更加复杂。 毕竟,每个人都在生活的某个阶段制造了一个模板引擎。EJS would probably be the simplest one for that and very similar to PHP.
You can also take a look at Mustache and Handlebars for other options with minimal changes to your existing HTML.
- with EJS:
<html><head><%= yourMetaTags %> ...
- with Mustache:
<html><head>{{ yourMetaTags }} ...
- with Handlebars:
<html><head>{{ yourMetaTags }} ...
Also doT.js is very fast.
See:
- http://www.embeddedjs.com/
- https://mustache.github.io/
- http://handlebarsjs.com/
- http://olado.github.io/doT/
Parsing the HTML and manipulating it with a DOM API just to insert meta tags would be an overkill in my opinion.
On the other hand if all you need is to insert meta tags then you could make a simple regex substitution, using something like
yourHTML.replace('<head>', '<head>'+yourMetaTags);
but it could potentially get more complex over time when you need more functionality. After all, everyone has made a templating engine at some point in life.
相关问答
更多-
只是一个想法,但你可以使用像cheerio的东西来追加一个脚本到身体 app.get('/:file', function(req, res) { var html = fs.readFileSync(__dirname + '/public' + file, 'utf8'); var $ = cheerio.load(html); var scriptNode = ''; $('body').append ...
-
如何从静态HTML页面读取数据,例如元标记?(How can I read data from my static HTML page, such as the meta tag?)[2021-10-13]
@onetwothree - 如果你只是想访问它的内容,它将是这样的。 export class MyComponent implements OnInit{ private appVersion:string; constructor(){ this.appVersion = ""; } // Runs on component creation ngOnInit(){ this.appVersion = this.getMetaDat ... -
HTML:元描述标签的用途(HTML: Meta description tag's uses)[2022-08-16]
对于内部网站,没有理由添加description元标记。 这确实适用于搜索引擎的使用,所以除非你使用内部搜索引擎(比如谷歌迷你 ),这完全是不必要的。 从维基百科 - 描述属性 : description属性提供了网页内容的简要说明。 这样,如果搜索引擎无法根据页面内容自动创建自己的描述,则网页作者可以为列表提供比可能显示的更有意义的描述。 (强调我的) For an internal site there is no reason to add a description meta tag. It is ... -
您可以使用正则表达式替换您的html标记。 例如, string myContent = Regex.Replace(description, @"<(.|\n)*?>", string.Empty); 或者 - 你可以使用.Net 4.0+的WebUtility.HtmlDecode和旧版本的HttpUtility.HtmlDecode 。 希望能帮助到你 :) You can use regex to replace your html tags. For example, string myCont ...
-
你如何检查是否存在使用JavaScript的HTML元标记?(How do you check if a html Meta tag exist using JavaScript?)[2022-03-31]
它将始终返回true,因为querySelectorAll在0匹配的情况下返回一个空数组。 文档 您可以使用NodeList对象的length属性来确定与指定选择器匹配的元素的数量 尝试这个: if (document.querySelectorAll('meta[content="This is not an apple"]').length > 0) { alert('Its here!'); } else { alert('Its not here') } ... -
这对我有用。 问题可能是您尝试了第一个不起作用的代码,并且您使用HTML注释而不是Javascript注释评论代码: // [...]或/** [...] */ 。就像@ Stretch0提到的那样,你错过了对象的关键 res.render('drawGraph', { dataObj: dataObj}); 但仅此一点不会解决问题。 您必须在pug模板中使用JSON.stringify来显示对象 从 var data = #{dataObj}; 至 var data = !{JSON.stringify(dataObj)}; `#{}转义字符,所以为了避免转义你可以使用!{} Like @Stretch0 mentioned you are missing ...EJS可能是最简单的,与PHP非常相似。 您还可以使用Mustache和Handlebars查看其他选项,只需对现有HTML进行最少的更改。 与EJS: <%= yourMetaTags %> ... 与胡子: {{ yourMetaTags }} ... 使用把手: {{ yourMetaTags }} ... doT.js也非常快。 看到: http://www.embeddedjs.com/ https://mustache.gi ...我不确定这是你想要的还是你想要的,但为什么不尝试将meta标签放在default.blade.php中,而不是将它放在局部。 例如,插入default.blade.php的head标记中: @yield('facebook_meta') view_file.blade.php @section('facebook_meta')
HTML 标记(HTML tag)[2022-11-05]
Refresh元标记会自动将浏览器重定向到指定时间后给定的URL。 如果没有看到您正在使用的教程,我无法想象为什么您需要将它用于您的任务。 https://en.wikipedia.org/wiki/Meta_refresh The Refresh meta-tag automatically redirects the browser to the URL given after the specified amount of time. Without seeing the tutorial you a ...相关文章
更多- HTML meta标签
- 关于微信公众号内嵌网页的几个meta标签
- 删除Hbase的META中多余表项
- HTML 排版标记
- HTML 字体标记
- 在HTML中使用javascript
- HTML转义标签
- 在html使用CSS的方式
- html适应手机
- HTML5 Video元素【HTML5教程 - 第三篇】
最新问答
更多- 在javascript中创建类以创建对象并在Java中创建类和对象之间的区别(Difference between creating a class in javascript to create an object and creating an class and object in Java)
- Facebook API:将身份验证详细信息从Javascript SDK发送到PHP SDK(Facebook API: Send authentication detail from Javascript SDK to PHP SDK)
- 如何停止队列动画jquery?(How can I stop queue animation jquery?)
- 使用C#的井字游戏中的人工智能(Artificial Intelligence in Tic-Tac-Toe using C#)
- 多少流量可以共享虚拟主机(对于Python Django站点)支持?(How Much Traffic Can Shared Web Hosting (for a Python Django site) support?)
- 带有CIFilters的CAShapeLayer(CAShapeLayer with CIFilters)
- 如何在Angular 2中读取JSON #text(How to read in Angular 2 the JSON #text)
- 如何在xml中读取自闭标签的属性?(How to read self closing tag's attribute in xml?)
- 无法使用http put将图像上传到亚马逊S3(Cannot upload image to amazon s3 using http put)
- 文件结束无限循环(end of file infinite while-loop)
- 在cpp的模板(template in cpp)
- 在构建库时,clang和clang ++有什么区别?(What's the difference between clang and clang++ when building a library?)
- ng类中的表达式(expression inside ng-class)
- 在PHP中获取随机布尔值true / false(Get random boolean true/false in PHP)
- 管道的高效分块用于严格的字节串(Efficient chunking of conduit for strict bytestring)
- Python ternary_operator(如果其他标志做了其他操作,则执行其他操作)(Python ternary_operator (do-somthing if flag else do-another))
- Sencha Touch面具发布(Sencha Touch mask ondisclosure)
- 验证脚本上的通知[重复](Notices on validation script [duplicate])
- 朋友功能(friend function)
- 基于角坐标平移和变换平面几何(Translate and transform plane geometry based on corner coordinates)
- Rails:'如果在本地运行'条件javascript标记包括(Rails: 'if running locally' conditional javascript tag include)
- 解压文件(Unzipping files)
- 使用ui-router以角度加载变量状态(loading in variable states with ui-router in angular)
- 创建Azure云服务需要多长时间?(how long does it take to create an Azure Cloud Service? How to view log information?)
- 指向整数的指针数组(Array of pointers to integers)
- Laravel服务提供商没有看到我的包的主要类(Laravel service provider does not see the main class of my package)
- 这个关于VSS / RSS / PSS / USS的解释是否准确?(Is this explanation about VSS/RSS/PSS/USS accurate?)
- 在Django-Admin中通过row-id排序显示项目(Ordering the display items by row-id in Django-Admin)
- 如何使用cythonize启用`--embed`?(How to enable `--embed` with cythonize?)
- 用于将文本多行设置的Excel脚本(Excel script for ereasing text multiple rows)