如何为Github Pages设置动态的背景图片？

准备做什么？

使用必应词典时，一次无意的点击，跳到了必应搜索引擎界面，突然眼前一亮，我看到一张图片，没错，高清大图！还可以往前翻几页，有的图片非常震撼；更有意思的是，在必应搜索首页，每张图片的背后都会有一个故事。然而，我对大部分故事并无兴趣。我只想把图片搞过来。。其实，必应已经提供了一个下载按钮的，可以一张一张下载，可我，只要链接~

实际上，我的目标是把这些漂亮的图片设置为博客背景，那怎么做呢？

怎么做？

按照思考的先后顺序，有以下两种方式：

思路一：前端发出`ajax jsonp`请求，提供单独服务器进行响应

——（这是各类数据API请求通用方法）

在Github Pages的静态页面脚本（前端）发起请求，因为请求的是外部链接，这里存在跨域的问题，解决方案：

直接向必应发起请求，通过iframe实现本域与他域的相互访问（总感觉iframe这种方式不够优雅，没有尝试）；
Github Pages本身仅提供静态页面的部署，那么我可不可以给它加个后台，通过自己在服务器端爬取image url，然后，Github Pages前端发起jsonp请求，获取数据？可不可行，一试便知。
前端：

$.ajax({  url: 'https://89c8658d.ngrok.io/backgroundj', // server urltype: "GET",dataType: "jsonp",jsonpCallback: 'jsonpCallback',data: {},error: function (err) {console.log(err.status);console.log(err.readyState);console.log(err.responseText);},success: function (data) {console.log(data);$("body").css('background-image', `url(${data.background})`);$("body").css('background-repeat', `no-repeat`);    $("body").css('background-size', `cover`);}
});

后端

/*route: task.js*/
const bing = require('../core/bing');
module.exports = {// Get Bing daily background image using jsonp'GET /backgroundj': async (ctx) => {let img = await bing.getBackground(ctx);ctx.response.body = `jsonpCallback({"background":"${img}"})` // build jsonp string},
}/*controller: bing.js*/
const superagent = require("superagent");
const fs = require('mz/fs');const headerInfo = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36",'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
};const url = 'http://cn.bing.com';
module.exports = {getBackground: async function (ctx) {return await getImageURL();},
}// Send request to bing and parse image url in web page
async function getImageURL() {let returnPage = (await sendGet(url)).text;let images = returnPage.match(/\/az\/hprichbg\/rb\/(.){1,50}_1920x1080\.jpg/g); // regular expressionconsole.log(images);let imageURL = `https://cn.bing.com${images[0]}`; // here must be httpsreturn imageURL;
}// Get target content using superagent
function sendGet(target) {return new Promise((resolve, reject) => {try {superagent.get(target).set(headerInfo).end(function (err, res) {if (err) {reject(err);} else {resolve(res);}});} catch (err) {reject(err);}})
}

Note

注意jsonp异步请求的方式，jsonpCallback: 'jsonpCallback'，前后端字符串需要一致；
提供的服务器链接地址以及链接内容必须为https，否则浏览器会发出警告已阻止载入混合活动内容“http://...”，同时导致背景图片无法显示；
服务端采用koa, koa-router, superagent等实现；
这里的https://89c8658d.ngrok.io/backgroundj，将本地服务端程序映射到公网，是使用ngrok反向代理生成的临时域名，仅供测试。

思路二：由于前端仅显示背景图片，那么可提供单独服务器直接响应图片数据

——（针对当前需求的特殊方法）

直接用代码说明：

前端

$("body").css('background-image', `url('https://89c8658d.ngrok.io/backgroundb')`); // server url
$("body").css('background-repeat', `no-repeat`);
$("body").css('background-size', `cover`);

后端（附加了保存图片至服务器、保存图片URL至json文件等功能）

/*route: task.js*/
module.exports = {// Get Bing daily background image using buffer'GET /backgroundb': async (ctx) => {let buffer = await bing.getBackgroundBuffer(ctx);ctx.response.type = 'image/jpeg'; // if type is not set, browser will try to download the imagectx.response.body = buffer;}
}/*controller: bing.js*/
module.exports = {getBackgroundBuffer: async function (ctx) {// save image to server disklet imageURL = await getImageURL();let today = new Date().toLocaleDateString();let imageName = imageURL.substr(imageURL.lastIndexOf('/') + 1);let imagePath = `./logs/${today}_${imageName}`;try {superagent.get(imageURL).pipe(fs.createWriteStream(imagePath));} catch (err) {console.log(err);}// if the url has not been saved, save it to json filelet jsonData = JSON.parse(await fs.readFile(`./logs/imageURL.json`));if (jsonData.images.indexOf(imageURL) == -1) {jsonData.images.push(imageURL);await fs.writeFile('./logs/imageURL.json', JSON.stringify(jsonData));}// binary response data is in res.body as a bufferreturn (await sendGet(imageURL)).body;}
}

总结

superagent在这里究竟做了什么？请求网页内容与请求图片数据，这些只是最基本的操作，其功能还有很多；
这样，通过两种方式实现了将必应搜索每日图片设置为Github Pages的背景；
思路一的方式算是较为通用的，可以实现对Github Pages提供数据API，实现自己的各类需求。虽然不是所有人都要为博客设置背景图片，但是可能会有涉及到向服务端动态请求数据的情况，那么这将是一种可行的方式——给自己的博客提供后台。

效果

Blog with daily background image(from Bing)

Source Code: Github（back-end）

If you have any questions or any bugs are found, please feel free to contact me.

Your comments and suggestions are welcome!

如何为Github Pages设置动态的背景图片？相关推荐

CSS渐变颜色和浏览器前缀、opacity透明度以及设置多个背景图片写法
目录前言一.多个背景图片二.渐变颜色 1.线性渐变 2.径向渐变 3.浏览器前缀 4.opacity透明度写在最后前言在前面说了CSS怎样设置背景图片,与设置颜色的几种方式.如果你想查看可 ...
前端实现滑动页面动态切换背景图片的炫酷效果
我发现好的网站都用了如下GIF的模块与背景图片切换的效果,这让在下心痒痒的,所以自己动手写了一遍发现蛮简单的,分享给大家! 思路说明: 首先我的思路是介个样子的:先让一个空的宽度高度都占满的div孩子 ...
VUE动态变换背景图片的实现 +背景图片铺满+ 一般路由的配置
一 .动态变换背景图片的实现代码如下: <template><div class="body" v-loading="loading" :s ...
[css] 如何使用css3实现一个div设置多张背景图片？
[css] 如何使用css3实现一个div设置多张背景图片? background-image:url("1.jpg"),url("2.jpg"),url(&q ...
安装插件设置Intellij IDEA背景图片
安装插件设置Intellij IDEA背景图片 1.打开settings窗口 2.在Plugins搜索框里输入Background Image Plus,在仓库里搜索 3.单击Background I ...
iOS设置UITableView的背景图片，以及不显示多余的空Cell
2019独角兽企业重金招聘Python工程师标准>>> 设置UITableView的背景图片: UIImageView *imageView=[[UIImageView alloc] ...
html如何设置网页的背景图片，使放大或缩小浏览器时，页面排版和背景可以随浏览器放大缩小而排版不会改变，
用DIV+CSS写网页背景代码时,应该先写一个DIV,在这个DIV的CSS里面添加背景图片,并设置其margin为auto,宽度为100%或者auto:然后在这个DIV里面在写一个DIV,在第二个DI ...
html根据PC手机设置不同背景图,Html-根据不同的分辨率设置不同的背景图片
@media only screen and (min-width: 1024px) //当分辨率width >= 1024px 时使用1.jpg作为背景图片 { .bg{ backgr ...
php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码
用什么代码实现?不允许有白色底色产生,因为手机高度不一样设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面错误的写法:加到div中结合图片设置min-height, ...

如何为Github Pages设置动态的背景图片？

准备做什么？

怎么做？

思路一：前端发出`ajax jsonp`请求，提供单独服务器进行响应

思路二：由于前端仅显示背景图片，那么可提供单独服务器直接响应图片数据

总结

效果

Source Code: Github（back-end）

如何为Github Pages设置动态的背景图片？相关推荐

最新文章

热门文章

如何为Github Pages设置动态的背景图片？

准备做什么？

怎么做？

思路一：前端发出ajax jsonp请求，提供单独服务器进行响应

思路二：由于前端仅显示背景图片，那么可提供单独服务器直接响应图片数据

总结

效果

Source Code: Github（back-end）

如何为Github Pages设置动态的背景图片？相关推荐

最新文章

热门文章

思路一：前端发出`ajax jsonp`请求，提供单独服务器进行响应