我們如何在將它發送給nodejs中的用戶之前執行javascript代碼？

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 }}部分如下：

    {{! 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的邏輯僅在保存頁面時運行一次，而不是每次顯示頁面時。

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 個解決方案

解決方案1
6 已采納 2014-09-24 21:55:56

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

內容/主題// default.hbs

更“正確”的解決方案

解決方案2
1 2014-09-24 09:08:59

我們如何在將它發送給nodejs中的用戶之前執行javascript代碼？

問題描述

2 個解決方案

解決方案1 6 已采納 2014-09-24 21:55:56

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

內容/主題// default.hbs

更“正確”的解決方案

解決方案2 1 2014-09-24 09:08:59

解決方案1
6 已采納 2014-09-24 21:55:56

解決方案2
1 2014-09-24 09:08:59