# User documentation A gorgeous responsive theme for Hugo blog framework [![Tranquilpeak](../showcase.png)](https://tranquilpeak.kakawait.com) Tranquilpeak theme is compatible with Hugo `v0.53`. This documentation will help you to install hugo-tranquilpeak-theme and configure it to use all features which it provides. If you want to report a bug or ask a question, [create an issue](https://github.com/kakawait/hugo-tranquilpeak-theme/issues/new). ## Summary - [General](#general) - [Features](#features) - [Missing features from original *Hexo* version](#missing-features-from-original-hexo-version) - [Requirements](#requirements) - [Installation](#installation) - [Tranquilpeak configuration](#tranquilpeak-configuration) - [Language configuration](#language-configuration) - [Menu translation](#menu-translation) - [Setting up default theme to Tranquilpeak](#setting-up-default-theme-to-tranquilpeak) - [Define date format](#define-date-format) - [Define global keywords](#define-global-keywords) - [Theme configuration](#theme-configuration) - [Sidebar](#sidebar) - [Header](#header) - [Author](#author) - [Customization](#customization) - [Add custom JS or CSS using configuration](#add-custom-js-or-css-using-configuration) - [Integrated services](#integrated-services) - [Disqus](#disqus) - [Gitalk](#gitalk) - [Google Analytics](#google-analytics) - [Gravatar](#gravatar) - [Facebook](#facebook) - [Sharing options](#sharing-options) - [Enable pages](#enable-pages) - [Integrated services configuration](#integrated-services-configuration) - [Google Analytics](#google-analytics-1) - [Exclude hostname (localhost) while writing articles](#exclude-hostname-localhost-while-writing-articles) - [Social cards](#social-cards) - [Quick & easy modifications](#quick--easy-modifications) - [Prerequisites](#prerequisites) - [Change global style](#change-global-style) - [Change code coloration (Highlight.js theme)](#change-code-coloration-highlightjs-theme) - [Writing posts](#writing-posts) - [Front-matter settings](#front-matter-settings) - [Define post excerpt](#define-post-excerpt) - [Display table of contents](#display-table-of-contents) - [Tags](#tags) - [Alert](#alert) - [Highlight Text](#highlight-text) - [Image](#image) - [Tabbed code block](#tabbed-code-block) - [Wide image](#wide-image) - [Writing pages](#writing-pages) - [Running](#running) ## General - **Authors**: [Thibaud Leprêtre (kakawait)](https://github.com/kakawait) and [Louis Barranqueiro (LouisBarranqueiro)](https://github.com/LouisBarranqueiro) - **Version**: 0.5.3-BETA (based on Hexo version 3.1.0) - **Compatibility**: Hugo v0.53 ## Features **General features:** - Fully responsive - Optimized for tablets & mobiles - Configurable menu of the sidebar - Pages to filter tags, categories and archives - Background cover image - Beautiful about page - Support Open Graph protocol - Easily customizable (fonts, colors, layout elements, code coloration, etc..) - Support internationalization (i18) **Posts features:** - Thumbnail image - Cover image - Responsive videos & images - Sharing options - Navigation menu - GitHub theme for code highlighting (customizable) - Image gallery - Tags for images (FancyBox), wide images, tabbed code blocks, highlighted text, alerts - Table of contents **Integrated services:** - Disqus - Gitalk - Google analytics - Gravatar - Facebook Insights ### Missing features from original *Hexo* version - [ ] Algolia (https://github.com/kakawait/hugo-tranquilpeak-theme/issues/8) - [ ] Pagination custumization `tagPagination`, `categoryPagination` and `archivePagination` (https://github.com/kakawait/hugo-tranquilpeak-theme/issues/17) **ATTENTION** following features will not be possible due to *Hugo* limitations - Archives pages by years `/archives/2015` - Archives pages by month `/archives/2015/01` ## Requirements 1. **Hugo** : `v0.53` ## Installation 1. Simply clone the repository `git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git` on `themes` folder 2. Rename the folder in `hugo-tranquilpeak-theme` (if necessary) and place it in `themes` folder of your Hugo blog ```shell mkdir themes cd themes git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git ``` ## Tranquilpeak configuration If it's your first time using Hugo, please check [Hugo official documentation](https://gohugo.io/overview/introduction/) ### Language configuration Simply edit following value in `config.{toml,yaml,json}`: ```toml defaultContentLanguage = "en-us" ``` by one of the following code (code is between `()`): - Chinese (`zh-cn`) - Chinese Traditional (`zh-tw`) - English (`en-us`) - Deutsch (`de-de`) - French (`fr-fr`) - Japanase (`ja`) - Portuguese (`pt-br`) - Russian (`ru`) - Spanish (`es-es`) - Vietnamese (`vi`) - Dutch (`nl-nl`) - Swedish (`sv-se`) If your language is not available, follow this guidelines (E.g : add swedish language (`sv-se`)) : 1. Set `defaultContentLanguage` to `sv-se` in Hugo configuration file `config.{toml,yaml,json}` 2. Create `sv-se.yaml` file in `theme/tranquilpeak/i18n/` folder 3. Copy the content of `theme/tranquilpeak/i18n/en-us.yaml` and paste it to `sv-se.yml` file 4. Replace all strings in english by their translation in swedish #### Menu translation Menus are defined using Hugo menus https://gohugo.io/extras/menus/ You can translate menu entries by setting `identifier` that matches a translation key. By using this way, `name` will not be use at all. ### Setting up default theme to Tranquilpeak Modify the theme in `config.{toml,yml,json}` by changing `theme` variable to `tranquilpeak` ### Define date format By default date will be printed like following: `mmmm d, yyyy`, example: "January 2, 2006" You can customize it by setting ```toml [params] dateFormat = "2 January 2006" ``` Will produce: "2 January 2006" ATTENTION: date format should respect `go` `Time` package syntax, please refer to https://golang.org/pkg/time/ **Moreover, if you are using fully named month (short named month like "jan", "feb", etc is not supported), month will be translated.** Example: ```toml defaultContentLanguage = "fr-fr" ``` "21 July 2006" will be output "21 Juillet 2006". ### Define global keywords You can define keywords for search engines. These keywords will be added on all pages. ```toml [params] keywords = ["development", "next-gen"] ``` ### Theme configuration ### Backup your configuration: ```bash cp config.{toml,yml,json} config.{toml,yml,json}.backup ``` Copy example configuration ```bash cp themes/tranquilpeak/exampleSite/config.toml . ``` Complete `config.toml` with your information. Read above sections to have more information. #### Sidebar The sidebar is powerful and easily configurable. You can add groups of links and links much as you want. ```toml [[menu.main]] weight = 1 identifier = "home" name = "Home" pre = "" url = "/" [[menu.main]] weight = 2 identifier = "categories" name = "Categories" pre = "" url = "/categories" [[menu.main]] weight = 3 identifier = "tags" name = "Tags" pre = "" url = "/tags" [[menu.main]] weight = 4 identifier = "archives" name = "Archives" pre = "" url = "/archives" [[menu.main]] weight = 5 identifier = "about" name = "About" pre = "" url = "/#about" [[menu.links]] weight = 0 identifier = "github" name = "GitHub" pre = "" url = "https://github.com/kakawait" [[menu.links]] weight = 1 identifier = "stackoverflow" name = "Stack Overflow" pre = "" url = "https://stackoverflow.com/users/636472/kakawait" [[menu.misc]] weight = 0 identifier = "rss" name = "RSS" pre = "" url = "/index.xml" ``` | Variable | Description | Type | |------------|---------------------------------------|---------------| | weight | menu is ordered by weight | int | | identifier | unique identifier for entry | string | | name | title to be display | string | | pre | icon to be display a left of the name | template.HTML | | url | menu entry url | string | `identifier` can be use for translation see [Menu translation](#menu-translation). #### Header The right link of the header is customizable. You can add a link (as an icon) at the right of the header instead of the author's gravatar image or author's picture. By default, author's gravatar or author's picture is displayed. E.g to display a shortcut to open algolia search window : ```toml [params.header.rightLink] class = "open-algolia-search" icon = "search" url = "/#search" ``` |Variable|Description| |---|---| |url|URL of the link. If the URL is internal, domain name is not necessary| |icon|Name of the font awesome icon class without the `fa-` (Go to [font-awesome icons](http://fontawesome.io/icons/) to find class name of icon)| |class|CSS Class added to the link| #### Author ```toml [author] name = "Thibaud Leprêtre" bio = "Super bio with markdown support **COOL**" job = "Java backend developer" location = "France" # Your Gravatar email. Overwrite `author.picture` everywhere in the blog gravatarEmail = "thibaud.lepretre@gmail.com" # Your profile picture # Overwritten by your gravatar image if `author.gravatarEmail` is filled picture = "https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png" # Your Twitter username without the @. E.g : tranquilpeak twitter = "thibaudlepretre" # Your google plus profile id. E.g : +ThibaudLepretre or 114625208755123718311 googlePlus = "+ThibaudLepretre" ``` | Variable | Description | |-----------------|--------------------------------------------------------------------------------------| | name | Your name | | gravatarEmail | This address will be used to get your gravatar image if you activate gravatar option | | bio | Your biography (Markdown and HTML supported) | | job | Your job | | location | Your location | | picture | Your profile picture. Overwritten by your gravatar image if gravatar email is filled | | twitter | Your Twitter username without the @. E.g : `thibaudlepretre` | | googlePlus | Your google plus profile id. E.g : `+ThibaudLepretre` or `114625208755123718311` | #### Customization **ATTENTION** not all customizations are documented here, you may checkout [sample config.toml](https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/exampleSite/config.toml). ```toml [params] sidebarBehavior = 1 thumbnailImage = true thumbnailImagePosition = "right" autoThumbnailImage = true coverImage = "images/cover.jpg" favicon = /favicon.png imageGallery = true hierarchicalCategories = true syntaxHighlighter = 'highlight.js' ``` | Variable | Description | |--------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | sidebarBehavior | Define the behavior of the header and sidebar : | | clearReading | Hide sidebar on all page (that is part of [mainSections](https://gohugo.io/functions/where/#mainsections)) to let page take full width to improve reading, and enjoy wide images and cover images. Useless if `sidebarBehavior` is equal to `3` or `4`. (true: enable, false: disable). Default behavior : `params.clearReading` value in theme configuration file. | | thumbnailImage | Display thumbnail image of each post on index pages | | thumbnailImagePosition | Display thumbnail image at the right of title in index pages (`right`, `left` or `bottom`). Set this value to `right` if you have old posts to keep the old style on them and define `thumbnailImagePosition` on a post to overwrite this setting. (Default: `right`) | | autoThumbnailImage | Automatically select the cover image or the first photo from the gallery of a post if there is no thumbnail image as the thumbnail image. Set this value to `true` if you have old posts that use the cover image or the first photo as the thumbnail image and set `autoThumbnailImage` to `false` on a post to overwrite this setting. (Default : `true`) | | coverImage | Your blog cover picture. **I STRONGLY recommend you to use a CDN to speed up loading of pages. There is many free CDN like Cloudinary or you can also use indirectly by using services like Google Photos.** | | favicon | Your favicon path (Default: `/favicon.png`) | | imageGallery | Display an image gallery at the end of a post which have `photos` variables. (false: disabled, true: enabled) | | hierarchicalCategories | Define categories will create hierarchy between parents: `categories = ["foo", "bar"]` will consider "bar" a sub-category of "foo". If false it will flat categories. | | customCSS (_DEPRECATED see [Add custom JS or CSS using configuration](#add-custom-js-or-css-using-configuration)_) | Define files with css that override or extend the theme css: `customCSS` = ["css/mystyles.css"]. | | customJS (_DEPRECATED see [Add custom JS or CSS using configuration](#add-custom-js-or-css-using-configuration)_) | Define files with js that override or extend the theme js: `customJS` = ["js/myscripts.js"]. | | syntaxHighlighter | Define which syntax highlighter you want to use (if not set syntax highlighting is disable) between `highlight.js` and `prism.js` | E.g : A category page look like this with `hierarchicalCategories = true` : ![hierarchicalCategories true](img/with_hierarchical_categories.png) The same page with `hierarchicalCategories = false`: ![hierarchicalCategories false](img/without_hierarchical_categories.png) ##### Add custom JS or CSS using configuration If you need to add some additionnal javascript or css files to your blog without forking or overriding theme itself you could use following configuration: ```toml [params] [[params.customJS]] src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/go.min.js" integrity = "sha256-LVuWfOU0rWFMCJNl1xb3K2HSWfxtK4IPbqEerP1P83M=" crossorigin = "anonymous" async = true defer = true [[params.customJS]] src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/dockerfile.min.js" integrity = "sha256-putofyQv7OB569xAldpyBnHJ0Uc+7VGp5Us05IgDGss=" crossorigin = "anonymous" async = true defer = true [[params.customJS]] src = "js/myscript.js" [[params.customCSS]] href = "css/mystyle.css" ``` **ATTENTION** there is no limitation on key structures and each keys will be converted as tag attributes. Futhermore, even if previous syntax is still supported (`customJS = ["js/myscripts.js"]`), you can't mix both new and old syntax. #### Integrated services For privacy settings please refer to https://gohugo.io/about/hugo-and-gdpr/ ##### Disqus ```toml disqusShortname = [params.comment.disqus] enable = true ``` | Variable | Description | |----------|-------------| | disqusShortname | Your Disqus shortname | | enable | Toggle disqus globally | ##### Gitalk ```toml [params.comment.gitalk] enable = true # clientId = # clientSecret = # owner = # repo = # See all options: https://github.com/gitalk/gitalk#options [params.comment.gitalk.options] language = "en" perPage = 10 distractionFreeMode = false enableHotKey = true pagerDirection = "first" ``` | Variable | Description | |----------|-------------| | enable | Toggle gitalk globally | | clientId | GitHub Application Client ID | | clientSecret | GitHub Application Client Secret | | owner | GitHub repository owner. Can be personal user or organization | | repo | GitHub repository | | _options_ | See all available options on https://github.com/gitalk/gitalk#options | ##### Google Analytics ```toml googleAnalytics = [params.googleAnalytics] async = true ``` | Variable | Description | |----------|-------------| | googleAnalytics | Your Google analystics web property ID : UA-XXXXX-X | | async | Load Google analytics asynchronously | ##### Gravatar ```toml [author] gravatarEmail = ``` | Variable | Description | |----------|-------------| | gravatarEmail | Your gravatar email. Overwrite `author.picture` everywhere in the blog | ##### Facebook ```toml [params] fbAdminIds = fbAppId = ``` | Variable | Description | |----------|-------------| | fbAdminIds | Your Facebook user ids used to connect your blog with your facebook user accounts (Facebook Insights). Use array syntax. E.g : `[9830047, 1003342]`. Visit [Facebook docs](https://developers.facebook.com/docs/platforminsights/domains) for more information. | | fbAppId | Your Facebook app id used to connect your blog with your facebook app account (Facebook Insights). E.g : `9841307`. Visit [Facebook docs](https://developers.facebook.com/docs/platforminsights/domains) for more information. | #### Sharing options ``` toml [params] [[params.sharingOptions]] name = "Facebook" icon = "fab fa-facebook-square" url = "https://www.facebook.com/sharer/sharer.php?u=%s" [[params.sharingOptions]] name = "Twitter" icon = "fab fa-twitter" url = "https://twitter.com/intent/tweet?text=%s" [[params.sharingOptions]] name = "Google+" icon = "fab fa-google-plus" url = "https://plus.google.com/share?url=%s" ``` You can comment and uncomment to enable or disable sharing options. If your own sharing options, simply add new sharing options on your configuration. E.g with **foo_bar** social network: ```toml [params] [[params.sharingOptions]] name = "Foo bar" icon = "fas fa-foo-bar" url = "https://www.foo-bar.com/sharer/sharer.php?u=%s" ``` |Variable|Description| |---|---| |name| Name of your sharing site.| |icon|Name of the fontawesome icon class (Go to [font-awesome icons](http://fontawesome.io/icons/) to find class name of icon)| |url|URL of the link. use %s to specify where to put the permalink.| #### Enable pages Tranquilpeak provides you 2 pages to display all posts title and date by tags, by categories, by date and an about page. To enable one of this pages simply add following [taxonomies](https://gohugo.io/taxonomies/overview/): ```toml [taxonomies] tag = "tags" category = "categories" ``` ## Integrated services configuration ### Google Analytics #### Exclude hostname (localhost) while writing articles While you are writing articles, you need to check the result a lot of times before deploying your site. If you have enable Google analytics service, Google will include all requests done, even when hostname is localhost and this can greatly skew the results. To overcome this, you have to add a filter on Google Analytics website. Follow these steps, to add new filter : 1. Sign in to your Google Analytics account 2. Select the **Admin** tab and navigate to the **property** in which you want to create the filter **(Account > Property > View)** 3. In **View** column, click on **Filters** button 4. Click on **+ NEW FILTER** button 6. Enter a name for the filter 7. Select **Custom filter**, **Filter Field** : `Hostname`, **Filter Pattern** : `(.*?localhost.*?)` 8. Click on **Save** button ### Social cards You can configure how links to your site will appear in Twitter and/or Facebook. There are several ways of setting up card parameters: * **Title**: if in a page with title (like a post) it will use post title, otherwise, will use site title. * **Description**: will use article summary, if it does not exist, will use site description. * **Site author** (twitter only): will use the value of `twitter` field on ``[[params.Author]]`` section of your `config.toml` file. * **Content author** (twitter only): will use the value of the field `twitter` in your document header. If not specified, will use the **Site author** field value. * **Image**: will use the following fields in order, if one is not available, the next will be taken: thumbnail of document, cover of document, gallery images, gravatar email then author picture, . ## Quick & easy modifications ### Prerequisites Since you are going to edit the theme, you have to install all the necessary to build it after changes : [Installation](https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/developer.md#installation) **Run command in theme folder : `hugo-blog/themes/tranquilpeak`** ### Change global style If you want to change font families, font size, sidebar color, things like that, take a look at `source/scss/utils/_variables.scss` file. This file contains global variables used in this theme. **Build the theme after changes to see changes.** ### Change code coloration (Highlight.js theme) Tranquilpeak integrate its own highlight.js theme inspired by GitHub. Of course, you can replace it with an other theme found on highlight.js repository. Since Hexo use different CSS class names, all theme are not ready out of the box, but it is very easy to make them compatible. Follow these steps : 1. Get your theme here : [Highlight.js theme](https://github.com/isagalaev/highlight.js/tree/master/src/styles) or create yours 2. Follow guidelines in `src/scss/themes/hljs-custom.scss` file 3. Build the theme with `npm run prod`. Learn more about Grunt tasks : [Grunt tasks](https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/blob/master/docs/developer.md#grunt-tasks) ## Writing posts To write articles, you have to use Markdown language. [Here](https://guides.github.com/features/mastering-markdown/#examples) you can find the main basics of Markdown syntax. Please note, there are many different versions of Markdown and some of them are not supported by Hugo. **I STRONGLY recommend you to use a CDN to speed up loading of pages. There is many free CDN like Cloudinary or you can also use indirectly by using services like Google Photos.** ### Front-matter settings Tranquilpeak introduces new variables to give you a lot of possibilities. Example : ```markdown disqusIdentifier: fdsF34ff34 keywords: - javascript - hexo clearReading: true thumbnailImage: image-1.png thumbnailImagePosition: bottom autoThumbnailImage: yes metaAlignment: center coverImage: image-2.png coverCaption: "A beautiful sunrise" coverMeta: out coverSize: full coverImage: image-2.png gallery: - image-3.jpg "New York" - image-4.png "Paris" - http://i.imgur.com/o9r19kD.jpg "Dubai" - https://example.com/original.jpg https://example.com/thumbnail.jpg "Sidney" comments: false showTags: true showPagination: true showSocial: true showDate: true summary: "This is a custom summary and does *not* appear in the post." ``` |Variable|Description| |---|---| |disqusIdentifier|Define a unique string which is used to look up a page's thread in the Disqus system.| |keywords|Define keywords for search engines. you can also define global keywords in Hugo configuration file.| |clearReading|Hide sidebar on all article page to let article take full width to improve reading, and enjoy wide images and cover images. Useless if `params.sidebarBehavior` is equal to `3` or `4`. (true: enable, false: disable). Default behavior : `params.clearReading` value in theme configuration file.| |autoThumbnailImage|Automatically select the cover image or the first photo from the gallery of a post if there is no thumbnail image as the thumbnail image. `autoThumbnailImage` overwrite the setting `autoThumbnailImage` in the theme configuration file| |thumbnailImage|Image displayed in index view.| |thumbnailImagePosition|Display thumbnail image at the right of title in index pages (`right`, `left` or `bottom`). `thumbnailImagePosition` overwrite the setting `thumbnailImagePosition` in the theme configuration file| |metaAlignment|Meta (title, date and categories) alignment (right, left or center). Default behavior : left| |coverImage|Image displayed in full size at the top of your post in post view. If thumbnail image is not configured, cover image is also used as thumbnail image. Check the beautiful demo here : [Cover image demo](https://tranquilpeak.kakawait.com/2015/05/cover-image-showcase/)| |coverSize|`partial`: cover image take a part of the screen height (60%), `full`: cover image take the entire screen height.| |coverCaption|Add a caption under the cover image : [Cover caption demo](https://tranquilpeak.kakawait.com/2015/05/cover-image-showcase/)| |coverMeta|`in`: display post meta (title, date and categories) on cover image, `out`: display meta (title, date and categories) under cover image as usual. Default behavior : `in`| |gallery|Images displayed in an image gallery (with fancybox) at the end of the post. If thumbnail image is not configured and cover image too, the first photo is used as thumbnail image. format: `original url [thumbnail url] [caption]`, E.g : `https://example.com/original.jpg https://example.com/thumbnail.jpg "New York"`| |comments|`true`: Show the comment of the post.| |showDate|`true`: Show the date when `true` (default)| |showTags|`true`: show tags of this page.| |showPagination|`true`: show pagination.| |showSocial|`true`: show social button such as share on Twitter, Facebook...| |showMeta|`true`: Show post meta (date, categories).| |showActions|`true`: Show post actions (navigation, share links).| |summary|Custom excerpt text to show on the homepage.| |link|Override default URL/link for a given article/page.| Example: A post on index page will look like this with :`thumbnailImagePosition` set to `bottom`: ![thumbnail-image-position-bottom](https://s3-ap-northeast-1.amazonaws.com/tranquilpeak-hexo-theme/docs/1.4.0/TIP-bottom-400.jpg) The same with : `thumbnailImagePosition` set to `right`: ![thumbnail-image-position-right](https://s3-ap-northeast-1.amazonaws.com/tranquilpeak-hexo-theme/docs/1.4.0/TIP-right-400.png) The same with : `thumbnailImagePosition` set to `left`: ![thumbnail-image-position-left](https://s3-ap-northeast-1.amazonaws.com/tranquilpeak-hexo-theme/docs/1.4.0/TIP-left-400.png) ### Define post excerpt Use: - `` to define post excerpt and keep the post excerpt in the post content - For a custom exerpt *not* in the post content, use the `summary` front-matter variable. Markdown syntax is supported. ### Display table of contents Hugo Tranquilpeak theme provides a shortcode for adding table of content inside your content. syntgax: ``` {{< toc >}} ``` However you may have to update your hugo `config.toml` configuration to be sure that `startLevel` is matching your content. By default (see [official documentation](https://gohugo.io/getting-started/configuration-markup/#table-of-contents)) Hugo detects table of content starting level 2, that mean `

my title

` or `## my title`. If you used to write `# my title` and so transformed to `

my title

`, the table of content will be empty by default if you're not updating `startLevel` to `startLevel = 1` ```toml [markup] [markup.tableOfContents] endLevel = 3 ordered = false startLevel = 1 ``` ### Tags Tranquilpeak introduce new tags to display alert messages, images in full width and create beautiful galleries. #### Alert ![alert-tag](https://s3-ap-northeast-1.amazonaws.com/tranquilpeak-hexo-theme/docs/1.6/alert-tag.png) Alert tag is useful to highlight a content like a tips or a warning. Check it live here : [Alert tag demo](https://tranquilpeak.kakawait.com/2014/10/tags-plugins-showcase/#alert) Syntax: ``` {{< alert [classes] >}} content {{< /alert >}} ``` E.g: ``` {{< alert danger no-icon >}} Here is a danger alert without icon {{< /alert >}} ``` |Argument|Description| |---|---| |Classes|| #### Highlight Text ![highlight_text-tag](https://s3-ap-northeast-1.amazonaws.com/tranquilpeak-hexo-theme/docs/1.6/highlight_text-tag.png) Highlight text tag is useful to highlight an interesting part in a text. Check it live here : [Highlight text tag demo](https://tranquilpeak.kakawait.com/2014/10/tags-plugins-showcase/#highlight-text) Syntax: ``` {{< hl-text [classes] >}} content {{< /hl-text >}} ``` E.g: ``` {{< hl-text danger >}} your highlighted text {{< /hl-text >}} ``` |Argument|Description| |---|---| |Classes|classes : | **It's important to put the paragraph that contains highlight text tag inside** `

...

` **otherwise the following content may not be rendered.** #### Image Image tag is useful to add images and create beautiful galleries. Check what are the possibilities here : [Image tag demo](https://tranquilpeak.kakawait.com/2014/10/tags-plugins-showcase/#image) Syntax: ``` {{< image classes="[classes]" src="[/path/to/image]" thumbnail="[/path/to/thumbnail]" group="[group-name]" thumbnail-width="[width of thumbnail]" thumbnail-height="[height of thumbnail]" title="[title text]" >}} ``` E.g: ``` {{< image classes="fancybox right clear" src="image2.png" thumbnail="http://google.fr/images/image125.png" group="group:travel" thumbnail-width="150px" thumbnail-height="300px" title="A beautiful sunrise" >}} ``` |Argument|Description| |---|---| |classes (optional)|You can add css classes to stylize the image. Separate class with whitespace. Tranquilpeak integrate many css class to create nice effects : | |group (optional)| Name of a group, used to create a gallery. **Only for image with `fancybox` css class**| |src| Path to the original image.| |thumbnail (optional)| Path to the thumbnail image. If empty, the original image will be displayed.| |thumbnail-width (optional)| Width to the thumbnail image. If the thumbnail image is empty, width will be attached to thumbnail image created from original image. E.g : `150px` or `85%`.| |thumbnail-height (optional)| Height to the thumbnail image. If the thumbnail image is empty, height will be attached to thumbnail image created from original image. E.g : `300px` or `20%`.| |title (optional)| Title of image displayed in a caption under image. `Alt` HTML attribute will use this title. E.g : `"A beautiful sunrise"`.| #### Tabbed code block Tabbed code blocks are useful to group multiple code blocks related. For example, the source code of a web component (html, css and js). Or compare a source code in different languages. ![tabbed_codeblock-tag](https://s3-ap-northeast-1.amazonaws.com/tranquilpeak-hexo-theme/docs/1.7/tabbed_codeblock-tag.png) Check it live : [tabbed code block demo](https://tranquilpeak.kakawait.com/2014/10/tags-plugins-showcase/#tabbed-code-block) Syntax: ``` js {{< tabbed-codeblock [name] [link] >}} source code {{< /tabbed-codeblock >}} ``` E.g: ``` js {{< tabbed-codeblock example http://example.com >}} var test = 'test'; .btn { color: red; } {{< /tabbed-codeblock >}} ``` |Argument|Description| |---|---| |Name (optional)|Name of the code block, or of the file| |Link (optional)|Link to a demo, or a file| |Lang (optional)|Programming language use for the current tab| #### Wide image Wide image tag is useful to display wide images in full width. It take the entire window width. Check the the result : [Wide image tag demo](https://tranquilpeak.kakawait.com/2014/10/tags-plugins-showcase/#wide-image) Syntax: ``` {{< wide-image src="[/path/to/image]" title="[title text]" >}} ``` E.g: ``` {{< wide-image src="http://google.fr/images/image125.png" title="A beautiful sunrise" >}} ``` |Argument|Description| |---|---| |src|Path to the original image.| |title (optional)|Title of image displayed in a caption under image. `Alt` HTML attribute will use this title. E.g : `"A beautiful sunrise"`.| ## Writing pages ## Sometimes you need to create a **page** that is **not** a **regular blog post**, where you want to hide the date, social sharing buttons, tags, categories and pagination. This is the case for the blog pages _About_ or _Contact_ for instance which do not need to be timestamped (nor tagged or categorized) nor provide pagination and are not intended to be shared on social networks. In order to create such a page you can proceed like so: ``` hugo new page/contact.md ``` This creates the file `contact.md` in the directory `content/page` pre-populated with the following front matter. ```yaml --- title: "New Page" categories: - category - subcategory tags: - tag1 - tag2 keywords: - tech comments: false showMeta: false showActions: false #thumbnailImage: //example.com/image.jpg --- ``` The rest is basically the same as for a regular _[post](#writing-posts)_. ## Running ## Run `hugo server` and start writing! :)