用戶空格鍵和模板助手在Meteor中隨機加載為頁面背景

Question

每當有人訪問頁面時，我都試圖加載隨機的背景圖像，我在SO上找到了一個答案，說我應該可以，但似乎無法正常工作。

我指的是： 混合handlebars.js和CSS-隨機背景圖像？

我的代碼如下所示：

header.html：

 <div class="backgroundImage"> stuff </div>

header.js：

loadbg: function() {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", "/backgrounds", false); // false for synchronous request
    xmlHttp.send(null);
    var returnedData = JSON.parse(xmlHttp.responseText);
    //console.log(returnedData[randomNumber(2, returnedData.length)]);
    var randomImageName = returnedData[randomNumber(2, returnedData.length)];
    var path = "../images/background/"+randomImageName;
    console.log(path);
    return randomImageName;   
}

header.less：

background-image: url({{loadbg}});

我的console.log()似乎沒有啟動，所以我不確定發生了什么...。

Answer 1

這種方法似乎有點棘手，但通常的想法是將圖像存儲在由Meteor-CollectionFS管理的集合中 ：

1. 運行meteor add cfs:standard-packages cfs:filesystem 。
2. 在項目根目錄中運行mkdir -p public/bg_images 。
3. 將圖像復制到/public/bg_images 。
4. 定義Images集合，例如在common.js ：

---

Images = new FS.Collection("images", {
    stores: [new FS.Store.FileSystem("images", {path: "~/public/bg_images"})]
});

---

5. 不幸的是， CollectionFS提供的文件管理解決方案無法識別對/public/bg_images目錄進行的手動更改。 因此，我們需要實現一種鏡像機制，以將存儲在文件系統中的圖像與相應的集合進行映射：

---

if (Meteor.isServer) {
    Meteor.startup(function () {
        exec = Npm.require('child_process').exec;
        var fs = Npm.require('fs');
        var filesToMirror = [];
        child = exec('ls -m ' + process.env.PWD + '/public/bg_images/ | tr -d \' \n\' ', Meteor.bindEnvironment(function (error, stdout, stderr) {
            if (error !== null) {
                console.log('exec error: ' + error);
            }
            filesToMirror = stdout.split(',');
            console.log("Files to mirror:");
            console.log(filesToMirror);
            for (var i = 0; i < filesToMirror.length; i++) {
                fs.readFile(process.env.PWD + '/public/bg_images/' + filesToMirror[i],
                    Meteor.bindEnvironment(function (err, data) {
                        if (err) throw err;
                        var newFile = new FS.File();
                        newFile.attachData(data, {type: 'image/jpg'}, function (error) {
                                if (error) throw error;
                                newFile.name(filesToMirror[i]);
                            },
                            function (e) {
                                throw e;
                            });
                        Images.insert(newFile);
                    })
                )
            }
        }));
    });
}

---

6. 實現一個模板助手，該助手返回首選圖像：

---

Template.background.helpers({
    image: function () {
        // Return random document of 'Images' collection, e.g.:
        return Images.findOne({}, {skip: Math.floor(Math.random() * Images.find().count()), limit: 1});
    }
});

7. 包括您的模板助手：

---

<template name="background">
    {{#with image}}
        <img src='{{this.url}}'>
    {{/with}}
</template>

---

請注意：每次啟動（重新）服務器時，步驟5中建議的代碼都會將/public/bg_images所有圖像添加到您的集合中。 因此，您可能需要在此之前清除Images集合。

Answer 2

我不相信Meteor會在您的header.less文件中執行替換操作。 在加載標題之前，該文件已被預處理為CSS主文件。

如您所鏈接問題的答案所示，您可以將<style>設置直接放在html模板文件中，替換就可以在其中進行。 或者，您可以使用jQuery在js中設置背景圖片：

$('.backgroundImage').css('background-image','url(' + imageUrl + ')');