динамический контент node.js - PullRequest
0 голосов
/ 14 ноября 2011

В настоящее время я создаю небольшую музыкальную викторину с запущенным node.js 0.4.12 и платформой Express

В настоящее время моя экспресс-настройка действительно очень проста и служит только для базового URL

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

Я реализовал небольшую навигацию, которая использует действительно большой div со скрытым переполнением и внутренний div с контентом, который корректирует свое левое значение в зависимости от того, какой заголовок навигации вы щелкаете.

также у меня есть раздел новостей, который запускает запрос mongodb всякий раз, когда вы щелкаете по нему (контент доставляется через socket.io)

конечно, это совсем не удобно для поисковых систем, мои новостипросто никогда не будет найден и выполняется запрос каждый раз, чтобы получать новости просто не нужно.поэтому мне нужен какой-то способ хранения информации о новостях и обновлять ее только тогда, когда появляются новые комментарии или когда я добавляю новые новости ...

также довольно утомительно создавать рабочие ссылки, в настоящее время я делаю это с помощью JavaScript, используяdocument.location.href.replace ...

Еще одна проблема заключается в том, что я боюсь, что веб-сайт становится слишком большим и загружается слишком долго, если я продолжаю размещать каждый свой контент на одной странице..

Итак, как я могу сохранить ощущение страницы в том виде, в каком она есть в данный момент (вездесущий проигрыватель, который никогда не останавливается, если вы не покинете страницу), одновременно обеспечивая правильную работу поисковых систем и поддерживая низкое время загрузки страницы?

1 Ответ

3 голосов
/ 11 января 2012

Дайте мне знать, если я на правильном пути, так как я не до конца понимаю ваш вопрос, но вот как я смогу выполнить то, что вы пытаетесь сделать:

Есть два способа сделать это, если вы ищете преимущества SEO.

Либо загрузите все с сервера на одной странице, а затем используйте CSS и Javascript для управления содержимым после его загрузки ...

OR

Настройте свою страницу традиционным способом (каждая вкладка навигации ссылается на новую, полную страницу), а затем используйте Javascript для загрузки своего контента через AJAX, как вам нравится.

В обоих этих сценариях Google может сканировать вашу страницу / структуру сайта и получать все, что ему нужно, и вы все равно можете использовать JS для отслеживания взаимодействия с вашими пользователями. Что бы вы в итоге ни делали, правило SEO, как правило, «относитесь к нему так, как будто мне не нужен JS для загрузки всего вашего контента».

Звучит так, как будто вы рассмотрели первый сценарий, хотя вместо использования JS в ссылках я бы сделал их стандартными ссылками HTML-привязки, используя id s.

Если вас интересует второй сценарий, я бы порекомендовал вам следующее:

Во-первых, подойдите к вашей навигации, как будто она не требует JavaScript для правильной работы. Это означает, что каждый элемент навигации ссылается на отдельную страницу (каждая из которых требует отдельного маршрута в экспрессе).

Если вы используете Jade для рендеринга ваших шаблонов, я бы использовал его функции наследования для управления вашей разметкой. По сути, вы бы поместили весь свой html в layout.jade, а в большом элементе div, который вы используете для содержимого страницы, вы бы создали block с содержимым по умолчанию внутри. Маршруты, которые вы устанавливаете для каждого элемента nav, будут вызывать различные шаблоны, расширяющие 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, который прикрепляет событие click к каждому из ваших элементов навигации. Это событие щелчка будет захватывать URL из href в вашей ссылке, а затем передавать его методу load в jQuery, который затем заменит то, что находится в основной области содержимого, на разметку со страницы, которую он только что загрузил через ajax.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...