{"_id":"5635b294d209b50d0031dfe3","githubsync":"","category":{"_id":"5635b291d209b50d0031dfc7","pages":["5635b294d209b50d0031dfdf","5635b294d209b50d0031dfe0","5635b294d209b50d0031dfe1","5635b294d209b50d0031dfe2","5635b294d209b50d0031dfe3","5635b294d209b50d0031dfe4","5635b294d209b50d0031dfe5","5635b294d209b50d0031dfe6","5635b294d209b50d0031dfe7","5635b294d209b50d0031dfe8","5635b294d209b50d0031dfe9","5635b294d209b50d0031dfea","5635b294d209b50d0031dfeb","5635b294d209b50d0031dfec"],"project":"550a7754635c660d0052808e","__v":1,"version":"5635b290d209b50d0031dfc4","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-09T03:24:43.474Z","from_sync":false,"order":2,"slug":"customizing-telescope","title":"Customizing Telescope"},"user":"5469e5dfa3b67a0e00559b06","__v":0,"project":"550a7754635c660d0052808e","version":{"_id":"5635b290d209b50d0031dfc4","__v":1,"project":"550a7754635c660d0052808e","createdAt":"2015-11-01T06:34:56.868Z","releaseDate":"2015-11-01T06:34:56.868Z","categories":["5635b291d209b50d0031dfc5","5635b291d209b50d0031dfc6","5635b291d209b50d0031dfc7","5635b291d209b50d0031dfc8","5635b291d209b50d0031dfc9","5635b291d209b50d0031dfca"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.25.0","version":"0.25"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-05-10T02:25:49.753Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":19,"body":"Telescope uses the [template extension](https://github.com/aldeed/meteor-template-extension) package to let you easily replace any template with your own custom version. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Replacing Templates\"\n}\n[/block]\nTelescope provides two ways of replacing the standard core templates with your own. \n\n#### Automatic Replacement\n\nLet's say you want to replace the `post_title` template with your own template. The easiest way is to create a new template, and then name it `custom_post_title`:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<template name=\\\"custom_post_title\\\">\\n  <!-- my custom content --/>\\n</template>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThe `custom_` prefix tells Telescope to automatically replace the `post_title` template with this one. So you can replace any other template by naming the replacement according to the same `custom_old_template_name` pattern.\n\nYou can also create your own prefix with the `Telescope.config.addCustomPrefix` function. For example here's how the Zeiss theme adds its `zss_` prefix:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Telescope.config.addCustomPrefix(\\\"zss_\\\");\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nNote that prefix that are added last have a higher priority. For example, the `telescope:lib` package adds the `custom_` prefix on load, and Zeiss then adds the `zss_` prefix. So if you have templates named `post_item`, `custom_post_item`, and `zss_post_item`, `post_item` will be replaced by `zss_post_item`, not `custom_post_item`. \n\n#### Manual Replacement\n\nAlternatively, you can also specify a manual override using the `Template.new_template.replaces(\"old_template\")` syntax.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Template.post_title2.replaces(\\\"post_title\\\");\",\n      \"language\": \"javascript\",\n      \"name\": null\n    }\n  ]\n}\n[/block]\nThis code can go in any **client-side** JavaScript file, as long as that file is loaded *after* the `new_template` template. \n\nNote that since the automatic template replacement logic runs in a `Meteor.startup()` block, it will generally take priority over any conflicting manual template replacements. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Troubleshooting Templates\",\n  \"body\": \"To make sure a template is properly loaded, you can call `Template.my_template_name` in your browser console. \\n\\nEnsure that your template contains `<template>...</template>` tags, and check that the name specified in the tags is correct. \\n\\nAlso, if you're using [Custom Packages](doc:custom-packages) to hold your code, make sure you add the template to your `package.js` file, and add the file containing the replacement code *after* your templates in `package.js`.\"\n}\n[/block]\nNote that you should keep using the old template name(in this case, `post_title`) throughout your code, for things such as template includes (i.e. `{{> post_title}}`) and helpers (see below), and Meteor will then transparently swap out the template with `custom_post_title` for you. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Customizing Themes\",\n  \"body\": \"Keep in mind that you always want to replace the **original** template. \\n\\nFor example, sometimes you need to customize a theme which is itself customizing the default templates. For example, you might want to replace the [Zeiss](https://github.com/TelescopeJS/Zeiss) theme's `zss_post_item` template. \\n\\nIn that case you'll want to replace the *original* `post_item` template, and not `zss_post_item`. So the correct code would be `Template.my_post_item.replaces(\\\"post_item\\\")`.\\n\\nNote that some themes also contain their *own* original templates, in which case you *would* replace the theme's template.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Template Helpers\"\n}\n[/block]\nAs of version `0.20`, helpers must be assigned to the *old* template, not the new one. In other words, if you want to use a template helper in `custom_post_title`, you'll have to define it like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Template.post_title.helpers({\\n  myCustomHelper: function () {\\n  \\treturn \\\"foo\\\";\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Email Templates\"\n}\n[/block]\nEmail templates currently only support **automatic** template replacement.\n\nIn other words, to replace the `emailAccountApproved` template, you would simply create a new file named `custom_emailAccountApproved.handlebars` and include it in your app. \n\nNote that since emails are sent from the server, you'll have to include your custom templates on the *server*, not on the client.","excerpt":"","slug":"custom-templates","type":"basic","title":"Custom Templates"}
Telescope uses the [template extension](https://github.com/aldeed/meteor-template-extension) package to let you easily replace any template with your own custom version. [block:api-header] { "type": "basic", "title": "Replacing Templates" } [/block] Telescope provides two ways of replacing the standard core templates with your own. #### Automatic Replacement Let's say you want to replace the `post_title` template with your own template. The easiest way is to create a new template, and then name it `custom_post_title`: [block:code] { "codes": [ { "code": "<template name=\"custom_post_title\">\n <!-- my custom content --/>\n</template>", "language": "html" } ] } [/block] The `custom_` prefix tells Telescope to automatically replace the `post_title` template with this one. So you can replace any other template by naming the replacement according to the same `custom_old_template_name` pattern. You can also create your own prefix with the `Telescope.config.addCustomPrefix` function. For example here's how the Zeiss theme adds its `zss_` prefix: [block:code] { "codes": [ { "code": "Telescope.config.addCustomPrefix(\"zss_\");", "language": "text" } ] } [/block] Note that prefix that are added last have a higher priority. For example, the `telescope:lib` package adds the `custom_` prefix on load, and Zeiss then adds the `zss_` prefix. So if you have templates named `post_item`, `custom_post_item`, and `zss_post_item`, `post_item` will be replaced by `zss_post_item`, not `custom_post_item`. #### Manual Replacement Alternatively, you can also specify a manual override using the `Template.new_template.replaces("old_template")` syntax. [block:code] { "codes": [ { "code": "Template.post_title2.replaces(\"post_title\");", "language": "javascript", "name": null } ] } [/block] This code can go in any **client-side** JavaScript file, as long as that file is loaded *after* the `new_template` template. Note that since the automatic template replacement logic runs in a `Meteor.startup()` block, it will generally take priority over any conflicting manual template replacements. [block:callout] { "type": "info", "title": "Troubleshooting Templates", "body": "To make sure a template is properly loaded, you can call `Template.my_template_name` in your browser console. \n\nEnsure that your template contains `<template>...</template>` tags, and check that the name specified in the tags is correct. \n\nAlso, if you're using [Custom Packages](doc:custom-packages) to hold your code, make sure you add the template to your `package.js` file, and add the file containing the replacement code *after* your templates in `package.js`." } [/block] Note that you should keep using the old template name(in this case, `post_title`) throughout your code, for things such as template includes (i.e. `{{> post_title}}`) and helpers (see below), and Meteor will then transparently swap out the template with `custom_post_title` for you. [block:callout] { "type": "info", "title": "Customizing Themes", "body": "Keep in mind that you always want to replace the **original** template. \n\nFor example, sometimes you need to customize a theme which is itself customizing the default templates. For example, you might want to replace the [Zeiss](https://github.com/TelescopeJS/Zeiss) theme's `zss_post_item` template. \n\nIn that case you'll want to replace the *original* `post_item` template, and not `zss_post_item`. So the correct code would be `Template.my_post_item.replaces(\"post_item\")`.\n\nNote that some themes also contain their *own* original templates, in which case you *would* replace the theme's template." } [/block] [block:api-header] { "type": "basic", "title": "Template Helpers" } [/block] As of version `0.20`, helpers must be assigned to the *old* template, not the new one. In other words, if you want to use a template helper in `custom_post_title`, you'll have to define it like this: [block:code] { "codes": [ { "code": "Template.post_title.helpers({\n myCustomHelper: function () {\n \treturn \"foo\";\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Email Templates" } [/block] Email templates currently only support **automatic** template replacement. In other words, to replace the `emailAccountApproved` template, you would simply create a new file named `custom_emailAccountApproved.handlebars` and include it in your app. Note that since emails are sent from the server, you'll have to include your custom templates on the *server*, not on the client.