在nodejs中将javascript代码发送给用户之前,我们如何执行它

How can we execute a javascript code before sending it to the user in nodejs?

本文关键字:何执行 我们 执行 javascript 中将 nodejs 代码 给用户      更新时间:2023-09-26

im使用Ghost平台运行博客。Ghost是在Nodejs上构建的,但我对它了解不多。我已经构建了以下代码——抓取每个帖子的第一个图像并将其设置为og:image。问题是它只有在网站到达用户的机器后才加载。是否可以从服务器执行此操作,然后将其发送给用户?

    $(document).ready(function() {
        var siteURL = location.host;
         if(
                $('.post-template').length > 0 || 
                $('.page-template').length > 0
            ) {
                var featured_image = $('.post-content img[alt="featured-image"]').first().attr('src');

                // check if the featured image exists
                if(featured_image && featured_image.length > 0) {
                    var featured_image_fe = featured_image;
                    // create container for the image
                    if(featured_image_fe.substr(0,7) != 'http://'){
                        featured_image_fe = siteURL + featured_image_fe;
                    }
                    $('meta[property="og:image"]').attr('content', featured_image_fe);
                } else {
                    var featured_image = $('.post-content img').first().attr('src');
                    if(featured_image && featured_image.length > 0) {
                        var featured_image_nfe = featured_image;
                        if((featured_image_nfe.substr(0,7) != 'http://') && (featured_image_nfe.substr(0,8) != 'https://')){
                            featured_image_nfe = 'http://' + siteURL + featured_image_nfe;
                        }
                        $('meta[property="og:image"]').attr('content', featured_image_nfe);
                    } else {
                        $('meta[property="og:image"]').attr('content', 'http://media.techhamlet.com/wp-content/uploads/2014/06/techhamlet.jpg');
                    }

                }
            }
    }

是的,这肯定是可能的。我已经想出了一个快速的破解方法:在Ghost中工作的图像支持。这绝对是一个非最优的解决方案,但它需要最少的代码更改。您需要安装cheerio并修改两个文件。

core/server/controllers/frontend.js

我们需要从第76行开始更新formatResponse函数。

var cheerio = require('cheerio');
function formatResponse(post) {
    var $ = cheerio.load(post.html);
    var firstImage = $('img').first();
    if(firstImage) {
        post.meta_image = firstImage.attr('src');
    }
    // Delete email from author for frontend output
    // TODO: do this on API level if no context is available
    if (post.author) {
        delete post.author.email;
    }
    return {post: post};
}

我们正在做的是通过cheerio运行postHTML。抓取第一个图像,并将src填充到post对象的一个新变量(meta_image)中。这将使该变量可用于车把模板系统。

content/themes//default.hbs

在这里,我刚刚更新了{{! Page Meta }}部分,如下所示:

    {{! Page Meta }}
    <title>{{meta_title}}</title>
    <meta name="description" content="{{meta_description}}" />
{{#if this.post.meta_image}}
    <meta property="og:image" content="{{this.post.meta_image}}" />
{{/if}}
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

我们只是检查this.post.meta_image是否存在,以及它是否创建了元标记。

更多";适当的";解决方案

要添加此功能,您真正应该做的是为og:image的post对象添加一个额外的字段。然后,您可以从管理员那里用一个单独的字段来填充它,也可以在保存帖子并将值放入适当的字段时解析html。这样,与每次显示页面相比,填充og:image的逻辑在保存页面时只运行一次。

这是一个很刻薄的评论,但太长了,我也不知道Gosht

你为什么有

if (
    $('.post-template').length > 0 || 
    $('.page-template').length > 0
)

检查两次相同的情况只会减慢速度。

如果我正确理解你的目标,你需要动态加载图像,如果node.js可以访问图像列表,你可以动态生成html(借助express或jade的视图),使用正确的html字段而不是javascript。

你能做什么:

在节点js:

var express = require('express'),
    app = express();
function execute () {
    return 'Html stuff to load the image';
}
app.get('/', function (res, req) {
    var html_begin = '<head></head><body>',
        html_end = '</body>';
    res.send(html_begin + execute() + html_end);
});

所以客户端得到

<head>
</head>
<body>
    Html stuff to load the image
</body>

但你不能只对node.js说在发送之前执行页面中的某些内容