2015-05-30 3 views
4

Я разрабатываю приложение, использующее MEAN.js, и я пытаюсь исправить статьи (блог), поэтому он более дружелюбен к социальному обмену. Проблема, с которой я столкнулась, заключается в заполнении метаданных открытого графа, чтобы он заполнял значение og: url с фактическим общим URL. Вот то, что файлы выглядят как:ExpressJS & Swig: изменение переменных шаблона на основе маршрута?

express.js

// Setting application local variables, to be rendered in the template's variables in layout.server.view.html below. 
app.locals.siteName = config.app.siteName; 
app.locals.title = config.app.title; 
app.locals.description = config.app.description; 
app.locals.keywords = config.app.keywords; 
app.locals.imageUrl = config.app.imageUrl; 
app.locals.facebookAppId = config.facebook.clientID; 
app.locals.jsFiles = config.getJavaScriptAssets(); 
app.locals.cssFiles = config.getCSSAssets(); 

// Passing the request url to environment locals 
app.use(function(req, res, next) { 

    // NOTE: This is the line that's setting the url on the layout template. 
    res.locals.url = req.protocol + '://' + req.headers.host + req.url; 
    next(); 
}); 

layout.server.view.html

// This is the template being rendered, using Swig as the template engine. 
// The variables (e.g. siteName, title, etc.) are being set using the app.locals and req.locals.url variables in the express.js file above. 

<!-- Facebook META --> 
<meta id="fb-app-id" property="fb:app_id" content="{{facebookAppId}}"> 
<meta id="fb-site-name" property="og:site_name" content="{{siteName}}"> 
<meta id="fb-title" property="og:title" content="{{title}}"> 
<meta id="fb-description" property="og:description" content="{{description}}"> 
<meta id="fb-url" property="og:url" content="{{url}}"> 
<meta id="fb-image" property="og:image" content="{{imageUrl}}"> 
<meta id="fb-type" property="og:type" content="website"> 

<!-- Twitter META --> 
<meta id="twitter-title" name="twitter:title" content="{{title}}"> 
<meta id="twitter-description" name="twitter:description" content="{{description}}"> 
<meta id="twitter-url" name="twitter:url" content="{{url}}"> 
<meta id="twitter-image" name="twitter:image" content="{{imageUrl}}"> 

articles.server.controller.js

// Accessed only when a user visits one of the 'Articles' (blog) pages. 
// When a user visits a url for an Article, this file grabs the article 
// from the database and updates the local variables with article-specific 
// values. This works for everything EXCEPT the url variable. 

exports.articleByUrl = function(req, res, next, id) { 
    var url = req.params.articleUrl; 
    Article.findOne({urlTitle: url}).populate('user', 'displayName').exec(function(err, article) { 
     if (err) return next(err); 
     if (!article) return next(new Error('Failed to load article ' + id + ' with friendly URL "' + url + '".')); 
     req.app.locals.title = article.title; 
     req.app.locals.description = article.summary; 

     // This is the line that I'm HOPING will update the url variable in 
     // the template file above, but it's not working. I've also tried 
     // using req.app.locals.url, but that didn't work either. 
     res.locals.url = req.protocol + '://' + req.get('host') + '/#!' + req.originalUrl; 

     req.app.locals.imageUrl = article.img; 
     req.article = article; 
     next(); 
    }); 
}; 

В настоящее время все значения заполняются правильно. ЗА ИСКЛЮЧЕНИЕМ значения URL - он всегда показывает корневой URL (т. http://localhost:3000 на моей машине dev). Любая помощь или более разумные способы делать то, что я хочу, ДЕЙСТВИТЕЛЬНО оценили бы. Я потратил на это 2 дня, и мое упрямство, наконец, раздаётся.

+0

Можете ли вы проверить свой код и посмотреть, правильно ли присвоено правильное значение res.locals.url? – GPX

+0

Как вы используете 'articleByUrl()'? Если это подходящее промежуточное программное обеспечение, то порядок, в котором он используется 'use()' 'd, имеет значение (некоторые операторы console.log будут показывать, что называется последним:' articleByUrl' или ваше «общее» промежуточное ПО). Кроме того, вы перезаписываете 'req.app.locals' с информацией, зависящей от запроса. Это приведет к неопределенному поведению с несколькими параллельными запросами (хотя это, скорее всего, не является причиной проблемы, которую вы описываете). – robertklep

+0

@GPX это хороший вопрос - технически 'res.locals.url' является правильным, потому что это маршрут Угловой является' GET'-ing, чтобы найти 'articleByUrl()'. Но это не конечный URL-адрес, который пользователь видит, потому что Angular выполняет фактическую маршрутизацию. – aikorei

ответ

0

При использовании:

req.app.locals 

Это не меняет все значения для приложения для всех (до перезагрузки сервера). Правильный способ заключается в использовании:

res.app.locals 

НО когда вы делаете, это только делает его для запроса начальной страницы и не сохраняется, когда изменение хэша применяются на стороне клиента.

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

Удачи.

Смежные вопросы