mongodb - 动态 node.js 内容

Question

我目前正在构建一个运行 node.js 0.4.12 和 express 框架的小型音乐测验

目前我的 express 设置非常非常基本，只提供基本 url

app.get('/', function(req, res){
res.render('index.jade');
});

我已经实现了一个小导航，它使用一个非常大的 div 和一个隐藏的溢出和一个内部 div，其内容根据您单击的导航标题调整其左值。

我还有一个新闻版 block ，只要你点击它就会运行一个 mongodb 查询(内容通过 socket.io 传送)

当然，这根本不是搜索引擎友好的，我的新闻永远不会被发现，并且不需要每次都运行查询来获取新闻。所以我需要一些存储新闻信息的方法，并且只在发布新评论或添加新新闻时更新它...

创建工作链接也很繁琐，目前我使用 document.location.href.replace 通过 javascript 来完成...

还有一个问题是，如果我继续将我拥有的所有内容都放在一个页面上，我担心网站会变得太大并且加载时间太长......

那么，我如何才能保持当前页面的感觉(一个无所不在的播放器，除非您离开页面，否则永远不会停止)，同时正确地服务于搜索引擎并保持较低的页面加载时间？

Answer 1

让我知道我是否在正确的轨道上，因为我不完全理解你的问题，但这是我将如何完成你想要做的事情:

如果您正在寻找 SEO 好处，有两种方法可以做到这一点。

要么在单个页面上从服务器加载所有内容，然后在加载后使用 CSS 和 Javascript 操作内容...

或

以传统方式设置您的页面(每个导航选项卡链接到一个新的完整页面)，然后根据需要使用 Javascript 通过 AJAX 加载您的内容。

在这两种情况下，Google 都可以抓取您的页面/网站结构并获得它需要的一切，您仍然可以使用 JS 为您的用户分层交互。无论您最终做什么，SEO 规则通常是“像我不需要 JS 来加载您的所有内容一样对待它”。

听起来您已经涵盖了第一种情况，但我不会在您的链接中使用 JS，而是使用 id 使它们成为标准的 HTML anchor 链接。

如果您对第二种情况感兴趣，我建议您这样做:

首先，将您的导航视为不需要 javascript 即可正常工作。这意味着每个导航元素都链接到一个单独的页面(每个页面都需要一个单独的 express 路由)。

如果您使用 Jade 来呈现您的模板，我会使用它的继承功能来管理您的标记。基本上，您会将所有 html 放入 layout.jade，并在用于页面内容的大 div 中，创建一个 block里面的默认内容。然后，您为每个导航元素设置的路由将调用扩展 index.jade 的不同模板，并将特定于页面的内容写入您创建的 block。

这是一个例子:

app.get('/', function(req, res){
  res.render('index.jade');
});

app.get('/section1', function(req, res){
  res.render('section1.jade');
});

app.get('/section2', function(req, res){
  res.render('section2.jade');
});

这确保每次您访问 http://yoursite.com/section1 时，都会呈现整个页面(页眉、页脚等)，但您不必复制每个模板中的页眉和页脚代码。它只存在于 index.jade 中，由其他特定于部分的模板进行扩展。

在设置新闻提要时，除非它向客户端推送实时新闻更新，否则我会放弃 socket.io 设置，而是在页面加载时从数据库加载它。抓取页面加载时从数据库返回的任何内容，并通过局部变量将其传递给您的 jade 模板。例如:

app.get('/news', function(req, res){
  res.render('news', {
    newsArticles: newsArticles
  });
});

最后，当您像标准网站一样工作时(传统的 http 页面加载与 javascript 加载)，然后在您的 javascript 上分层以将页面转换为通过 AJAX 加载内容的页面。我使用 jQuery 来执行此操作并且效果很好。编写一些 jQuery 代码，将点击事件附加到您的每个导航项。此点击事件将从您链接中的 href 中获取 URL，然后将其传递给 jQuery“加载”方法，然后该方法会将您主要内容区域中的内容替换为页面中的标记刚刚通过 ajax 加载。