mirror of https://github.com/istio/istio.io.git
162 lines
36 KiB
HTML
162 lines
36 KiB
HTML
<!doctype html><html lang=en itemscope itemtype=https://schema.org/WebPage><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=theme-color content="#466BB0"><meta name=title content="Use Shortcodes"><meta name=description content="Explains the shortcodes available and how to use them."><meta name=keywords content="microservices,services,mesh,contribute"><meta property="og:title" content="Use Shortcodes"><meta property="og:type" content="website"><meta property="og:description" content="Explains the shortcodes available and how to use them."><meta property="og:url" content="/v1.8/about/contribute/shortcodes/"><meta property="og:image" content="/v1.8/img/istio-whitelogo-bluebackground-framed.svg"><meta property="og:image:alt" content="Istio Logo"><meta property="og:image:width" content="112"><meta property="og:image:height" content="150"><meta property="og:site_name" content="Istio"><meta name=twitter:card content="summary"><meta name=twitter:site content="@IstioMesh"><title>Istioldie 1.8 / Use Shortcodes</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-98480406-2"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}
|
|
gtag('js',new Date());gtag('config','UA-98480406-2');</script><link rel=alternate type=application/rss+xml title="Istio Blog" href=/v1.8/blog/feed.xml><link rel=alternate type=application/rss+xml title="Istio News" href=/v1.8/news/feed.xml><link rel=alternate type=application/rss+xml title="Istio Blog and News" href=/v1.8/feed.xml><link rel="shortcut icon" href=/v1.8/favicons/favicon.ico><link rel=apple-touch-icon href=/v1.8/favicons/apple-touch-icon-180x180.png sizes=180x180><link rel=icon type=image/png href=/v1.8/favicons/favicon-16x16.png sizes=16x16><link rel=icon type=image/png href=/v1.8/favicons/favicon-32x32.png sizes=32x32><link rel=icon type=image/png href=/v1.8/favicons/android-36x36.png sizes=36x36><link rel=icon type=image/png href=/v1.8/favicons/android-48x48.png sizes=48x48><link rel=icon type=image/png href=/v1.8/favicons/android-72x72.png sizes=72x72><link rel=icon type=image/png href=/v1.8/favicons/android-96x96.png sizes=96xW96><link rel=icon type=image/png href=/v1.8/favicons/android-144x144.png sizes=144x144><link rel=icon type=image/png href=/v1.8/favicons/android-192x192.png sizes=192x192><link rel=manifest href=/v1.8/manifest.json><meta name=apple-mobile-web-app-title content="Istio"><meta name=application-name content="Istio"><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Work+Sans:400|Chivo:400|Work+Sans:500,300,600,300italic,400italic,500italic,600italic|Chivo:500,300,600,300italic,400italic,500italic,600italic"><link rel=stylesheet href=/v1.8/css/all.css><script src=/v1.8/js/themes_init.min.js></script></head><body class="language-unknown archive-site"><script>const branchName="release-1.8";const docTitle="Use Shortcodes";const iconFile="\/v1.8/img/icons.svg";const buttonCopy='Copy to clipboard';const buttonPrint='Print';const buttonDownload='Download';</script><script src="https://www.google.com/cse/brand?form=search-form" defer></script><script src=/v1.8/js/all.min.js data-manual defer></script><header><nav><a id=brand href=/v1.8/><span class=logo><svg viewBox="0 0 300 300"><circle cx="150" cy="150" r="146" stroke-width="2"/><polygon points="65 240 225 240 125 270"/><polygon points="65 230 125 220 125 110"/><polygon points="135 220 225 230 135 30"/></svg></span><span class=name>Istioldie 1.8</span></a><div id=hamburger><svg class="icon hamburger"><use xlink:href="/v1.8/img/icons.svg#hamburger"/></svg></div><div id=header-links><a title="Learn how to deploy, use, and operate Istio." href=/v1.8/docs/>Docs</a>
|
|
<a title="Posts about using Istio." href=/v1.8/blog/2020/>Blog<i class=dot data-prefix=/blog></i></a>
|
|
<a title="Timely news about the Istio project." href=/v1.8/news/>News<i class=dot data-prefix=/news></i></a>
|
|
<a title="Frequently Asked Questions about Istio." href=/v1.8/faq/>FAQ</a>
|
|
<a class=current title="Get a bit more in-depth info about the Istio project." href=/v1.8/about/>About</a><div class=menu><button id=gearDropdownButton class=menu-trigger title="Options and settings" aria-label="Options and Settings" aria-controls=gearDropdownContent><svg class="icon gear"><use xlink:href="/v1.8/img/icons.svg#gear"/></svg></button><div id=gearDropdownContent class=menu-content aria-labelledby=gearDropdownButton role=menu><a tabindex=-1 role=menuitem lang=en id=switch-lang-en class=active>English</a>
|
|
<a tabindex=-1 role=menuitem lang=zh id=switch-lang-zh>中文</a><div role=separator></div><a tabindex=-1 role=menuitem class=active id=light-theme-item>Light Theme</a>
|
|
<a tabindex=-1 role=menuitem id=dark-theme-item>Dark Theme</a><div role=separator></div><a tabindex=-1 role=menuitem id=syntax-coloring-item>Color Examples</a><div role=separator></div><h6>Other versions of this site</h6><a tabindex=-1 role=menuitem onclick="navigateToUrlOrRoot('https://istio.io/about\/contribute\/shortcodes\/');return false;">Current Release</a>
|
|
<a tabindex=-1 role=menuitem onclick="navigateToUrlOrRoot('https://preliminary.istio.io/about\/contribute\/shortcodes\/');return false;">Next Release</a>
|
|
<a tabindex=-1 role=menuitem href=https://istio.io/archive>Older Releases</a></div></div><button id=search-show title="Search this site" aria-label=Search><svg class="icon magnifier"><use xlink:href="/v1.8/img/icons.svg#magnifier"/></svg></button></div><form id=search-form name=cse role=search><input type=hidden name=cx value=002184991200833970123:iwwf17ikgf4>
|
|
<input type=hidden name=ie value=utf-8>
|
|
<input type=hidden name=hl value=en>
|
|
<input type=hidden id=search-page-url value=/v1.8/search>
|
|
<input id=search-textbox class=form-control name=q type=search aria-label="Search this site">
|
|
<button id=search-close title="Cancel search" type=reset aria-label="Cancel search"><svg class="icon cancel-x"><use xlink:href="/v1.8/img/icons.svg#cancel-x"/></svg></button></form></nav></header><div class=banner-container></div><main class=primary><div id=sidebar-container class="sidebar-container sidebar-offcanvas"><nav id=sidebar aria-label="Section Navigation"><div class=directory><div class=card><div id=header0 class=header title="Get a bit more in-depth info about the Istio project."><svg class="icon about"><use xlink:href="/v1.8/img/icons.svg#about"/></svg>About Istio</div><div class="body default" aria-labelledby=header0><ul role=tree aria-expanded=true aria-labelledby=header0><li role=treeitem aria-label="Our Community"><button aria-hidden=true></button><a title="Learn about our community, our customers, and our partners." href=/v1.8/about/community/>Our Community</a><ul role=group aria-expanded=false class=leaf-section><li role=none><a role=treeitem title="Information on the various ways to participate and interact with the Istio community." href=/v1.8/about/community/join/>Getting Involved</a></li><li role=none><a role=treeitem title="Who's building stuff around Istio." href=/v1.8/about/community/partners/>Partners</a></li><li role=none><a role=treeitem title="Some of the companies that have adopted Istio." href=/v1.8/about/community/customers/>Who's using Istio</a></li></ul></li><li role=none><a role=treeitem title="List of features and their release stages." href=/v1.8/about/feature-stages/>Feature Status</a></li><li role=none><a role=treeitem title="How we manage, number, and support Istio releases." href=/v1.8/about/release-cadence/>Build & Release Cadence</a></li><li role=none><a role=treeitem title="What to do if you find a bug." href=/v1.8/about/bugs/>Reporting Bugs</a></li><li role=none><a role=treeitem title="How we handle security vulnerabilities." href=/v1.8/about/security-vulnerabilities/>Security Vulnerabilities</a></li><li role=none><a role=treeitem title="The currently supported Istio releases." href=/v1.8/about/supported-releases/>Supported Releases</a></li><li role=none><a role=treeitem title="Official Istio resources for digital and printed materials." href=/v1.8/about/media-resources/>Media Resources</a></li><li role=treeitem aria-label="Contribute Documentation"><button class=show aria-hidden=true></button><a title="Details how to create and maintain Istio documentation pages." href=/v1.8/about/contribute/>Contribute Documentation</a><ul role=group aria-expanded=true class=leaf-section><li role=none><a role=treeitem title="Shows you how to use GitHub to contribute to the Istio documentation." href=/v1.8/about/contribute/github/>Work with GitHub</a></li><li role=none><a role=treeitem title="Details how to contribute new documentation to Istio." href=/v1.8/about/contribute/add-content/>Add New Documentation</a></li><li role=none><a role=treeitem title="Details how to contribute retired documentation to Istio." href=/v1.8/about/contribute/remove-content/>Remove Retired Documentation</a></li><li role=none><a role=treeitem title="Explains how to locally build, test, serve, and preview the website." href=/v1.8/about/contribute/build/>Build and serve the website locally</a></li><li role=none><a role=treeitem title="Explains the front matter used in our documentation and the fields available." href=/v1.8/about/contribute/front-matter/>Front matter</a></li><li role=none><a role=treeitem title="Shows you how changes to the Istio documentation and website are reviewed and approved." href=/v1.8/about/contribute/review/>Documentation Review Process</a></li><li role=none><a role=treeitem title="Explains how to include code in your documentation." href=/v1.8/about/contribute/code-blocks/>Add Code Blocks</a></li><li role=none><span role=treeitem class=current title="Explains the shortcodes available and how to use them.">Use Shortcodes</span></li><li role=none><a role=treeitem title="Explains the standard markup used to format Istio documentation." href=/v1.8/about/contribute/formatting/>Follow Formatting Standards</a></li><li role=none><a role=treeitem title="Explains the style conventions used in the Istio documentation." href=/v1.8/about/contribute/style-guide/>Style Guide</a></li><li role=none><a role=treeitem title="Explains the terminology standards used in the Istio documentation." href=/v1.8/about/contribute/terminology/>Terminology Standards</a></li><li role=none><a role=treeitem title="Provides assets and instructions to create diagrams for the Istio documentation." href=/v1.8/about/contribute/diagrams/>Diagram Creation Guidelines</a></li></ul></li><li role=none><a role=treeitem title="List of recent changes to this website." href=/v1.8/about/log/>Website Content Changes</a></li></ul></div></div></div></nav></div><div class=article-container><button tabindex=-1 id=sidebar-toggler title="Toggle the navigation bar"><svg class="icon pull"><use xlink:href="/v1.8/img/icons.svg#pull"/></svg></button><nav aria-label=Breadcrumb><ol><li><a href=/v1.8/ title="Connect, secure, control, and observe services.">Istio</a></li><li><a href=/v1.8/about/ title="Get a bit more in-depth info about the Istio project.">About</a></li><li><a href=/v1.8/about/contribute/ title="Details how to create and maintain Istio documentation pages.">Contribute Documentation</a></li><li>Use Shortcodes</li></ol></nav><article aria-labelledby=title><div class=title-area><div style=width:100%><h1 id=title>Use Shortcodes</h1><p class=byline><span title="1785 words"><svg class="icon clock"><use xlink:href="/v1.8/img/icons.svg#clock"/></svg><span> </span>9 minute read</span>
|
|
<span> </span>
|
|
<span></span></p></div></div><nav class=toc-inlined aria-label="Table of Contents"><div><hr><ol><li role=none aria-label="Add images"><a href=#add-images>Add images</a><li role=none aria-label="Add icons"><a href=#add-icons>Add icons</a><li role=none aria-label="Add links to other pages"><a href=#add-links-to-other-pages>Add links to other pages</a><ol><li role=none aria-label="Add links to content on GitHub"><a href=#add-links-to-content-on-github>Add links to content on GitHub</a></ol></li><li role=none aria-label="Version information"><a href=#version-information>Version information</a><li role=none aria-label="Glossary terms"><a href=#glossary-terms>Glossary terms</a><li role=none aria-label=Callouts><a href=#callouts>Callouts</a><li role=none aria-label="Use boilerplate text"><a href=#use-boilerplate-text>Use boilerplate text</a><li role=none aria-label="Use tabs"><a href=#use-tabs>Use tabs</a><ol><li role=none aria-label="Tab limitations"><a href=#tab-limitations>Tab limitations</a></ol></li><li role=none aria-label="Use banners and stickers"><a href=#use-banners-and-stickers>Use banners and stickers</a><li role=none aria-label="See also"><a href=#see-also>See also</a></li></ol><hr></div></nav><p>Hugo shortcodes are special placeholders with a certain syntax that you can add
|
|
to your content to create dynamic content experiences, such as tabs,
|
|
images and icons, links to other pages, and special content layouts.</p><p>This page explains the available shortcodes and how to use them for your
|
|
content.</p><h2 id=add-images>Add images</h2><p>Place image files in the same directory as the markdown file using them. To make
|
|
localization easier and enhance accessibility, the preferred image
|
|
format is SVG. The following example shows the shortcode with the required
|
|
fields needed to add an image:</p><pre><code class=language-html data-expandlinks=true data-repo=istio>{{< image width="75%" ratio="45.34%"
|
|
link="./<image.svg>"
|
|
caption="<The caption displayed under the image>"
|
|
>}}
|
|
</code></pre><p>The <code>link</code> and <code>caption</code> fields are required, but the shortcode also supports
|
|
optional fields, for example:</p><pre><code class=language-html data-expandlinks=true data-repo=istio>{{< image width="75%" ratio="45.34%"
|
|
link="./<image.svg>"
|
|
alt="<Alternate text used by screen readers and when loading the image fails>"
|
|
title="<Text that appears on mouse-over>"
|
|
caption="<The caption displayed under the image>"
|
|
>}}
|
|
</code></pre><p>If you don’t include the <code>title</code> field, Hugo uses the text set in <code>caption</code>. If
|
|
you don’t include the <code>alt</code> field, Hugo uses the text in <code>title</code> or in <code>caption</code>
|
|
if <code>title</code> is also not defined.</p><p>The <code>width</code> field sets the size of the image relative to the surrounding text and
|
|
has a default of 100%.</p><p>The <code>ratio</code> field sets the height of the image relative to its width. Hugo
|
|
calculates this value automatically for image files in the folder.
|
|
However, you must calculate it manually for external images.
|
|
Set the value of <code>ratio</code> to <code>([image height]/[image width]) * 100</code>.</p><h2 id=add-icons>Add icons</h2><p>You can embed common icons in your content with the following content:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>{{< warning_icon >}}
|
|
{{< idea_icon >}}
|
|
{{< checkmark_icon >}}
|
|
{{< cancel_icon >}}
|
|
{{< tip_icon >}}
|
|
</code></pre><p>The icons are rendered within the text. For example: <svg class="large-icon"><use xlink:href="/v1.8/img/icons.svg#exclamation-mark"/></svg>,
|
|
<svg class="large-icon"><use xlink:href="/v1.8/img/icons.svg#bulb"/></svg>, <svg class="large-icon"><use xlink:href="/v1.8/img/icons.svg#checkmark"/></svg>,<svg class="large-icon"><use xlink:href="/v1.8/img/icons.svg#cancel"/></svg> and <svg class="large-icon"><use xlink:href="/v1.8/img/icons.svg#info"/></svg>.</p><h2 id=add-links-to-other-pages>Add links to other pages</h2><p>The Istio documentation supports three types of links depending on their target.
|
|
Each type uses a different syntax to express the target.</p><ul><li><p><strong>External links</strong>. These are links to pages outside of the Istio
|
|
documentation or the Istio GitHub repositories. Use the standard Markdown
|
|
syntax to include the URL. Use the HTTPS protocol, when you reference files
|
|
on the Internet, for example:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>[Descriptive text for the link](https://mysite/myfile.html)
|
|
</code></pre></li><li><p><strong>Relative links</strong>. These links target pages at the same level of the current
|
|
file or further down the hierarchy. Start the path of relative links with a
|
|
period <code>.</code>, for example:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>[This links to a sibling or child page](./sub-dir/child-page.html)
|
|
</code></pre></li><li><p><strong>Absolute links</strong>. These links target pages outside the hierarchy of the
|
|
current page but within the Istio website. Start the path of absolute links
|
|
with a slash <code>/</code>, for example:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>[This links to a page on the about section](/about/page/)
|
|
</code></pre></li></ul><p>Regardless of type, links do not point to the <code>index.md</code> file with the content,
|
|
but to the folder containing it.</p><h3 id=add-links-to-content-on-github>Add links to content on GitHub</h3><p>There are a few ways to reference content or files on GitHub:</p><ul><li><p><strong>{{< github_file >}}</strong> is how you reference individual files in GitHub
|
|
such as yaml files. This shortcode produces a link to
|
|
<code>https://raw.githubusercontent.com/istio/istio*</code>, for example:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>[liveness]({{< github_file >}}/samples/health-check/liveness-command.yaml)
|
|
</code></pre></li><li><p><strong>{{< github_tree >}}</strong> is how you reference a directory tree in GitHub.
|
|
This shortcode produces a link to <code>https://github.com/istio/istio/tree*</code>, for example:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>[httpbin]({{< github_tree >}}/samples/httpbin)
|
|
</code></pre></li><li><p><strong>{{< github_blob >}}</strong> is how you reference a file in GitHub sources.
|
|
This shortcode produces a link to <code>https://github.com/istio/istio/blob*</code>, for example:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>[RawVM MySQL]({{< github_blob >}}/samples/rawvm/README.md)
|
|
</code></pre></li></ul><p>The shortcodes above produce links to the appropriate branch in GitHub, based on
|
|
the branch the documentation is currently targeting. To verify which branch
|
|
is currently targeted, you can use the <code>{{< source_branch_name >}}</code>
|
|
shortcode to get the name of the currently targeted branch.</p><h2 id=version-information>Version information</h2><p>To display the current Istio version in your content by retrieving the current
|
|
version from the web site, use the following shortcodes:</p><ul><li><code>{{< istio_version >}}</code>, which renders as 1.8</li><li><code>{{< istio_full_version >}}</code>, which renders as 1.8.3</li></ul><h2 id=glossary-terms>Glossary terms</h2><p>When you introduce a specialized Istio term in a page, the supplemental
|
|
acceptance criteria for contributions require you include the term in the
|
|
glossary and markup its first instance using the <code>{{< gloss >}}</code> shortcode.
|
|
The shortcode produces a special rendering that invites readers to click on the
|
|
term to get a pop-up with the definition. For example:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>The Istio component that programs the {{<gloss>}}Envoy{{</gloss>}} proxies, responsible for service discovery, load balancing, and routing.
|
|
</code></pre><p>Is rendered as follows:</p><p>The Istio component that programs the {{<gloss>}}Envoy{{</gloss>}} proxies, responsible for service discovery, load balancing, and routing.</p><p>If you use a variant of the term in your text, you can still use this shortcode
|
|
to include the pop up with the definition. To specify a substitution, just
|
|
include the glossary entry within the shortcode. For example:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>The Istio component that programs the {{<gloss envoy>}}Envoy{{</gloss>}} proxies, responsible for service discovery, load balancing, and routing.
|
|
</code></pre><p>Renders with the pop up for the <code>envoy</code> glossary entry as follows:</p><p>The Istio component that programs the <span class=term data-title=Envoy data-body='<p>The high-performance proxy that Istio uses to mediate inbound and outbound traffic for all <a href="/docs/reference/glossary/#service">services</a> in the
|
|
<a href="/docs/reference/glossary/#service-mesh">service mesh</a>. <a href="https://envoyproxy.github.io/envoy/">Learn more about Envoy</a>.</p>'>Envoy</span> proxies, responsible for service discovery, load balancing, and routing.</p><h2 id=callouts>Callouts</h2><p>To emphasize blocks of content, you can format them as warnings, ideas, tips, or
|
|
quotes. All callouts use very similar shortcodes:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>{{< warning >}}
|
|
This is an important warning
|
|
{{< /warning >}}
|
|
|
|
{{< idea >}}
|
|
This is a great idea
|
|
{{< /idea >}}
|
|
|
|
{{< tip >}}
|
|
This is a useful tip from an expert
|
|
{{< /tip >}}
|
|
|
|
{{< quote >}}
|
|
This is a quote from somewhere
|
|
{{< /quote >}}
|
|
</code></pre><p>The shortcodes above render as follows:</p><div><aside class="callout warning"><div class=type><svg class="large-icon"><use xlink:href="/v1.8/img/icons.svg#callout-warning"/></svg></div><div class=content>This is an important warning</div></aside></div><div><aside class="callout idea"><div class=type><svg class="large-icon"><use xlink:href="/v1.8/img/icons.svg#callout-idea"/></svg></div><div class=content>This is a great idea</div></aside></div><div><aside class="callout tip"><div class=type><svg class="large-icon"><use xlink:href="/v1.8/img/icons.svg#callout-tip"/></svg></div><div class=content>This is a useful tip from an expert</div></aside></div><div><aside class="callout quote"><div class=type><svg class="large-icon"><use xlink:href="/v1.8/img/icons.svg#callout-quote"/></svg></div><div class=content>This is a quote from somewhere</div></aside></div><p>Use callouts sparingly. Each type of callout serves a specific purpose and
|
|
over-using them negates their intended purposes and their efficacy. Generally,
|
|
you should not include more than one callout per content file.</p><h2 id=use-boilerplate-text>Use boilerplate text</h2><p>To reuse content while maintaining a single source for it, use boilerplate shortcodes. To embed
|
|
boilerplate text into any content file, use the <code>boilerplate</code> shortcode as follows:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>{{< boilerplate example >}}
|
|
</code></pre><p>The shortcode above includes the following content from the <code>example.md</code>
|
|
Markdown file in the <code>/content/en/boilerplates/</code> folder:</p><p>This is some boilerplate <strong>markdown</strong> <em>text</em>.</p><pre><code class=language-plain data-expandlinks=true data-repo=istio>A sample nested text block in a boilerplate.
|
|
</code></pre><p>The example shows that you need to include the filename of the Markdown file
|
|
with the content you wish to insert at the current location. You can find the existing
|
|
boilerplate files are located in the <code>/content/en/boilerplates</code> directory.</p><h2 id=use-tabs>Use tabs</h2><p>To display content that has multiple options or formats, use tab sets
|
|
and tabs. For example:</p><ul><li>Equivalent commands for different platforms</li><li>Equivalent code samples in different languages</li><li>Alternative configurations</li></ul><p>To insert tabbed content, combine the <code>tabset</code> and <code>tabs</code> shortcodes,
|
|
for example:</p><pre><code class=language-markdown data-expandlinks=true data-repo=istio>{{< tabset category-name="platform" >}}
|
|
|
|
{{< tab name="One" category-value="one" >}}
|
|
ONE
|
|
{{< /tab >}}
|
|
|
|
{{< tab name="Two" category-value="two" >}}
|
|
TWO
|
|
{{< /tab >}}
|
|
|
|
{{< tab name="Three" category-value="three" >}}
|
|
THREE
|
|
{{< /tab >}}
|
|
|
|
{{< /tabset >}}
|
|
</code></pre><p>The shortcodes above produce the following output:</p><div id=tabset-about-contribute-shortcodes-1 role=tablist class=tabset><div class=tab-strip data-category-name=platform><button aria-selected=true data-category-value=one aria-controls=tabset-about-contribute-shortcodes-1-0-panel id=tabset-about-contribute-shortcodes-1-0-tab role=tab><span>One</span>
|
|
</button><button tabindex=-1 data-category-value=two aria-controls=tabset-about-contribute-shortcodes-1-1-panel id=tabset-about-contribute-shortcodes-1-1-tab role=tab><span>Two</span>
|
|
</button><button tabindex=-1 data-category-value=three aria-controls=tabset-about-contribute-shortcodes-1-2-panel id=tabset-about-contribute-shortcodes-1-2-tab role=tab><span>Three</span></button></div><div class=tab-content><div id=tabset-about-contribute-shortcodes-1-0-panel role=tabpanel tabindex=0 aria-labelledby=tabset-about-contribute-shortcodes-1-0-tab>ONE</div><div hidden id=tabset-about-contribute-shortcodes-1-1-panel role=tabpanel tabindex=0 aria-labelledby=tabset-about-contribute-shortcodes-1-1-tab>TWO</div><div hidden id=tabset-about-contribute-shortcodes-1-2-panel role=tabpanel tabindex=0 aria-labelledby=tabset-about-contribute-shortcodes-1-2-tab>THREE</div></div></div><p>The value of the <code>name</code> attribute of each tab contains the text displayed for
|
|
the tab. Within each tab, you can have normal Markdown content, but tabs have <a href=#tab-limitations>limitations</a>.</p><p>The <code>category-name</code> and <code>category-value</code> attributes are optional and make the
|
|
selected tab to stick across visits to the page. For example, a visitor selects
|
|
a tab and their selection is saved automatically with the given name and value. If
|
|
multiple tab sets use the same category name and values, their selection is
|
|
automatically synchronized across pages. This is particularly useful when there
|
|
are many tab sets in the site that hold the same types of formats.</p><p>For example, multiple tab sets could provide options for <code>GCP</code>,
|
|
<code>BlueMix</code> and <code>AWS</code>. You can set the value of the <code>category-name</code> attribute to <code>environment</code> and
|
|
the values for the <code>category-value</code> attributes to <code>gcp</code>, <code>bluemix</code>, and <code>aws</code>.
|
|
Then, when a reader selects a tab in one page, their choice will carry
|
|
throughout all tab sets across the website automatically.</p><h3 id=tab-limitations>Tab limitations</h3><p>You can use almost any Markdown in a tab, with the following exceptions:</p><ul><li><p><em>Headers</em>. Headers in a tab appear in the table of contents but
|
|
clicking on the link in the table of contents won’t automatically select
|
|
the tab.</p></li><li><p><em>Nested tab sets</em>. Don’t nest tab sets. Doing so leads to a terrible reading
|
|
experience and can cause significant confusion.</p></li></ul><h2 id=use-banners-and-stickers>Use banners and stickers</h2><p>To advertise upcoming events, or publicize something
|
|
new, you can automatically insert time-sensitive banners and stickers into the
|
|
generated site in order. We’ve implemented the following shortcodes for promotions:</p><ul><li><p><strong>Countdown stickers</strong>: They show how much time is left before a big event
|
|
For example: “37 days left until ServiceMeshCon on March 30”. Stickers have some visual
|
|
impact for readers prior to the event and should be used sparingly.</p></li><li><p><strong>Banners</strong>: They show a prominent message to readers about a
|
|
significant event that is about to take place, is taking place, or has taken place.
|
|
For example “Istio 1.5 has been released, download it today!” or “Join us at ServiceMeshCon
|
|
on March 30”. Banners are full-screen slices displayed to readers during the
|
|
event period.</p></li></ul><p>To create banners and stickers, you create Markdown files in either the
|
|
<code>events/banners</code> or <code>events/stickers</code> folders. Create one Markdown file
|
|
per event with dedicated front-matter fields to control their behavior. The
|
|
following table explains the available options:</p><table><thead><tr><th>Field</th><th>Description</th></tr></thead><tbody><tr><td><code>title</code></td><td>The name of the event. This is not displayed on the web site, it's intended for diagnostic messages.</td></tr><tr><td><code>period_start</code></td><td>The starting date at which to start displaying the item in <code>YYYY-MM-DD</code> format.
|
|
Instead of a date, this can also be the value <code>latest_release</code>, which then uses the latest known
|
|
Istio release as the start date. This is useful when creating a banner saying "Istio x.y.z has just been released".</td></tr><tr><td><code>period_end</code></td><td>The last date on which to display the item in <code>YYYY-MM-DD</code> format. This value is mutually
|
|
exclusive with <code>period_duration</code> below.</td></tr><tr><td><code>period_duration</code></td><td>How many days to display the item to the user. This value is mutually exclusive with
|
|
<code>period_end</code> above.</td></tr><tr><td><code>max_impressions</code></td><td>How many times to show the content to the user during
|
|
the event's period. A value of 3 would mean the first three pages visited by the user during the period will display
|
|
the content, and the content will be hidden on subsequent page loads. A value of 0, or omitting the field completely,
|
|
results in the content being displayed on all page visits during the period.</td></tr><tr><td><code>timeout</code></td><td>The amount of time the content is visible to the user on a given page. After that much time passes, the item will be removed from the page.</td></tr><tr><td><code>link</code></td><td>You can specify a URL, which turns the whole item into a clickable target. When the user clicks on the item,
|
|
the item is no longer shown to the user. The special value `latest_release` can be used here to introduce a link
|
|
to the current release's announcement page.</td></tr></tbody></table><nav id=see-also><h2>See also</h2><div class=see-also><div class=entry><p class=link><a data-skipendnotes=true href=/v1.8/about/contribute/code-blocks/>Add Code Blocks</a></p><p class=desc>Explains how to include code in your documentation.</p></div><div class=entry><p class=link><a data-skipendnotes=true href=/v1.8/about/contribute/add-content/>Add New Documentation</a></p><p class=desc>Details how to contribute new documentation to Istio.</p></div><div class=entry><p class=link><a data-skipendnotes=true href=/v1.8/about/contribute/build/>Build and serve the website locally</a></p><p class=desc>Explains how to locally build, test, serve, and preview the website.</p></div><div class=entry><p class=link><a data-skipendnotes=true href=/v1.8/about/contribute/diagrams/>Diagram Creation Guidelines</a></p><p class=desc>Provides assets and instructions to create diagrams for the Istio documentation.</p></div><div class=entry><p class=link><a data-skipendnotes=true href=/v1.8/about/contribute/review/>Documentation Review Process</a></p><p class=desc>Shows you how changes to the Istio documentation and website are reviewed and approved.</p></div><div class=entry><p class=link><a data-skipendnotes=true href=/v1.8/about/contribute/formatting/>Follow Formatting Standards</a></p><p class=desc>Explains the standard markup used to format Istio documentation.</p></div></div></nav></article><nav class=pagenav><div class=left><a title="Explains how to include code in your documentation." href=/v1.8/about/contribute/code-blocks/><svg class="icon left-arrow"><use xlink:href="/v1.8/img/icons.svg#left-arrow"/></svg>Add Code Blocks</a></div><div class=right><a title="Explains the standard markup used to format Istio documentation." href=/v1.8/about/contribute/formatting/>Follow Formatting Standards<svg class="icon right-arrow"><use xlink:href="/v1.8/img/icons.svg#right-arrow"/></svg></a></div></nav><div id=feedback><div id=feedback-initial>Was this information useful?<br><button class="btn feedback" onclick="sendFeedback('en',1)">Yes</button>
|
|
<button class="btn feedback" onclick="sendFeedback('en',0)">No</button></div><div id=feedback-comment>Do you have any suggestions for improvement?<br><br><input id=feedback-textbox type=text placeholder="Help us improve..." data-lang=en></div><div id=feedback-thankyou>Thanks for your feedback!</div></div><div id=endnotes-container aria-hidden=true><h2>Links</h2><ol id=endnotes></ol></div></div><div class=toc-container><nav class=toc aria-label="Table of Contents"><div id=toc><ol><li role=none aria-label="Add images"><a href=#add-images>Add images</a><li role=none aria-label="Add icons"><a href=#add-icons>Add icons</a><li role=none aria-label="Add links to other pages"><a href=#add-links-to-other-pages>Add links to other pages</a><ol><li role=none aria-label="Add links to content on GitHub"><a href=#add-links-to-content-on-github>Add links to content on GitHub</a></ol></li><li role=none aria-label="Version information"><a href=#version-information>Version information</a><li role=none aria-label="Glossary terms"><a href=#glossary-terms>Glossary terms</a><li role=none aria-label=Callouts><a href=#callouts>Callouts</a><li role=none aria-label="Use boilerplate text"><a href=#use-boilerplate-text>Use boilerplate text</a><li role=none aria-label="Use tabs"><a href=#use-tabs>Use tabs</a><ol><li role=none aria-label="Tab limitations"><a href=#tab-limitations>Tab limitations</a></ol></li><li role=none aria-label="Use banners and stickers"><a href=#use-banners-and-stickers>Use banners and stickers</a><li role=none aria-label="See also"><a href=#see-also>See also</a></li></ol></div></nav></div></main><footer><div class=user-links><a class=channel title="Go download Istio 1.8.3 now" href=/v1.8/docs/setup/getting-started/#download aria-label="Download Istio"><span>download</span><svg class="icon download"><use xlink:href="/v1.8/img/icons.svg#download"/></svg>
|
|
</a><a class=channel title="Join the Istio discussion board to participate in discussions and get help troubleshooting problems" href=https://discuss.istio.io aria-label="Istio discussion board"><span>discuss</span><svg class="icon discourse"><use xlink:href="/v1.8/img/icons.svg#discourse"/></svg></a>
|
|
<a class=channel title="Stack Overflow is where you can ask questions and find curated answers on deploying, configuring, and using Istio" href=https://stackoverflow.com/questions/tagged/istio aria-label="Stack Overflow"><span>stack overflow</span><svg class="icon stackoverflow"><use xlink:href="/v1.8/img/icons.svg#stackoverflow"/></svg></a>
|
|
<a class=channel title="Interactively discuss issues with the Istio community on Slack" href=https://slack.istio.io aria-label=slack><span>slack</span><svg class="icon slack"><use xlink:href="/v1.8/img/icons.svg#slack"/></svg></a>
|
|
<a class=channel title="Follow us on Twitter to get the latest news" href=https://twitter.com/IstioMesh aria-label=Twitter><span>twitter</span><svg class="icon twitter"><use xlink:href="/v1.8/img/icons.svg#twitter"/></svg></a><div class=tag>for everyone</div></div><div class=info><p class=copyright>Istio Archive
|
|
1.8.3<br>© 2020 Istio Authors, <a href=https://policies.google.com/privacy>Privacy Policy</a><br>Archived on February 9, 2021</p></div><div class=dev-links><a class=channel title="GitHub is where development takes place on Istio code" href=https://github.com/istio/community aria-label=GitHub><span>github</span><svg class="icon github"><use xlink:href="/v1.8/img/icons.svg#github"/></svg></a>
|
|
<a class=channel title="Access our team drive if you'd like to take a look at the Istio technical design documents" href=https://groups.google.com/forum/#!forum/istio-team-drive-access aria-label="team drive"><span>drive</span><svg class="icon drive"><use xlink:href="/v1.8/img/icons.svg#drive"/></svg></a>
|
|
<a class=channel title="If you'd like to contribute to the Istio project, consider participating in our working groups" href=https://github.com/istio/community/blob/master/WORKING-GROUPS.md aria-label="working groups"><span>working groups</span><svg class="icon working-groups"><use xlink:href="/v1.8/img/icons.svg#working-groups"/></svg></a><div class=tag>for developers</div></div></footer><script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js defer></script><div id=scroll-to-top-container aria-hidden=true><button id=scroll-to-top title="Back to top"><svg class="icon top"><use xlink:href="/v1.8/img/icons.svg#top"/></svg></button></div></body></html> |