支持SEO的部分更新
Partial update while supporting seo
使用NodeJs,我正在尝试做一些与Meteor非常相似的事情:我只想发送页面中实际更改的部分。我的困境是,我知道如何创建这样的框架来响应链接点击并发送部分更新,但这样的框架不会满足直接浏览到索引以外的页面(这是搜索引擎和没有javascript的人使用您的网站所需要的(。
我还可以弄清楚如何制作一个框架来支持整个页面重新加载,车把和一个简单的节点服务器实例可以解决这个问题。Hoeever,我不知道如何创建一种方法,允许我编写一种方法来告诉框架页面的部分更新,并让框架找出还需要加载的内容。
我能想到的一种方法是每次(对于整个页面加载(创建索引页面并对其应用部分更新,但如果子页面与非常拥挤的索引有很大不同,这可能会很快变得昂贵。
示例方法如下所示:
function images(id) {
if (id == null) {
// load all images from database
template.images = db.result();
template.content = template.loadblock('gallery');
}
else {
// retrieve single image
template.content = template.loadblock('single_image');
template.image = db.result();
}
}
在部分更新中,为 domain.com/images 调用此方法可以正常工作,因为很明显发生了什么变化。对于整个页面加载,此函数将错过页眉,页脚,导航等内容。
在答案中,我会寻找一个已经这样做的例子或一些可以指出我正确方向的提示。我很抱歉我在 iPad 上写这篇文章的任何错别字。如果您对我的问题有任何疑问,请提出,我会根据需要进行更新。
更新:解决方案的一个可能示例可能是以下代码。这是为了给出一个想法,它可能不会真正运行
// As a convention, don't pass around raw values if they aren't static but pass around functions such as
data.images = function () {
// run db query
// return an object with the images
}
// This constraint might be limited to the index() method
var routes = {
// This now allows us to do things like this:
index: function() {
var data;
// Initialise everything needed for the index
data.title = 'Index';
data.nav = { Index: '/', Images: '/images' };
data.content = 'Hello World';
},
categories: function() {
var data;
data.content = render('gallery', function () { /* load and return images as object */ }); // Not sure about this dynamic subtemplating but oh well
}
// This now allows us to do the following:
function request(page, type) {
if (type == 'update') {
if (routes[page] != undefined && typeof routes[page] == 'function') {
respond(routes[page]());
}
}
else {
if (routes[page] != undefined && typeof routes[page] == 'function') {
var data = mergeArrays(routes['index'](), routes[page]());
// index.html which is just a Handlebars template
respond(data);
}
}
}
这是我经常使用的模式(在 Express 应用程序中(:
function respond(req, res, name, resource) {
if(req.accepts('json')) {
// Send JSON to clients who want it
res.send(resource);
} else {
// Render with layout only for non-XHR requests
resource.layout = !req.xhr;
res.render('resources/' + name, resource);
}
}
用法示例:
app.get('/images', function(req, res, next) {
getImages(function(err, images) {
if(err) return next(err);
respond(req, res, 'images', images);
});
});
app.get('/images/:id', function(req, res, next) {
getImage(req.params.id, function(err, image) {
if(err) return next(err);
respond(req, res, 'image', image);
});
});
图片.翡翠:
img(src=uri, alt=title)
图片.翡翠:
#gallery
for image in images
include image
请求 JSON 的客户端会得到它,否则他们只会在非 XHR 请求时获得整页。XHR 请求仅获取所请求资源的 HTML 代码段。这适用于非常简单的应用程序,其中资源主要对应于页面。
相关文章:
- Javascript循环不会自我更新
- 添加文字和评论功能更新Div
- AngularJS:ng之后,重复$scope值未按预期更新
- 如何通过数组更新角度子范围
- Ajax聊天消息重复而不仅仅是更新
- 通过CSV文件上载更新数据库表
- 平均值:无法将数据更新到数据库
- $rootScope未使用forEach进行更新
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- Angular:更新一次性绑定的数据
- Javascript更新孙窗口中的表单元素
- 使用AngularJS中的筛选器更新给定的表
- 从选项页面更新chrome扩展清单权限
- 如何在不刷新页面的情况下更新显示框
- 这是使用html快照和谷歌获取的预期结果吗?SEO/SPA
- 延期承诺值未更新/解析/延期
- 标记的实时更新,无需加载页面谷歌地图API V3
- 使用mongodb更新中的一个变量
- 支持SEO的部分更新