Reactive meta tags and CSS for meteor within iron-router
Change meta tags on the fly within iron-router. This package can create meta
tags, and link
tags as well.
This package may also help to use dynamic CSSs, so you may use different style sheets - for different routes.
This package supports meta
and link
options (properties) defined on objects below, ordered by prioritization:
Router.route()
[overrides all]RouteController.extend()
Router.configure()
[might be overridden by any above]
Note: this package implies ostrio:iron-router-title package.
Install:
meteor add ostrio:iron-router-meta
Demo application:
iron-router-meta.meteor.com
Usage:
Change CSS per route:
1# Set default CSS for all routes 2Router.configure 3 link: 4 stylesheet: "https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" 5 6# Rewrite default CSS, for second route, via controller: 7secondPageController = RouteController.extend 8 link: 9 stylesheet: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 10Router.route 'secondPage', controller: secondPageController 11 12# Rewrite default CSS, for third route via route settings: 13Router.route 'thirdPage', 14 link: 15 stylesheet: "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"
Set default values in Router.configure()
1Router.configure 2 meta: 3 charset: 4 charset: 'UTF-8' 5 keywords: 6 name: 'keywords' 7 itemprop: 'keywords' 8 content: 'Awesome, Meteor, based, app' 9 robots: 'index, follow' 10 google: 'notranslate' 11 12 link: 13 canonical: -> 14 window.location.href 15 image: 16 rel: 'image' 17 sizes: '500x500' 18 href: 'http://doma..' 19 publisher: 'http://plus.google...'
Then override default values in each route:
1Router.route 'account', 2 template: 'account' 3 path: '/me/account' 4 title: 'My Account' 5 meta: 6 keywords: 7 name: 'keywords' 8 itemprop: 'keywords' 9 content: 'User, Account'
Set tags via RouteController
:
1accountController = RouteController.extend(meta: keywords: 'User, Account') 2Router.route 'account', controller: accountController
Set only name
and content
attributes on meta
tag:
1Router.route 'routeName', 2 meta: 3 name: 'content'
Set only rel
and href
attributes on link
tag:
1Router.route 'routeName', 2 link: 3 rel: 'href'
Set multiple attributes on meta
tag:
1Router.route 'routeName', 2 meta: 3 uniqueName: 4 name: 'name' 5 content: 'content' 6 value: 'value' 7 'og:prop': 'value' 8 itemprop: 'value'
Set multiple attributes on link
tag:
1Router.route 'routeName', 2 link: 3 uniqueName: 4 rel: 'name' 5 sizes: 'value' 6 href: 'value' 7 type: 'value'
You can pass functions as value:
1Router.route 'routeName', 2 meta: 3 url: 4 property: 'og:url' 5 itemprop: 'url' 6 content: -> 7 window.location.href 8 link: 9 canonical: -> 10 window.location.href
Use function context:
1Router.route 'post', 2 template: 'post' 3 path: '/post/:_id' 4 meta: -> 5 keywords: 6 name: 'keywords' 7 itemprop: 'keywords' 8 content: -> 9 @data.getKeywords() 10 data: 11 getKeywords: -> 12 Collection.Posts.findOne(@params._id).keywords
Sample config
1Router.configure 2 meta: 3 # <meta charset="UTF-8"> 4 charset: 5 charset: 'UTF-8' 6 7 # <meta name="keywords" content="Awes.."> 8 keywords: 9 name: 'keywords' 10 itemprop: 'keywords' 11 content: 'Awesome, Meteor, based, app' 12 13 # <meta name="description" itemprop="description" property="og:description" content="Default desc.."> 14 description: 15 name: 'description' 16 itemprop: 'description' 17 property: 'og:description' 18 content: 'Default description' 19 20 image: 21 name: 'twitter:image' 22 itemprop: 'image' 23 property: 'og:image' 24 content: 'http://doma..' 25 26 'og:type': 'website' 27 'og:title': -> 28 document.title 29 'og:site_name': 'My Awesome Site' 30 31 url: 32 property: 'og:url' 33 itemprop: 'url' 34 content: -> 35 window.location.href 36 37 'twitter:card': 'summary' 38 'twitter:title': -> 39 document.title 40 'twitter:description': 'Default description' 41 'twitter:site': 42 name: 'twitter:site' 43 value: '@twitterAccountName' 44 'twitter:creator': 45 name: 'twitter:creator' 46 value: '@twitterAccountName' 47 48 'http-equiv': 49 'http-equiv': 'X-UA-Compatible' 50 content: 'IE=edge,chrome=1' 51 52 robots: 'index, follow' 53 google: 'notranslate' 54 55 56 link: 57 # <link href="https://maxcdn.bootstrapcdn.com/..." rel="stylesheet"> 58 stylesheet: "https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" 59 60 # <link rel="canonical" href="http://doma.."> 61 canonical: -> 62 window.location.href 63 64 # <link rel="image" sizes="500x500" href="http://doma.."> 65 image: 66 rel: 'image' 67 sizes: '500x500' 68 href: 'http://doma..' 69 70 publisher: 'http://plus.google...' 71 72 'shortcut icon': 73 rel: 'shortcut icon' 74 type: 'image/x-icon' 75 href: 'http://domai...' 76 77 'icon': 78 rel: 'icon' 79 type: 'image/png' 80 href: 'http://domai...' 81 82 'apple-touch-icon-144': 83 rel: 'apple-touch-icon' 84 sizes: '144x144' 85 href: 'http://doma..' 86 'apple-touch-icon-114': 87 rel: 'apple-touch-icon' 88 sizes: '114x114' 89 href: 'http://doma..' 90 'apple-touch-icon-72': 91 rel: 'apple-touch-icon' 92 sizes: '72x72' 93 href: 'http://doma..' 94 'apple-touch-icon-57': 95 rel: 'apple-touch-icon' 96 sizes: '57x57' 97 href: 'http://doma..'