You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

overview.md 6.8KB

5 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. +++
  2. title = "Overview"
  3. weight = 10
  4. +++
  5. Gutenberg uses the [Tera](https://tera.netlify.com) template engine and is very similar
  6. to Jinja2, Liquid or Twig.
  7. As this documentation will only talk about how templates work in Gutenberg, please read
  8. the [Tera template documentation](https://tera.netlify.com/docs/templates/) if you want
  9. to learn more about it first.
  10. All templates live in the `templates` directory. If you are not sure what variables are available in a template, you can just stick `{{ __tera_context }}` in it
  11. to print the whole context.
  12. A few variables are available on all templates minus RSS and sitemap:
  13. - `config`: the [configuration](./documentation/getting-started/configuration.md) without any modifications
  14. - `current_path`: the path (full URL without the `base_url`) of the current page, never starting with a `/`
  15. - `current_url`: the full URL for that page
  16. ## Standard Templates
  17. By default, Gutenberg will look for three templates: `index.html`, which is applied
  18. to the site homepage; `section.html`, which is applied to all sections (any HTML
  19. page generated by creating a directory within your `content` directory); and
  20. `page.html`, which is applied to all pages (any HTML page generated by creating a
  21. `.md` file within your `content` directory).
  22. The homepage is always a section (regardless of whether it contains other pages).
  23. Thus, the `index.html` and `section.html` templates both have access to the
  24. section variables. The `page.html` template has access to the page variables.
  25. The page and section variables are described in more detail in the next section of this documentation.
  26. ## Built-in Templates
  27. Gutenberg comes with three built-in templates: `rss.xml`, `sitemap.xml`, and
  28. `robots.txt` (each described in their own section of this documentation).
  29. Additionally, themes can add their own templates, which will be applied if not
  30. overridden. You can override built-in or theme templates by creating a template with
  31. same name in the correct path. For example, you can override the RSS template by
  32. creating a `templates/rss.xml` file.
  33. ## Custom Templates
  34. In addition to the standard `index.html`, `section.html`, and `page.html` templates,
  35. you may also create custom templates by creating a `.html` file in the `templates`
  36. directory. These custom templates will not be used by default. Instead, the custom template will _only_ be used if you apply it by setting the `template` front-matter variable to the path for that template (or if you `include` it in another template that is applied). For example, if you created a custom template for your site's About page called `about.html`, you could apply it to your `about.md` page by including the following front matter in your `about.md` page:
  37. ```md
  38. +++
  39. title = "About Us"
  40. template = "about.html"
  41. +++
  42. ```
  43. Custom templates are not required to live at the root of your `templates` directory.
  44. For example, `product_pages/with_pictures.html` is a valid template.
  45. ## Built-in filters
  46. Gutenberg adds a few filters, in addition of the ones already present in Tera.
  47. ### markdown
  48. Converts the given variable to HTML using Markdown. This doesn't apply any of the
  49. features that Gutenberg adds to Markdown: internal links, shortcodes etc won't work.
  50. By default, the filter will wrap all text into a paragraph. To disable that, you can
  51. pass `true` to the inline argument:
  52. ```jinja2
  53. {{ some_text | markdown(inline=true) }}
  54. ```
  55. ### base64_encode
  56. Encode the variable to base64.
  57. ### base64_decode
  58. Decode the variable from base64.
  59. ## Built-in global functions
  60. Gutenberg adds a few global functions to Tera in order to make it easier to develop complex sites.
  61. ### `get_page`
  62. Takes a path to a `.md` file and returns the associated page
  63. ```jinja2
  64. {% set page = get_page(path="blog/page2.md") %}
  65. ```
  66. ### `get_section`
  67. Takes a path to a `_index.md` file and returns the associated section
  68. ```jinja2
  69. {% set section = get_section(path="blog/_index.md") %}
  70. ```
  71. If you only need the metadata of the section, you can pass `metadata_only=true` to the function:
  72. ```jinja2
  73. {% set section = get_section(path="blog/_index.md", metadata_only=true) %}
  74. ```
  75. ### ` get_url`
  76. Gets the permalink for the given path.
  77. If the path starts with `./`, it will be understood as an internal
  78. link like the ones used in markdown.
  79. ```jinja2
  80. {% set url = get_url(path="./blog/_index.md") %}
  81. ```
  82. This can also be used to get the permalinks for static assets for example if
  83. we want to link to the file that is located at `static/css/app.css`:
  84. ```jinja2
  85. {{/* get_url(path="css/app.css") */}}
  86. ```
  87. By default, assets will not have a trailing slash. You can force one by passing `trailing_slash=true` to the `get_url` function.
  88. An example is:
  89. ```jinja2
  90. {{/* get_url(path="css/app.css", trailing_slash=true) */}}
  91. ```
  92. In the case of non-internal links, you can also add a cachebust of the format `?t=1290192` at the end of a URL
  93. by passing `cachebust=true` to the `get_url` function.
  94. ### `get_taxonomy_url`
  95. Gets the permalink for the taxonomy item found.
  96. ```jinja2
  97. {% set url = get_taxonomy_url(kind="categories", name=page.taxonomies.category) %}
  98. ```
  99. The `name` will almost come from a variable but in case you want to do it manually,
  100. the value should be the same as the one in the front-matter, not the slugified version.
  101. ### `get_taxonomy`
  102. Gets the whole taxonomy of a specific kind.
  103. ```jinja2
  104. {% set categories = get_taxonomy_url(kind="categories") %}
  105. ```
  106. ### `load_data`
  107. Loads data from a file. Supported file types include *toml*, *json* and *csv*.
  108. The `path` argument specifies the path to the data file relative to your content directory.
  109. ```jinja2
  110. {% set data = load_data(path="blog/story/data.toml") %}
  111. ```
  112. The optional `kind` argument allows you to specify and override which data type is contained
  113. within the file specified in the `path` argument. Valid entries are *"toml"*, *"json"*
  114. or *"csv"*.
  115. ```jinja2
  116. {% set data = load_data(path="blog/story/data.txt", kind="json") %}
  117. ```
  118. For *toml* and *json* the data is loaded into a structure matching the original data file,
  119. however for *csv* there is no native notion of such a structure. Instead the data is seperated
  120. into a data structure containing *headers* and *records*. See the example below to see
  121. how this works.
  122. In the template:
  123. ```jinja2
  124. {% set data = load_data(path="blog/story/data.csv") %}
  125. ```
  126. In the *blog/story/data.csv* file:
  127. ```csv
  128. Number, Title
  129. 1,Gutenberg
  130. 2,Printing
  131. ```
  132. The equivalent json value of the parsed data would be stored in the `data` variable in the
  133. template:
  134. ```json
  135. {
  136. "headers": ["Number", "Title"],
  137. "records": [
  138. ["1", "Gutenberg"],
  139. ["2", "Printing"]
  140. ],
  141. }
  142. ```
  143. ### `trans`
  144. Gets the translation of the given `key`, for the `default_language` or the `language given
  145. ```jinja2
  146. {{/* trans(key="title") */}}
  147. {{/* trans(key="title", lang="fr") */}}
  148. ```
  149. ### `resize_image`
  150. Resizes an image file.
  151. Pease refer to [_Content / Image Processing_](./documentation/content/image-processing/index.md) for complete documentation.