blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-08-24 15:28:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update math function page to include "add" usage with strings

Browse Source 
Closes rdwatters/hugo-docs-concept#85
This commit is contained in:
Ryan Watters
2017-04-12 15:24:32 -05:00
parent da02241839
commit ab7f43e181
1 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/functions/math.md
+35
View File
@@ -29,3 +29,38 @@ There are 6 basic mathematical operators that can be used in Hugo templates:
| `modBool`| Boolean of modulus of two integers. Evaluates to `true` if = 0. | `{{modBool 15 3}}` → true |
| `mul` | Multiplies two integers. | `{{mul 2 3}}` → 6 |
| `sub` | Subtracts two integers. | `{{sub 3 2}}` → 1 |
## Using `add` with Strings
You can also use the `add` function with strings. You may like this functionality in many use cases, including creating new variables by combining page- or site-level variables with other strings.
For example, social media sharing with [Twitter Cards][cards] requires the following `meta` link in your site's `<head>` to display Twitter's ["Summary Card with Large Image"][twtsummary]:
```html
<meta name="twitter:image" content="http://yoursite.com/images/my-twitter-image.jpg">
```
Let's assume you have an `image` field in the front matter of each of your content files:
```yaml
---
title: My Post
image: my-post-image.jpg
---
```
You can then concatenate the `image` value (string) with the path to your `images` directory in `static` and leverage a URL-related templating function for increased flexibility:
{{% code file="partials/head/twitter-card.html" %}}
```html
{{$socialimage := add "images/" .Params.image}}
<meta name="twitter:image" content="{{ $socialimage | absURL }}">
```
{{% /code %}}
{{% note %}}
The `add` example above makes use of the [`absURL` function](/functions/absurl/). `absURL` is a more elegant and future-proofed approach to creating URLs than combining `.Site.BaseURL` with hard-coded strings&mdash;a templating style sometimes seen in older [Hugo themes](/themes). `absURL` works very well, for example, when creating `link` references to stylesheets and other metadata in your rendered site's `<head>`.
{{% /note %}}
[cards]: https://dev.twitter.com/cards/overview
[twtsummary]: https://dev.twitter.com/cards/types/summary-large-image