Merge pull #957: Layouts: Allow Alternative Base Layouts & Add Breadcrumbs

_includes/layout/base/breadcrumbs.html

@@ -0,0 +1,28 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<div class="breadcrumbs">
+  {% for crumb in page.breadcrumbs %}
+    {% if forloop.last %}
+      {% case crumb %}
+        {% when "GLOSSARY_ENTRY_TITLE" %}
+          {% comment %} ## Only show first synonym in crumb ## {% endcomment %}
+          {% for synonym in page.required.synonyms_shown_in_glossary_capitalize_first_letter %}
+            {% if forloop.first %}{{synonym}}{% endif %}
+          {% endfor %}
+        {% else %}{{crumb}}
+      {% endcase %}
+    {% else %}
+      {% case crumb %}
+        {% comment %}/// Alphabetical order by crumb \\\{% endcomment %}
+        {% when "bitcoin" %}<a href="/{{page.lang}}/">{% translate bitcoin vocabulary %}</a>
+        {% when "dev docs" %}<a href="/en/developer-documentation">Dev Docs</a>
+        {% when "glossary" %}<a href="/en/developer-glossary">Glossary</a>
+        {% else %}{% die "Breadcrumb not found in _includes/layout/breadcrumbs.html" %}
+      {% endcase %}
+      &gt;
+    {% endif %}
+  {% endfor %}
+</div>

_includes/layout/base/content.html

@@ -0,0 +1,8 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<div id="content" class="content">
+  {{ content }}
+</div>

_includes/layout/base/footer-js.html

@@ -0,0 +1,9 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<script type="text/javascript">
+  fallbackSVG();
+  addAnchorLinks();
+</script>

_includes/layout/base/footer-license.html

@@ -0,0 +1,6 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<div class="footerlicense">© Bitcoin Project 2009-{{ site.time | date: '%Y' }} {% translate footer layout %}</div>

_includes/layout/base/footer-menu.html

@@ -0,0 +1,18 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<div class="footermenu">
+  <a href="/en/alerts" class="statusmenu{% if site.STATUS == 1 %} alert{% endif %}">Network Status</a>
+  <a href="/{{ page.lang }}/{% translate legal url %}">{% translate menu-legal layout %}</a>
+  {% case page.lang %}
+  {% when 'ar' or 'es' or 'sl' %}
+  <a href="/en/privacy">Privacy</a>
+  {% else %}
+  <a href="/{{ page.lang }}/{% translate privacy url %}">{% translate menu-privacy layout %}</a>
+  {% endcase %}
+  <a href="/{{ page.lang }}/{% translate press url %}">{% translate menu-press layout %}</a>
+  <a href="/{{ page.lang }}/{% translate about-us url %}">{% translate menu-about-us layout %}</a>
+  <a href="/en/blog">Blog</a>
+</div>

_includes/layout/base/footer-sponsor.html

@@ -0,0 +1,8 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<div class="footersponsor">
+  <div><span>{% translate sponsor layout %}</span> <a href="https://bitcoinfoundation.org/"><img src="/img/brand/bitcoinfoundation.png" alt="Bitcoin Foundation"></a></div>
+</div>

_includes/layout/base/head-language-dropdown.html

@@ -0,0 +1,17 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+<ul class="lang">
+  <li><a href="#" onclick="return false;">{{ site.langs[page.lang] }}</a>
+  <ul>
+    <li><ul>
+      {% assign i = 0 %}{% assign c = site.langsorder.size | divided_by: 2 | plus: 1 %}
+      {% for lang in site.langsorder %}{% assign mod = i | modulo: c %}{% assign active = ''%}{% if lang == page.lang %}{% assign active = ' class="active"'%}{% endif %}
+        {% if mod == 0 and i != 0 %}</ul></li><li><ul>{% endif %}
+          <li><a href="/{{ lang }}/{% translate {{page.id}} url {{lang}} %}"{{ active }}>{{ site.langs[lang] }}</a></li>
+        {% assign i = i | plus: 1 %}{% endfor %}
+      </ul></li>
+    </ul>
+  </li>
+</ul>

_includes/layout/base/head-language-select.html

@@ -0,0 +1,9 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+<div id="langselect" class="langselect"><select onchange="window.location=this.value;">
+    {% for lang in site.langsorder %}{% assign active = ''%}{% if lang == page.lang %}{% assign active = ' selected="selected"'%}{% endif %}
+          <option value="/{{ lang }}/{% translate {{page.id}} url {{lang}} %}"{{ active }}>{{ site.langs[lang] }}</option>
+    {% endfor %}
+</select></div>

_includes/layout/base/head-logo.html

@@ -0,0 +1,6 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<a class="logo" href="/{{ page.lang }}/"><img src="/img/icons/logotop.svg" alt="Bitcoin"></a>

_includes/layout/base/head-menu.html

@@ -0,0 +1,35 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<ul id="menusimple" class="menusimple" onclick="mobileMenuHover(event);" ontouchstart="mobileMenuHover(event);">
+  <li><a href="#" onclick="return false;">{% translate menu-intro layout %}</a>
+    <ul>
+      <li{% if page.id == 'bitcoin-for-individuals' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-individuals url %}">{% translate menu-bitcoin-for-individuals layout %}</a></li>
+      <li{% if page.id == 'bitcoin-for-businesses' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-businesses url %}">{% translate menu-bitcoin-for-businesses layout %}</a></li>
+      <li{% if page.id == 'bitcoin-for-developers' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-developers url %}">{% translate menu-bitcoin-for-developers layout %}</a></li>
+      <li{% if page.id == 'getting-started' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate getting-started url %}">{% translate menu-getting-started layout %}</a></li>
+      <li{% if page.id == 'how-it-works' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate how-it-works url %}">{% translate menu-how-it-works layout %}</a></li>
+      <li{% if page.id == 'you-need-to-know' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate you-need-to-know url %}">{% translate menu-you-need-to-know layout %}</a></li>
+    </ul>
+  </li>
+  <li><a href="#" onclick="return false;">{% translate menu-resources layout %}</a>
+    <ul>
+      <li{% if page.id == 'resources' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate resources url %}">{% translate menu-resources layout %}</a></li>
+      <li{% if page.id == 'community' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate community url %}">{% translate menu-community layout %}</a></li>
+      {% if page.lang == 'en' %}<li{% if page.id == 'developer-documentation' %} class="active"{% endif %}><a href="/en/developer-documentation">Documentation</a></li>{% endif %}
+      <li{% if page.id == 'vocabulary' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate vocabulary url %}">{% translate menu-vocabulary layout %}</a></li>
+      <li{% if page.id == 'events' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate events url %}">{% translate menu-events layout %}</a></li>
+    </ul>
+  </li>
+  <li{% if page.id == 'innovation' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate innovation url %}">{% translate menu-innovation layout %}</a></li>
+  <li><a href="#" onclick="return false;">{% translate menu-participate layout %}</a>
+    <ul>
+      <li{% if page.id == 'support-bitcoin' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate support-bitcoin url %}">{% translate menu-support-bitcoin layout %}</a>
+      {% if page.lang == 'en' %}<li{% if page.id == 'full-node' %} class="active"{% endif %}><a href="/en/full-node">Running a full node</a></li>{% endif %}
+      <li{% if page.id == 'development' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate development url %}">{% translate menu-development layout %}</a></li>
+    </ul>
+  </li>
+  <li{% if page.id == 'faq' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate faq url %}">{% translate menu-faq layout %}</a></li>
+</ul>

_includes/layout/base/head-mobile-menu.html

@@ -0,0 +1,6 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<a id="menumobile" class="menumobile" onclick="mobileMenuShow(event);" ontouchstart="mobileMenuShow(event);" href="#"></a>

_includes/layout/base/html-head.html

@@ -0,0 +1,19 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta property="og:image" content="https://bitcoin.org/img/icons/opengraph.png" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<title>{% capture title %}{% translate title %}{% endcapture %}{% if title != '' %}{{ title }}{% else %}{{ page.title }}{% endif %}</title>
+{% capture metadescription %}{% translate metadescription %}{% endcapture %}{% if metadescription != '' %}<meta name="description" content="{{ metadescription }}">{% endif %}
+{% lesscss main.less %}
+<!--[if lt IE 8]>{% lesscss ie.css %}<script type="text/javascript" src="/js/ie.js"></script><![endif]-->
+<!--[if IE 8]>{% lesscss ie8.less %}<![endif]-->
+{% if page.lang == 'ar' or page.lang == 'fa' %}{% lesscss rtl.less %}{% endif %}
+{% if page.lang == 'bg' or page.lang == 'el' or page.lang == 'ko' or page.lang == 'hi' or page.lang == 'pl' or page.lang == 'sl' or page.lang == 'ro' or page.lang == 'ru' or page.lang == 'tr' or page.lang == 'uk' or page.lang == 'zh_CN' or page.lang == 'zh_TW' %}{% lesscss sans.less %}{% endif %}
+<script type="text/javascript" src="/js/base.js"></script>
+{% if page.id != 'download' %}<script type="text/javascript" src="/js/main.js"></script>{% endif %}
+<link rel="shortcut icon" href="/favicon.png">
+<link rel="apple-touch-icon-precomposed" href="/img/icons/logo_ios.png"/>

_includes/layout/base/pagetop-alert.html

@@ -0,0 +1,10 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+{% if site.ALERT %}
+  <div class="banner-message {{ site.ALERTCLASS }}">
+    <a href="{{ site.ALERTURL }}"><span>{{ site.ALERT }}</span></a>
+  </div>
+{% endif %}

_includes/layout/base/pagetop-detect-mobile.html

@@ -0,0 +1,6 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<div id="detectmobile" class="detectmobile"></div>

_layouts/base.html

@@ -4,109 +4,34 @@
 ---
 <!DOCTYPE HTML>
 <html lang="{{ page.lang }}">
+
 <head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+{% include layout/base/html-head.html %}
-<meta property="og:image" content="https://bitcoin.org/img/icons/opengraph.png" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-<title>{% capture title %}{% translate title %}{% endcapture %}{% if title != '' %}{{ title }}{% else %}{{ page.title }}{% endif %}</title>
-{% capture metadescription %}{% translate metadescription %}{% endcapture %}{% if metadescription != '' %}<meta name="description" content="{{ metadescription }}">{% endif %}
-{% lesscss main.less %}
-<!--[if lt IE 8]>{% lesscss ie.css %}<script type="text/javascript" src="/js/ie.js"></script><![endif]-->
-<!--[if IE 8]>{% lesscss ie8.less %}<![endif]-->
-{% if page.lang == 'ar' or page.lang == 'fa' %}{% lesscss rtl.less %}{% endif %}
-{% if page.lang == 'bg' or page.lang == 'el' or page.lang == 'ko' or page.lang == 'hi' or page.lang == 'pl' or page.lang == 'sl' or page.lang == 'ro' or page.lang == 'ru' or page.lang == 'tr' or page.lang == 'uk' or page.lang == 'zh_CN' or page.lang == 'zh_TW' %}{% lesscss sans.less %}{% endif %}
-<script type="text/javascript" src="/js/base.js"></script>
-{% if page.id != 'download' %}<script type="text/javascript" src="/js/main.js"></script>{% endif %}
-<link rel="shortcut icon" href="/favicon.png">
-<link rel="apple-touch-icon-precomposed" href="/img/icons/logo_ios.png"/>
 </head>
+
 <body>
-<div id="detectmobile" class="detectmobile"></div>
+{% include layout/base/pagetop-detect-mobile.html %}
-{% if site.ALERT %}
+{% include layout/base/pagetop-alert.html %}
-  <div class="banner-message {{ site.ALERTCLASS }}">
+
-    <a href="{{ site.ALERTURL }}"><span>{{ site.ALERT }}</span></a>
-  </div>
-{% endif %}
 <div class="head"><div>
-    <ul class="lang">
+  {% include layout/base/head-language-dropdown.html %}
-      <li><a href="#" onclick="return false;">{{ site.langs[page.lang] }}</a>
+  {% include layout/base/head-mobile-menu.html %}
-      <ul>
+  {% include layout/base/head-logo.html %}
-        <li><ul>
+  {% include layout/base/head-language-select.html %}
-        {% assign i = 0 %}{% assign c = site.langsorder.size | divided_by: 2 | plus: 1 %}
+  {% include layout/base/head-menu.html %}
-        {% for lang in site.langsorder %}{% assign mod = i | modulo: c %}{% assign active = ''%}{% if lang == page.lang %}{% assign active = ' class="active"'%}{% endif %}
-        {% if mod == 0 and i != 0 %}</ul></li><li><ul>{% endif %}
-          <li><a href="/{{ lang }}/{% translate {{page.id}} url {{lang}} %}"{{ active }}>{{ site.langs[lang] }}</a></li>
-        {% assign i = i | plus: 1 %}{% endfor %}
-        </ul></li>
-      </ul>
-      </li>
-    </ul>
-    <a id="menumobile" class="menumobile" onclick="mobileMenuShow(event);" ontouchstart="mobileMenuShow(event);" href="#"></a>
-    <a class="logo" href="/{{ page.lang }}/"><img src="/img/icons/logotop.svg" alt="Bitcoin"></a>
-    <div id="langselect" class="langselect"><select onchange="window.location=this.value;">
-    {% for lang in site.langsorder %}{% assign active = ''%}{% if lang == page.lang %}{% assign active = ' selected="selected"'%}{% endif %}
-          <option value="/{{ lang }}/{% translate {{page.id}} url {{lang}} %}"{{ active }}>{{ site.langs[lang] }}</option>
-    {% endfor %}
-    </select></div>
-    <ul id="menusimple" class="menusimple" onclick="mobileMenuHover(event);" ontouchstart="mobileMenuHover(event);">
-      <li><a href="#" onclick="return false;">{% translate menu-intro layout %}</a>
-        <ul>
-          <li{% if page.id == 'bitcoin-for-individuals' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-individuals url %}">{% translate menu-bitcoin-for-individuals layout %}</a></li>
-          <li{% if page.id == 'bitcoin-for-businesses' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-businesses url %}">{% translate menu-bitcoin-for-businesses layout %}</a></li>
-          <li{% if page.id == 'bitcoin-for-developers' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate bitcoin-for-developers url %}">{% translate menu-bitcoin-for-developers layout %}</a></li>
-          <li{% if page.id == 'getting-started' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate getting-started url %}">{% translate menu-getting-started layout %}</a></li>
-          <li{% if page.id == 'how-it-works' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate how-it-works url %}">{% translate menu-how-it-works layout %}</a></li>
-          <li{% if page.id == 'you-need-to-know' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate you-need-to-know url %}">{% translate menu-you-need-to-know layout %}</a></li>
-        </ul>
-      </li>
-      <li><a href="#" onclick="return false;">{% translate menu-resources layout %}</a>
-        <ul>
-          <li{% if page.id == 'resources' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate resources url %}">{% translate menu-resources layout %}</a></li>
-          <li{% if page.id == 'community' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate community url %}">{% translate menu-community layout %}</a></li>
-          {% if page.lang == 'en' %}<li{% if page.id == 'developer-documentation' %} class="active"{% endif %}><a href="/en/developer-documentation">Documentation</a></li>{% endif %}
-          <li{% if page.id == 'vocabulary' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate vocabulary url %}">{% translate menu-vocabulary layout %}</a></li>
-          <li{% if page.id == 'events' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate events url %}">{% translate menu-events layout %}</a></li>
-        </ul>
-      </li>
-      <li{% if page.id == 'innovation' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate innovation url %}">{% translate menu-innovation layout %}</a></li>
-      <li><a href="#" onclick="return false;">{% translate menu-participate layout %}</a>
-        <ul>
-          <li{% if page.id == 'support-bitcoin' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate support-bitcoin url %}">{% translate menu-support-bitcoin layout %}</a>
-          {% if page.lang == 'en' %}<li{% if page.id == 'full-node' %} class="active"{% endif %}><a href="/en/full-node">Running a full node</a></li>{% endif %}
-          <li{% if page.id == 'development' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate development url %}">{% translate menu-development layout %}</a></li>
-        </ul>
-      </li>
-      <li{% if page.id == 'faq' %} class="active"{% endif %}><a href="/{{ page.lang }}/{% translate faq url %}">{% translate menu-faq layout %}</a></li>
-    </ul>
 </div></div>
+
 <div class="body">
-    <div id="content" class="content">
+  {% include layout/base/breadcrumbs.html %}
-    {{ content }}
+  {% include layout/base/content.html %}
-    </div>
   <div class="footer">
-    <div class="footermenu">
+    {% include layout/base/footer-menu.html %}
-    <a href="/en/alerts" class="statusmenu{% if site.STATUS == 1 %} alert{% endif %}">Network Status</a>
+    {% include layout/base/footer-sponsor.html %}
-    <a href="/{{ page.lang }}/{% translate legal url %}">{% translate menu-legal layout %}</a>
+    {% include layout/base/footer-license.html %}
-    {% case page.lang %}
-    {% when 'ar' or 'es' or 'sl' %}
-    <a href="/en/privacy">Privacy</a>
-    {% else %}
-    <a href="/{{ page.lang }}/{% translate privacy url %}">{% translate menu-privacy layout %}</a>
-    {% endcase %}
-    <a href="/{{ page.lang }}/{% translate press url %}">{% translate menu-press layout %}</a>
-    <a href="/{{ page.lang }}/{% translate about-us url %}">{% translate menu-about-us layout %}</a>
-    <a href="/en/blog">Blog</a>
-    </div>
-    <div class="footersponsor">
-      <div><span>{% translate sponsor layout %}</span> <a href="https://bitcoinfoundation.org/"><img src="/img/brand/bitcoinfoundation.png" alt="Bitcoin Foundation"></a></div>
-    </div>
-    <div class="footerlicense">© Bitcoin Project 2009-{{ site.time | date: '%Y' }} {% translate footer layout %}</div>
   </div>
 </div>
-  <script type="text/javascript">
+
-    fallbackSVG();
+{% include layout/base/footer-js.html %}
-    addAnchorLinks();
-  </script>
 </body>
 
 </html>

_layouts/glossary_entry.html

@@ -4,6 +4,11 @@
 
 layout: base
 lang: en
+breadcrumbs:
+  - bitcoin
+  - dev docs
+  - glossary
+  - GLOSSARY_ENTRY_TITLE
 ---
 <link rel="stylesheet" href="/css/jquery-ui.min.css">
 

_less/screen.less

@@ -359,6 +359,10 @@ table td,table th{
 	display:block;
 }
 
+.breadcrumbs {
+	font-size: 75%;
+	padding-left: 10px;
+}
 .content{
 	position:relative;
 	padding:30px 40px 40px 40px;

_translations/en.yml

@@ -706,6 +706,7 @@ en:
     footer: "Released under the <a href=\"http://opensource.org/licenses/mit-license.php\" target=\"_blank\">MIT license</a>"
     sponsor: "A community website sponsored by"
     getstarted: "Get started with Bitcoin"
+    bitcoin-core: "Bitcoin Core"
   url:
     about-us: about-us
     bitcoin-for-developers: bitcoin-for-developers

en/developer-documentation.md

@@ -6,6 +6,9 @@ layout: base
 lang: en
 id: developer-documentation
 title: "Developer Documentation - Bitcoin"
+breadcrumbs:
+  - bitcoin
+  - Developer Documentation
 ---
 <link rel="stylesheet" href="/css/jquery-ui.min.css">
 

en/developer-examples.md

@@ -6,6 +6,10 @@ layout: base
 lang: en
 id: developer-examples
 title: "Developer Examples - Bitcoin"
+breadcrumbs:
+  - bitcoin
+  - dev docs
+  - Examples
 ---
 <link rel="stylesheet" href="/css/jquery-ui.min.css">
 

en/developer-glossary.html

@@ -5,6 +5,10 @@
 title: Developer Glossary - Bitcoin
 layout: base
 lang: en
+breadcrumbs:
+  - bitcoin
+  - dev docs
+  - Glossary
 ---
 <link rel="stylesheet" href="/css/jquery-ui.min.css">
 

en/developer-guide.md

@@ -6,6 +6,10 @@ layout: base
 lang: en
 id: developer-guide
 title: "Developer Guide - Bitcoin"
+breadcrumbs:
+  - bitcoin
+  - dev docs
+  - Guide
 ---
 <link rel="stylesheet" href="/css/jquery-ui.min.css">
 

en/developer-reference.md

@@ -6,6 +6,10 @@ layout: base
 lang: en
 id: developer-reference
 title: "Developer Reference - Bitcoin"
+breadcrumbs:
+  - bitcoin
+  - dev docs
+  - Reference
 ---
 <link rel="stylesheet" href="/css/jquery-ui.min.css">