Question

使用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');
                    }


                }
            }
    }

Answer 1

是的，这绝对是可能的。我已经找到了一个快速的黑客来获得og：图像支持在Ghost中工作。这绝对是一个非最佳解决方案，但它需要最少的代码更改。您需要安装cheerio并修改两个文件。

核心/服务器/控制器/ 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运行HTML格式。抓取第一个图像，并将src填充到post对象的新变量（meta_image）中。这将使该变量可用于车把模板系统。

内容/主题// 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是否存在，以及是否确实创建了元标记。

更多＆＃34;适当＆＃34;溶液

添加此功能应该真正做的是为og：image的post对象添加一个额外的字段。然后你可以用管理员的单独字段填充它，或者你可以在保存帖子时解析html并将值放入适当的字段。这样，填充og：image的逻辑只在页面保存时运行一次，而不是每次显示页面时都会运行。

Answer 2

这是评论的意思，但是太长了，我也不知道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在发送之前在页面中执行某些操作。

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

2 个答案:

核心/服务器/控制器/ frontend.js

内容/主题// default.hbs

更多＆＃34;适当＆＃34;溶液