updates for 6.1 - removed sidebarconfigs, added topnav flexibility, removed scroll layout, updated docs, removed lavish-bootstrap, replaced with normal bootstrap, added styles to compensate
This commit is contained in:
Tom Johnson
1
.gitignore
vendored
1
.gitignore
vendored
@ -2,5 +2,4 @@ _site/
|
||||
.sass-cache/
|
||||
.jekyll-metadata
|
||||
_pdf
|
||||
.idea/
|
||||
.DS_Store
|
||||
|
||||
@ -190,14 +190,12 @@ GEM
|
||||
tzinfo (1.2.2)
|
||||
thread_safe (~> 0.1)
|
||||
unicode-display_width (1.1.3)
|
||||
wdm (0.1.1)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
github-pages
|
||||
wdm (>= 0.1.0)
|
||||
|
||||
BUNDLED WITH
|
||||
1.14.3
|
||||
|
||||
@ -73,6 +73,7 @@ defaults:
|
||||
comments: true
|
||||
search: true
|
||||
sidebar: home_sidebar
|
||||
topnav: topnav
|
||||
-
|
||||
scope:
|
||||
path: ""
|
||||
@ -92,6 +93,7 @@ defaults:
|
||||
comments: true
|
||||
search: true
|
||||
sidebar: home_sidebar
|
||||
topnav: topnav
|
||||
|
||||
# these are defaults used for the frontmatter for these file types
|
||||
|
||||
|
||||
@ -244,10 +244,6 @@ entries:
|
||||
url: /mydoc_faq_layout.html
|
||||
output: web, pdf
|
||||
|
||||
- title: Scroll layout
|
||||
url: /mydoc_scroll.html
|
||||
output: web, pdf
|
||||
|
||||
- title: Shuffle layout
|
||||
url: /mydoc_shuffle.html
|
||||
output: web, pdf
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
{% if page.sidebar == "home_sidebar" %}
|
||||
{% assign sidebar = site.data.sidebars.home_sidebar.entries %}
|
||||
|
||||
{% elsif page.sidebar == "product1_sidebar" %}
|
||||
{% assign sidebar = site.data.sidebars.product1_sidebar.entries %}
|
||||
|
||||
{% elsif page.sidebar == "product2_sidebar" %}
|
||||
{% assign sidebar = site.data.sidebars.product2_sidebar.entries %}
|
||||
|
||||
{% elsif page.sidebar == "mydoc_sidebar" %}
|
||||
{% assign sidebar = site.data.sidebars.mydoc_sidebar.entries %}
|
||||
|
||||
{% else %}
|
||||
{% assign sidebar = site.data.sidebars.home_sidebar.entries %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
{% comment %}
|
||||
sidebar configuration for print files
|
||||
{% endcomment %}
|
||||
|
||||
{% if site.product == "mydoc" %}
|
||||
{% assign sidebar_pdf = site.data.sidebars.mydoc_sidebar.entries %}
|
||||
{% endif %}
|
||||
|
||||
{% if site.product == "product1" %}
|
||||
{% assign sidebar_pdf = site.data.sidebars.product1_sidebar.entries %}
|
||||
{% endif %}
|
||||
|
||||
{% if site.product == "product2" %}
|
||||
{% assign sidebar_pdf = site.data.sidebars.product2_sidebar.entries %}
|
||||
{% endif %}
|
||||
@ -1,16 +1,25 @@
|
||||
{% if site.disqus_shortname %}
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script type="text/javascript">
|
||||
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
||||
var disqus_shortname = '{{site.disqus_shortname}}'; // required: replace example with your forum shortname
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
/**
|
||||
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
|
||||
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
|
||||
*/
|
||||
|
||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
||||
{% endif %}
|
||||
var disqus_config = function () {
|
||||
this.page.url = "{{site.url}}/{{page.permalink}}"; // Replace PAGE_URL with your page's canonical URL variable
|
||||
this.page.identifier = "{{page.permalink}}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
|
||||
};
|
||||
|
||||
(function() { // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
|
||||
var d = document, s = d.createElement('script');
|
||||
|
||||
s.src = 'https://{{site.disqus_shortname}}.disqus.com/embed.js'; // IMPORTANT: Replace EXAMPLE with your forum shortname!
|
||||
|
||||
s.setAttribute('data-timestamp', +new Date());
|
||||
(d.head || d.body).appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
|
||||
{% endif %}
|
||||
|
||||
@ -6,20 +6,25 @@
|
||||
<title>{{ page.title }} | {{ site.site_title }}</title>
|
||||
<link rel="stylesheet" href="{{ "css/syntax.css" }}">
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
|
||||
<!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
|
||||
<link rel="stylesheet" href="{{ "css/modern-business.css" }}">
|
||||
<link rel="stylesheet" href="{{ "css/lavish-bootstrap.css" }}">
|
||||
<link rel="stylesheet" href="{{ "css/customstyles.css" }}">
|
||||
<link rel="stylesheet" href="{{ "css/theme-blue.css" }}">
|
||||
<link rel="stylesheet" href="css/modern-business.css">
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/customstyles.css">
|
||||
|
||||
<!-- most color styles are extracted out to here -->
|
||||
<link rel="stylesheet" href="css/theme-blue.css">
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
|
||||
<script src="{{ "js/jquery.navgoco.min.js" }}"></script>
|
||||
|
||||
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||
<!-- Anchor.js -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/2.0.0/anchor.min.js"></script>
|
||||
<script src="{{ "js/toc.js" }}"></script>
|
||||
<script src="{{ "js/customscripts.js" }}"></script>
|
||||
|
||||
@ -1,54 +1,54 @@
|
||||
{% include custom/sidebarconfigs.html %}
|
||||
{% assign sidebar = site.data.sidebars[page.sidebar].entries %}
|
||||
|
||||
<ul id="mysidebar" class="nav">
|
||||
<li class="sidebarTitle">{{sidebar[0].product}} {{sidebar[0].version}}</li>
|
||||
{% for entry in sidebar %}
|
||||
{% for folder in entry.folders %}
|
||||
{% if folder.output contains "web" %}
|
||||
<li>
|
||||
<a href="#">{{ folder.title }}</a>
|
||||
<ul>
|
||||
{% for folderitem in folder.folderitems %}
|
||||
{% if folderitem.output contains "web" %}
|
||||
{% if folderitem.external_url %}
|
||||
<li><a href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a></li>
|
||||
{% elsif page.url == folderitem.url %}
|
||||
<li class="active"><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
|
||||
{% else %}
|
||||
<li><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
|
||||
{% endif %}
|
||||
{% for subfolders in folderitem.subfolders %}
|
||||
{% if subfolders.output contains "web" %}
|
||||
<li class="subfolders">
|
||||
<a href="#">{{ subfolders.title }}</a>
|
||||
<ul>
|
||||
{% for subfolderitem in subfolders.subfolderitems %}
|
||||
{% if subfolderitem.output contains "web" %}
|
||||
{% if subfolderitem.external_url %}
|
||||
<li><a href="{{subfolderitem.external_url}}" target="_blank">{{subfolderitem.title}}</a></li>
|
||||
{% elsif page.url == subfolderitem.url %}
|
||||
<li class="active"><a href="{{subfolderitem.url | remove: "/"}}">{{subfolderitem.title}}</a></li>
|
||||
{% else %}
|
||||
<li><a href="{{subfolderitem.url | remove: "/"}}">{{subfolderitem.title}}</a></li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
<!-- if you aren't using the accordion, uncomment this block:
|
||||
<p class="external">
|
||||
<a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
|
||||
</p>
|
||||
-->
|
||||
<li class="sidebarTitle">{{sidebar[0].product}} {{sidebar[0].version}}</li>
|
||||
{% for entry in sidebar %}
|
||||
{% for folder in entry.folders %}
|
||||
{% if folder.output contains "web" %}
|
||||
<li>
|
||||
<a href="#">{{ folder.title }}</a>
|
||||
<ul>
|
||||
{% for folderitem in folder.folderitems %}
|
||||
{% if folderitem.output contains "web" %}
|
||||
{% if folderitem.external_url %}
|
||||
<li><a href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a></li>
|
||||
{% elsif page.url == folderitem.url %}
|
||||
<li class="active"><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
|
||||
{% else %}
|
||||
<li><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
|
||||
{% endif %}
|
||||
{% for subfolders in folderitem.subfolders %}
|
||||
{% if subfolders.output contains "web" %}
|
||||
<li class="subfolders">
|
||||
<a href="#">{{ subfolders.title }}</a>
|
||||
<ul>
|
||||
{% for subfolderitem in subfolders.subfolderitems %}
|
||||
{% if subfolderitem.output contains "web" %}
|
||||
{% if subfolderitem.external_url %}
|
||||
<li><a href="{{subfolderitem.external_url}}" target="_blank">{{subfolderitem.title}}</a></li>
|
||||
{% elsif page.url == subfolderitem.url %}
|
||||
<li class="active"><a href="{{subfolderitem.url | remove: "/"}}">{{subfolderitem.title}}</a></li>
|
||||
{% else %}
|
||||
<li><a href="{{subfolderitem.url | remove: "/"}}">{{subfolderitem.title}}</a></li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
<!-- if you aren't using the accordion, uncomment this block:
|
||||
<p class="external">
|
||||
<a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
|
||||
</p>
|
||||
-->
|
||||
</ul>
|
||||
|
||||
<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above. Otherwise, if placed inside customscripts.js, the script runs before the sidebar code runs and the class never gets inserted.-->
|
||||
|
||||
@ -15,7 +15,11 @@
|
||||
<!-- toggle sidebar button -->
|
||||
<li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>
|
||||
<!-- entries without drop-downs appear here -->
|
||||
{% for entry in site.data.topnav.topnav %}
|
||||
|
||||
{% assign topnav = site.data[page.topnav] %}
|
||||
{% assign topnav_dropdowns = site.data[page.topnav].topnav_dropdowns %}
|
||||
|
||||
{% for entry in topnav %}
|
||||
{% for item in entry.items %}
|
||||
{% if item.external_url %}
|
||||
<li><a href="{{item.external_url}}" target="_blank">{{item.title}}</a></li>
|
||||
@ -28,7 +32,7 @@
|
||||
{% endfor %}
|
||||
<!-- entries with drop-downs appear here -->
|
||||
<!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
|
||||
{% for entry in site.data.topnav.topnav_dropdowns %}
|
||||
{% for entry in topnav_dropdowns %}
|
||||
{% for folder in entry.folders %}
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ folder.title }}<b class="caret"></b></a>
|
||||
|
||||
@ -76,6 +76,7 @@
|
||||
{% include topnav.html %}
|
||||
<!-- Page Content -->
|
||||
<div class="container">
|
||||
<div id="main">
|
||||
<div class="col-lg-12"> </div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
@ -95,6 +96,8 @@
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</div>
|
||||
<!-- /#main -->
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@ -178,16 +178,6 @@ table th[class*="col-"] {
|
||||
float: none;
|
||||
}
|
||||
|
||||
|
||||
table td:first-child {
|
||||
width: 150px;
|
||||
/*font-weight:bold;*/
|
||||
}
|
||||
|
||||
table.boldFirstColumn td:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -41,6 +41,17 @@ a[data-toggle="tooltip"] {
|
||||
background-color: #347DBE;
|
||||
border-color: #015CAE;
|
||||
}
|
||||
.navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-brand {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav>li>a:hover, a.fa.fa-home.fa-lg.navbar-brand:hover {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
a.navbar-brand:hover {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
|
||||
color: #015CAE;
|
||||
@ -51,7 +62,6 @@ a[data-toggle="tooltip"] {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* not sure if using this ...*/
|
||||
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
|
||||
border-color: #248ec2 !important;
|
||||
}
|
||||
@ -100,4 +110,4 @@ li.sidebarTitle {
|
||||
margin-bottom:10px;
|
||||
margin-left: 5px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,6 +25,14 @@ div.navbar-collapse .dropdown-menu > li > a:hover {
|
||||
background-color: #72ac4a;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-brand {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav>li>a:hover, a.fa.fa-home.fa-lg.navbar-brand:hover {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.nav li.thirdlevel > a {
|
||||
background-color: #FAFAFA !important;
|
||||
color: #72ac4a;
|
||||
@ -96,4 +104,4 @@ li.sidebarTitle {
|
||||
margin-bottom:10px;
|
||||
margin-left: 5px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
85
index.md
85
index.md
@ -90,31 +90,7 @@ This is perhaps the easiest way to see how your site would actually look.
|
||||
|
||||
There are several products in this theme. Each product uses a different sidebar. This is the essence of what makes this theme unique -- different sidebars for different product documentation. The idea is that when users are reading documentation for a specific product, the sidebar navigation should be specific to that product. (You can read more of my thoughts on why multiple sidebars are important in this [blog post](http://idratherbewriting.com/2016/03/23/release-of-documentation-theme-for-jekyll-50/).)
|
||||
|
||||
The top navigation remains the same, because it allows users to navigate across products. But the sidebar navigation adapts to the product.
|
||||
|
||||
Because each product uses a different sidebar, you'll need to set up your sidebars. There's a file inside \_includes/custom called "sidebarconfigs.html." This file controls which sidebar gets associated with which product. Open up this file to see its contents.
|
||||
|
||||
The sidebarconfigs.html file uses simple `if elsif` logic to set a variable that the sidebar.html file uses to read the sidebar data file. The code in sidebarconfigs.html looks like this:
|
||||
|
||||
{% raw %}
|
||||
```liquid
|
||||
{% if page.sidebar == "home_sidebar" %}
|
||||
{% assign sidebar = site.data.sidebars.home_sidebar.entries %}
|
||||
|
||||
{% elsif page.sidebar == "product1_sidebar" %}
|
||||
{% assign sidebar = site.data.sidebars.product1_sidebar.entries %}
|
||||
|
||||
{% elsif page.sidebar == "product2_sidebar" %}
|
||||
{% assign sidebar = site.data.sidebars.product2_sidebar.entries %}
|
||||
|
||||
{% elsif page.sidebar == "mydoc_sidebar" %}
|
||||
{% assign sidebar = site.data.sidebars.mydoc_sidebar.entries %}
|
||||
|
||||
{% else %}
|
||||
{% assign sidebar = site.data.sidebars.home_sidebar.entries %}
|
||||
{% endif %}
|
||||
```
|
||||
{% endraw %}
|
||||
The top navigation usually remains the same, because it allows users to navigate across products. But the sidebar navigation adapts to the product.
|
||||
|
||||
In each page's frontmatter, you must specify the sidebar you want that page to use. Here's an example of the page frontmatter showing the sidebar property:
|
||||
|
||||
@ -132,16 +108,71 @@ permalink: mydoc_alerts
|
||||
|
||||
The `sidebar: mydoc_sidebar` refers to the \_data/sidebars/mydoc_sidebar.yml file (meaning, the mydoc_sidebar.yml file inside the sidebars subfolder inside the \data folder).
|
||||
|
||||
If no sidebar assignment is found in the page frontmatter, the default sidebar (specified by the `else` statement) will be shown: `site.data.sidebars.home_sidebar.entries`.
|
||||
|
||||
Note that your sidebar can only have 2 levels. Given that each product has its own sidebar, this depth should be sufficient (it's really like 3 levels). Deeper nesting goes against usability recommendations.
|
||||
|
||||
{% include note.html content="Note that each level must have at least one topic before the next level starts. You can't have a second level that contains multiple third levels without having at least one standalone topic in the second level." %}
|
||||
|
||||
You can optionally turn off the sidebar on any page (e.g. landing pages). To turn off the sidebar for a page, you should set the page frontmatter tag as `hide_sidebar: true`.
|
||||
|
||||
If you don't declare a sidebar, the `home_sidebar` file gets used as the default. This is the default specified in the config file:
|
||||
|
||||
```
|
||||
-
|
||||
scope:
|
||||
path: ""
|
||||
type: "pages"
|
||||
values:
|
||||
layout: "page"
|
||||
comments: true
|
||||
search: true
|
||||
sidebar: home_sidebar
|
||||
topnav: topnav
|
||||
```
|
||||
|
||||
If you wanted to load different sidebars based on how pages are organized, you could specify that like this:
|
||||
|
||||
```
|
||||
-
|
||||
scope:
|
||||
path: "pages/mydoc"
|
||||
type: "pages"
|
||||
values:
|
||||
layout: "page"
|
||||
comments: true
|
||||
search: true
|
||||
sidebar: mydoc_sidebar
|
||||
topnav: topnav
|
||||
```
|
||||
|
||||
This would load the `mydoc_sidebar` for each file in pages/mydoc.
|
||||
|
||||
For more detail on the sidebar, see [Sidebar navigation][mydoc_sidebar_navigation].
|
||||
|
||||
## Top navigation
|
||||
|
||||
The top navigation works just like the sidebar. You can specify which topnav data file should load by adding a `topnav` property in your page, like this:
|
||||
|
||||
```
|
||||
topnav: topnav
|
||||
```
|
||||
|
||||
Here the topnav refers to the \_data/topnav.yml file.
|
||||
|
||||
Because most topnav options will be the same, the \_config.yml file specifies this as a default:
|
||||
|
||||
```
|
||||
-
|
||||
scope:
|
||||
path: ""
|
||||
type: "pages"
|
||||
values:
|
||||
layout: "page"
|
||||
comments: true
|
||||
search: true
|
||||
sidebar: home_sidebar
|
||||
topnav: topnav
|
||||
```
|
||||
|
||||
## Sidebar syntax
|
||||
|
||||
The sidebar data file uses a specific YAML syntax that you must follow. Follow the sample pattern shown in the theme. For example:
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
$('#mysidebar').height($(".nav").height());
|
||||
|
||||
|
||||
|
||||
7
js/jquery.localScroll.min.js
vendored
7
js/jquery.localScroll.min.js
vendored
@ -1,7 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
|
||||
* Licensed under MIT
|
||||
* @author Ariel Flesler
|
||||
* @version 1.3.5
|
||||
*/
|
||||
;(function(a){if(typeof define==='function'&&define.amd){define(['jquery'],a)}else{a(jQuery)}}(function($){var g=location.href.replace(/#.*/,'');var h=$.localScroll=function(a){$('body').localScroll(a)};h.defaults={duration:1000,axis:'y',event:'click',stop:true,target:window};$.fn.localScroll=function(a){a=$.extend({},h.defaults,a);if(a.hash&&location.hash){if(a.target)window.scrollTo(0,0);scroll(0,location,a)}return a.lazy?this.on(a.event,'a,area',function(e){if(filter.call(this)){scroll(e,this,a)}}):this.find('a,area').filter(filter).bind(a.event,function(e){scroll(e,this,a)}).end().end();function filter(){return!!this.href&&!!this.hash&&this.href.replace(this.hash,'')==g&&(!a.filter||$(this).is(a.filter))}};h.hash=function(){};function scroll(e,a,b){var c=a.hash.slice(1),elem=document.getElementById(c)||document.getElementsByName(c)[0];if(!elem)return;if(e)e.preventDefault();var d=$(b.target);if(b.lock&&d.is(':animated')||b.onBefore&&b.onBefore(e,elem,d)===false)return;if(b.stop)d._scrollable().stop(true);if(b.hash){var f=elem.id===c?'id':'name',$a=$('<a> </a>').attr(f,c).css({position:'absolute',top:$(window).scrollTop(),left:$(window).scrollLeft()});elem[f]='';$('body').prepend($a);location.hash=a.hash;$a.remove();elem[f]=c}d.scrollTo(elem,b).trigger('notify.serialScroll',[elem])};return h}));
|
||||
7
js/jquery.scrollTo.min.js
vendored
7
js/jquery.scrollTo.min.js
vendored
@ -1,7 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
|
||||
* Licensed under MIT
|
||||
* @author Ariel Flesler
|
||||
* @version 1.4.14
|
||||
*/
|
||||
;(function(k){'use strict';k(['jquery'],function($){var j=$.scrollTo=function(a,b,c){return $(window).scrollTo(a,b,c)};j.defaults={axis:'xy',duration:0,limit:!0};j.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(f,g,h){if(typeof g=='object'){h=g;g=0}if(typeof h=='function')h={onAfter:h};if(f=='max')f=9e9;h=$.extend({},j.defaults,h);g=g||h.duration;h.queue=h.queue&&h.axis.length>1;if(h.queue)g/=2;h.offset=both(h.offset);h.over=both(h.over);return this._scrollable().each(function(){if(f==null)return;var d=this,$elem=$(d),targ=f,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=win?$(targ):$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}var e=$.isFunction(h.offset)&&h.offset(d,targ)||h.offset;$.each(h.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=j.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(h.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=e[pos]||0;if(h.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*h.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(h.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&h.queue){if(old!=attr[key])animate(h.onAfterFirst);delete attr[key]}});animate(h.onAfter);function animate(a){$elem.animate(attr,g,h.easing,a&&function(){a.call(this,targ,h)})}}).end()};j.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}return j})}(typeof define==='function'&&define.amd?define:function(a,b){if(typeof module!=='undefined'&&module.exports){module.exports=b(require('jquery'))}else{b(jQuery)}}));
|
||||
@ -1,240 +0,0 @@
|
||||
---
|
||||
title: Scroll layout
|
||||
type: scroll
|
||||
keywords: json, scrolling, scrollto, jquery plugin
|
||||
tags: special_layouts
|
||||
last_updated: November 30, 2015
|
||||
summary: "This page demonstrates how you the integration of a script called ScrollTo, which is used here to link definitions of a JSON code sample to a list of definitions for that particular term. The scenario here is that the JSON blocks are really long, with extensive nesting and subnesting, which makes it difficult for tables below the JSON to adequately explain the term in a usable way."
|
||||
---
|
||||
|
||||
{% if site.output == "pdf" %}
|
||||
{{site.data.alerts.note}} The content on this page doesn't display well on PDF, but I included it anyway so you could see the problems this layout poses if you're including it in PDF. {{site.data.alerts.end}}
|
||||
{% endif %}
|
||||
|
||||
{% if site.output == "web" %}
|
||||
<script src="../js/jquery.scrollTo.min.js"></script>
|
||||
<!-- local scroll must come after scrollTo, because localScroll is based on scrollTo, which is based on jQuery -->
|
||||
<script src="../js/jquery.localScroll.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
$( document ).ready(function() {
|
||||
$('#small-box-links').localScroll({
|
||||
target:'#definition-box-container',
|
||||
showSpeed: 1000,
|
||||
hash: true,
|
||||
easing: 'swing',
|
||||
onAfter:function(){
|
||||
$("#definition-box-container div a").addClass("active");
|
||||
$("#definition-box-container div a").removeClass("active");
|
||||
$("#definition-box-container div").removeClass("active");
|
||||
$(window.location.hash).addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- documentation for localScroll function: http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html -->
|
||||
<style type="text/css">
|
||||
|
||||
#definition-box-container {
|
||||
border: 0px solid #dedede;
|
||||
border-radius: 4px;
|
||||
max-height: 500px;
|
||||
overflow: scroll;
|
||||
padding-left:5px;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
#json-box-container {
|
||||
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 4px;
|
||||
max-height:500px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#small-box-links {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#definition-box-container .active {
|
||||
background-color: #FFFBCC;
|
||||
}
|
||||
|
||||
div#definition-box-container div {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (min-height: 700px) {
|
||||
#json-box-container {
|
||||
max-height:500px;
|
||||
}
|
||||
#definition-box-container {
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 800px) {
|
||||
#json-box-container {
|
||||
max-height:600px;
|
||||
}
|
||||
#definition-box-container {
|
||||
max-height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 900px) {
|
||||
#json-box-container {
|
||||
max-height:700px;
|
||||
}
|
||||
#definition-box-container {
|
||||
max-height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 1000px) {
|
||||
#json-box-container {
|
||||
max-height:800px;
|
||||
}
|
||||
#definition-box-container {
|
||||
max-height: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 1100px) {
|
||||
#json-box-container {
|
||||
max-height:900px;
|
||||
}
|
||||
#definition-box-container {
|
||||
max-height: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div id="small-box-links">
|
||||
|
||||
<div class="col-md-6">
|
||||
<div id="json-box-container">
|
||||
<pre>
|
||||
{
|
||||
<a href="#apples">"apples"</a>: "red fruit at the store",
|
||||
<a href="#bananas">"bananas"</a>: "yellow bananas in a bunch",
|
||||
<a href="#carrots">"carrots"</a>: "orange vegetables that grow in the ground",
|
||||
<a href="#dingbats">"dingbats"</a>: "a type of character symbol on a computer",
|
||||
<a href="#eggs">"eggs"</a>: "chickens lay them, and people eat them",
|
||||
<a href="#falafel">"falafel"</a>: "a Mediterranean sandwich consisting of lots of different stuff i don't know much about",
|
||||
<a href="#giraffe">"giraffe"</a>: "tall animal, has purple tongue",
|
||||
<a href="#hippo">"hippo"</a>: "surprisingly dangerous amphibian",
|
||||
<a href="#igloo">"igloo"</a>: "an ice shelter made by eskimos",
|
||||
<a href="#jeep">"jeep</a>: "the only car that starts with a j",
|
||||
<a href="#kilt">"kilt"</a>: "something worn by scottish people, not a dress",
|
||||
<a href="#lamp">"lamp"</a>: "you use it to read by your bedside at night"
|
||||
<a href="#manifold">"manifold"</a>: "an intake mechanism on a car, like a valve, i think",
|
||||
<a href="#octopus">"octopus"</a>: "eight tentacles, shoots ink, lives in dark caves, very mysterious",
|
||||
<a href="#paranoia">"paranoia"</a>: "the constant feeling that others are out to get you, conspiring against your success",
|
||||
<a href="#qui">"qui"</a>: "a life force that runs through your body",
|
||||
<a href="#radical">"radical"</a>: "someone who opposes the status quo in major ways",
|
||||
<a href="#silly">"silly"</a>: "how I feel writing this dummy copy",
|
||||
<a href="#taffy">"taffy"</a>: "the sweets children like the most and dentists hate the worst",
|
||||
<a href="#umbrella">"umbrella"</a>: "an invention that has not had any advancements in 200 years",
|
||||
<a href="#vampire">"vampire"</a>: "a paranormal figure that is surprisingly in vogue despite its basic nature",
|
||||
<a href="#washington">"washington"</a>: "the place where tom was born",
|
||||
<a href="#xylophone">"xylophone"</a>: "some kind of pinging instrument used to sound chime-like notes",
|
||||
<a href="#yahoo">"yahoo"</a>: "an expression of exuberance, said under breath when something works right",
|
||||
<a href="#zeta">"zeta"</a>: "the way british people pronounce z",
|
||||
<a href="#alpha">"alpha"</a>: "the original letter of the alphabet, which has since come to mean the first. however, i think the original symbol of alpha is actually an ox. it is somewhat of a mystery to linquists as to the exact origin of the letter alpha, but it basically represents the dawn of the alphabet, which proved to be a huge step forward for human thought and expression.",
|
||||
<a href="#beta">"beta"</a>: "the period of time when something is finished but undergoing testing by a group of people.",
|
||||
<a href="#cappa">"cappa"</a>: "how italians refer to their baseball caps",
|
||||
<a href="#dunno">"dunno"</a>: "informal expression for 'don't know'"
|
||||
}
|
||||
|
||||
</pre>
|
||||
|
||||
</div><!-- end json-box-container-->
|
||||
</div> <!-- end col-md-6-->
|
||||
|
||||
<div class="col-md-3">
|
||||
|
||||
<div id="definition-box-container">
|
||||
|
||||
|
||||
<div id="apples"><h5>apples</h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer magna massa, euismod sed rutrum at, ullamcorper quis tellus. Vestibulum erat purus, aliquet sit amet pellentesque eget, tempus at ante. Nulla justo nisi, elementum nec nisi eget, consectetur varius tortor. </div>
|
||||
|
||||
<div id="bananas"><h5>bananas</h5>Curabitur quis nibh sed eros viverra tempus et quis lorem. Nulla convallis sit amet risus vitae rutrum. Nulla at faucibus lectus. Pellentesque tortor nisl, interdum ac quam non, egestas congue massa. Vestibulum non porttitor lacus. Nam tincidunt arcu lectus. Donec eget ornare neque, hendrerit ornare lectus. In ac pretium odio.</div>
|
||||
|
||||
<div id="carrots"><h5>carrots</h5>Vivamus pulvinar vestibulum pharetra. Vivamus vitae diam iaculis, posuere mi sed, dignissim massa. Nunc vitae aliquet urna. Proin sed pulvinar ex. Maecenas nisl lorem, rutrum sit amet hendrerit sed, posuere at odio. Sed consectetur semper tristique. Vivamus finibus varius felis at convallis. Fusce in dictum nunc.</div>
|
||||
|
||||
<div id="dingbats"><h5>dingbats</h5>Curabitur feugiat lorem eget elit ullamcorper tincidunt. In euismod diam aliquet tortor fermentum tempor. Fusce quam felis, commodo viverra orci vitae, scelerisque aliquet risus. </div>
|
||||
|
||||
<div id="eggs"><h5>eggs</h5>Duis est nunc, fringilla eu ligula et, varius dignissim dui. Vivamus in tellus vitae ipsum vehicula fermentum at congue tellus. Suspendisse fermentum, magna vitae aliquet sodales, tellus nisi rutrum arcu, vitae auctor dolor quam ac tellus. Cras posuere augue erat, in sagittis quam lacinia id.</div>
|
||||
|
||||
<div id="falafel"><h5>falafel</h5>Praesent auctor a enim non lacinia. Integer sodales aliquet mi vel dapibus. Donec consequat justo eget nisi lacinia, eu sodales ligula molestie. Sed sapien nulla, rhoncus at elementum a, </div>
|
||||
|
||||
<div id="giraffe"><h5>giraffe</h5>Nullam venenatis at lectus sed pharetra. Sed hendrerit ligula lectus, non pellentesque diam faucibus sit amet. Aliquam dictum hendrerit pellentesque. Cras eu nisl sagittis, faucibus velit sit amet, sagittis odio. Donec vulputate ex vitae purus</div>
|
||||
|
||||
<div id="hippo"><h5>hippo</h5>Cras nec pretium nulla. Suspendisse tempus tortor vel venenatis pulvinar. Integer varius tempor enim fringilla tincidunt. Phasellus magna turpis, auctor vitae elit eget, fringilla pellentesque est. Phasellus ut porta risus. Curabitur iaculis sapien sed venenatis auctor. Integer eu orci at lectus eleifend auctor id rutrum urna.</div>
|
||||
|
||||
<div id="igloo"><h5>igloo</h5>Suspendisse tempus tortor vel venenatis pulvinar. Integer varius tempor enim fringilla tincidunt. Phasellus magna turpis, auctor vitae elit eget, fringilla pellentesque est. Phasellus ut porta risus. </div>
|
||||
|
||||
<div id="jeep"><h5>jeep</h5>Nulla vitae metus rutrum, condimentum orci nec, maximus est. Aenean sit amet ante nec elit dignissim faucibus eget quis quam. </div>
|
||||
|
||||
<div id="kilt"><h5>kilt</h5>Morbi maximus, erat vel rhoncus sagittis, dolor purus dignissim ante, sit amet pharetra ex justo vitae ipsum. Nulla consequat interdum neque</div>
|
||||
|
||||
<div id="lamp"><h5>lamp</h5>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquam dapibus blandit. Donec porta, enim hendrerit venenatis vulputate, orci diam lacinia nibh, faucibus rutrum dolor dui ut quam.</div>
|
||||
|
||||
<div id="manifold"><h5>manifold</h5>Donec finibus massa vel nisi ullamcorper, vitae ornare enim euismod. Aliquam auctor quam erat. Duis interdum rutrum orci, ac interdum urna pharetra eget.</div>
|
||||
|
||||
<div id="octopus"><h5>octopus</h5>Nulla id egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Curabitur eu lobortis ligula.</div>
|
||||
|
||||
<div id="paranoia"><h5>paranoia</h5>Aenean hendrerit mauris ipsum, non laoreet ipsum luctus vel. Curabitur tristique auctor elit ut pulvinar. Quisque arcu arcu, condimentum aliquam sodales nec, dignissim nec justo. Nunc tristique sem felis, pharetra euismod lorem volutpat sed. Ut porttitor metus sit amet elit rhoncus semper.</div>
|
||||
|
||||
<div id="qui"><h5>qui</h5>Quisque rhoncus cursus felis vel elementum. Vestibulum dignissim molestie tortor nec facilisis. Praesent a nibh condimentum, porta nulla egestas, auctor eros</div>
|
||||
|
||||
<div id="radical"><h5>radical</h5>Etiam hendrerit interdum tellus, at aliquet sapien egestas in. Aenean eu urna nisl. Cras vitae risus pharetra, elementum mauris nec, auctor lectus. Fusce pellentesque venenatis dictum. Proin at augue at mauris finibus semper ultricies sed eros.</div>
|
||||
|
||||
<div id="silly"><h5>silly</h5>Praesent pulvinar consequat posuere. Morbi egestas rhoncus felis, id fermentum metus lobortis in. Vestibulum nibh orci, euismod eget vestibulum nec, vehicula vitae tortor. Aenean ullamcorper enim nunc, eu auctor ligula auctor eget.</div>
|
||||
|
||||
<div id="taffy"><h5>taffy</h5>Etiam et arcu vel lacus aliquet lobortis in in massa. Nunc non mollis elit. Aenean accumsan orci quis risus aliquam, non gravida nulla molestie. Mauris pharetra libero et magna aliquam aliquam. Integer quis luctus dolor. </div>
|
||||
|
||||
<div id="umbrella"><h5>umbrella</h5>Fusce molestie finibus malesuada. Nullam ac egestas quam, id venenatis ligula. Pellentesque pulvinar elit et vestibulum fringilla. Cras volutpat sed quam ornare scelerisque. Vivamus volutpat ante pretium scelerisque tempus. Etiam venenatis tempor nisl dignissim sollicitudin. Curabitur ac risus vitae dolor pretium posuere vel vitae diam. Donec in odio arcu.</div>
|
||||
|
||||
<div id="vampire"><h5>vampire</h5>Vestibulum pretium condimentum commodo. Integer placerat leo non ipsum ultrices, ac convallis elit varius. Vestibulum ultricies, justo eu rutrum molestie, quam arcu euismod sapien, vel gravida ipsum nulla eget erat. </div>
|
||||
|
||||
<div id="washington"><h5>washington</h5>Nunc ac quam eu risus dictum sodales. Nam ac risus iaculis, aliquet sem eu, mollis mauris. Curabitur pretium facilisis orci ut lacinia. Sed fermentum leo a odio blandit rutrum. Phasellus at nibh vel odio interdum vulputate ac eget urna. Nam eu arcu dapibus, sodales ligula nec, volutpat ipsum. Suspendisse auctor tellus vitae libero euismod venenatis. </div>
|
||||
|
||||
<div id="xylophone"><h5>xylophone</h5>Sed molestie lobortis ante sit amet hendrerit. Sed pharetra nisi sed interdum pulvinar. Nunc efficitur erat non aliquam mattis. Sed id nisl mattis lacus vehicula volutpat vitae vel massa. Curabitur interdum velit odio, vitae sollicitudin nunc rutrum non. </div>
|
||||
|
||||
<div id="yahoo"><h5>yahoo</h5>Nunc commodo consectetur scelerisque. Proin fermentum ligula ac quam finibus tincidunt. Aenean venenatis nisi et semper semper. Nunc sodales velit ipsum, ac pellentesque augue placerat eu.</div>
|
||||
|
||||
<div id="zeta"><h5>zeta</h5>Nullam ac suscipit odio. Curabitur viverra arcu ut egestas sollicitudin. Fusce sodales varius lectus ut tristique. Etiam eget nunc ornare, aliquet tortor eget, consequat mauris. Integer sit amet fermentum augue. </div>
|
||||
|
||||
<div id="alpha"><h5>alpha</h5>Praesent nec neque ac tellus sodales eleifend nec vel ipsum. Cras et semper risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer mattis leo nisl, a tincidunt lectus tristique eget. Donec finibus lobortis viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus egestas pulvinar odio non vehicula. Morbi malesuada leo eget nisl sagittis aliquet.</div>
|
||||
|
||||
|
||||
<div id="beta"><h5>beta</h5>Mauris a libero vel enim pharetra interdum non a quam. Sed tincidunt ut elit sed dignissim. Suspendisse vitae tellus dapibus, fermentum lacus ac, fermentum lacus. Nam ante odio, fringilla ac elementum a, mollis sed tellus.</div>
|
||||
|
||||
<div id="cappa"><h5>cappa</h5>Nam molestie semper nulla et molestie. Ut facilisis, ipsum sed convallis posuere, mi mauris bibendum erat, nec egestas ipsum est nec dolor. </div>
|
||||
|
||||
<div id="dunno"><h5>dunno</h5>Etiam et metus congue, commodo libero et, accumsan sem. Aliquam erat volutpat. Quisque tincidunt, tortor non blandit ullamcorper, orci mauris dignissim augue, eget vehicula nulla justo sed dolor. Nunc ac urna quis nisi maximus pharetra in a mauris. Proin metus mi, venenatis vitae tristique sed, fermentum at purus. Aliquam erat volutpat. Maecenas efficitur sodales nibh, ac hendrerit felis facilisis et. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
|
||||
|
||||
|
||||
</div> <!-- end definition-box-container -->
|
||||
</div> <!-- end col-md-3-->
|
||||
</div> <!-- end small-box-links -->
|
||||
</div> <!-- end row -->
|
||||
</div> <!-- end container -->
|
||||
|
||||
|
||||
{{site.data.alerts.note}} This was mostly an experiment to see if there was a better way to document a long JSON code example. I haven't actually used this approach in my own documentation.{{site.data.alerts.end}}
|
||||
|
||||
{% endif %}
|
||||
|
||||
@ -23,7 +23,7 @@ Also, creating a PDF this way gives you a lot more control and customization cap
|
||||
|
||||
You can see an example of the finished product here:
|
||||
|
||||
<a target="_blank" class="noCrossRef" href="{{ "pdf/mydoc.pdf"}}"><button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> PDF Download</button></a>
|
||||
<a target="\_blank" class="noCrossRef" href="{{ "pdf/mydoc.pdf"}}"><button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> PDF Download</button></a>
|
||||
|
||||
## 1. Set up Prince
|
||||
|
||||
@ -316,27 +316,19 @@ Make sure that the path to the prince-list.txt is correct. For the output direct
|
||||
|
||||
{% include note.html content="You might not want to include the PDF in your project files, since you're likely committing the PDF to Github and as a result saving the changes from one PDF version to another with each save." %}
|
||||
|
||||
## 6. Add conditions for your new builds in the sidebarconfigs.html file
|
||||
## 6. Add conditions for your new builds in the PDF config file
|
||||
|
||||
In the \_includes/custom/sidebarconfigs.html file, there's a section that looks like this:
|
||||
In the PDF configuration file, there's a section that looks like this:
|
||||
|
||||
```
|
||||
{% raw %}{% if site.product == "mydoc" %}
|
||||
{% assign sidebar_pdf = site.data.sidebars.mydoc_sidebar.entries %}
|
||||
pdf_sidebar: product2_sidebar
|
||||
{% endif %}
|
||||
|
||||
{% if site.product == "product1" %}
|
||||
{% assign sidebar_pdf = site.data.sidebars.product1_sidebar.entries %}
|
||||
{% endif %}
|
||||
|
||||
{% if site.product == "product2" %}
|
||||
{% assign sidebar_pdf = site.data.sidebars.product2_sidebar.entries %}
|
||||
{% endif %}{% endraw %}
|
||||
```
|
||||
|
||||
Add your own condition here that points to your sidebar.
|
||||
Point to the sidebar you want here.
|
||||
|
||||
What this does is allow the prince-list.txt and toc.html files to use a variable for the sidebar (called `sidebar_pdf`) when iterating through the sidebar. Otherwise, you would need to create a unique prince-list.txt and toc.html file for each separate PDF output you have.
|
||||
What this does is allow the prince-list.txt and toc.html files to iterate through the right sidebar. Otherwise, you would need to create a unique prince-list.txt and toc.html file for each separate PDF output you have.
|
||||
|
||||
## 7. Add a download button for the PDF
|
||||
|
||||
|
||||
@ -1,242 +0,0 @@
|
||||
---
|
||||
title: Scroll layout
|
||||
keywords: json, scrolling, scrollto, jquery plugin
|
||||
tags: [special_layouts]
|
||||
last_updated: November 30, 2015
|
||||
summary: "This page demonstrates how you the integration of a script called ScrollTo, which is used here to link definitions of a JSON code sample to a list of definitions for that particular term. The scenario here is that the JSON blocks are really long, with extensive nesting and subnesting, which makes it difficult for tables below the JSON to adequately explain the term in a usable way."
|
||||
permalink: mydoc_scroll.html
|
||||
sidebar: mydoc_sidebar
|
||||
folder: mydoc
|
||||
---
|
||||
|
||||
{% if site.output == "pdf" %}
|
||||
{{site.data.alerts.note}} The content on this page doesn't display well on PDF, but I included it anyway so you could see the problems this layout poses if you're including it in PDF. {{site.data.alerts.end}}
|
||||
{% endif %}
|
||||
|
||||
{% if site.output == "web" %}
|
||||
<script src="js/jquery.scrollTo.min.js"></script>
|
||||
<!-- local scroll must come after scrollTo, because localScroll is based on scrollTo, which is based on jQuery -->
|
||||
<script src="js/jquery.localScroll.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
$( document ).ready(function() {
|
||||
$('#small-box-links').localScroll({
|
||||
target:'#definition-box-container',
|
||||
showSpeed: 1000,
|
||||
hash: true,
|
||||
easing: 'swing',
|
||||
onAfter:function(){
|
||||
$("#definition-box-container div a").addClass("active");
|
||||
$("#definition-box-container div a").removeClass("active");
|
||||
$("#definition-box-container div").removeClass("active");
|
||||
$(window.location.hash).addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- documentation for localScroll function: http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html -->
|
||||
<style type="text/css">
|
||||
|
||||
#definition-box-container {
|
||||
border: 0px solid #dedede;
|
||||
border-radius: 4px;
|
||||
max-height: 500px;
|
||||
overflow: scroll;
|
||||
padding-left:5px;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
#json-box-container {
|
||||
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 4px;
|
||||
max-height:500px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#small-box-links {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#definition-box-container .active {
|
||||
background-color: #FFFBCC;
|
||||
}
|
||||
|
||||
div#definition-box-container div {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (min-height: 700px) {
|
||||
#json-box-container {
|
||||
max-height:500px;
|
||||
}
|
||||
#definition-box-container {
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 800px) {
|
||||
#json-box-container {
|
||||
max-height:600px;
|
||||
}
|
||||
#definition-box-container {
|
||||
max-height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 900px) {
|
||||
#json-box-container {
|
||||
max-height:700px;
|
||||
}
|
||||
#definition-box-container {
|
||||
max-height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 1000px) {
|
||||
#json-box-container {
|
||||
max-height:800px;
|
||||
}
|
||||
#definition-box-container {
|
||||
max-height: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 1100px) {
|
||||
#json-box-container {
|
||||
max-height:900px;
|
||||
}
|
||||
#definition-box-container {
|
||||
max-height: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div id="small-box-links">
|
||||
|
||||
<div class="col-md-6">
|
||||
<div id="json-box-container">
|
||||
<pre>
|
||||
{
|
||||
<a href="#apples">"apples"</a>: "red fruit at the store",
|
||||
<a href="#bananas">"bananas"</a>: "yellow bananas in a bunch",
|
||||
<a href="#carrots">"carrots"</a>: "orange vegetables that grow in the ground",
|
||||
<a href="#dingbats">"dingbats"</a>: "a type of character symbol on a computer",
|
||||
<a href="#eggs">"eggs"</a>: "chickens lay them, and people eat them",
|
||||
<a href="#falafel">"falafel"</a>: "a Mediterranean sandwich consisting of lots of different stuff i don't know much about",
|
||||
<a href="#giraffe">"giraffe"</a>: "tall animal, has purple tongue",
|
||||
<a href="#hippo">"hippo"</a>: "surprisingly dangerous amphibian",
|
||||
<a href="#igloo">"igloo"</a>: "an ice shelter made by eskimos",
|
||||
<a href="#jeep">"jeep</a>: "the only car that starts with a j",
|
||||
<a href="#kilt">"kilt"</a>: "something worn by scottish people, not a dress",
|
||||
<a href="#lamp">"lamp"</a>: "you use it to read by your bedside at night"
|
||||
<a href="#manifold">"manifold"</a>: "an intake mechanism on a car, like a valve, i think",
|
||||
<a href="#octopus">"octopus"</a>: "eight tentacles, shoots ink, lives in dark caves, very mysterious",
|
||||
<a href="#paranoia">"paranoia"</a>: "the constant feeling that others are out to get you, conspiring against your success",
|
||||
<a href="#qui">"qui"</a>: "a life force that runs through your body",
|
||||
<a href="#radical">"radical"</a>: "someone who opposes the status quo in major ways",
|
||||
<a href="#silly">"silly"</a>: "how I feel writing this dummy copy",
|
||||
<a href="#taffy">"taffy"</a>: "the sweets children like the most and dentists hate the worst",
|
||||
<a href="#umbrella">"umbrella"</a>: "an invention that has not had any advancements in 200 years",
|
||||
<a href="#vampire">"vampire"</a>: "a paranormal figure that is surprisingly in vogue despite its basic nature",
|
||||
<a href="#washington">"washington"</a>: "the place where tom was born",
|
||||
<a href="#xylophone">"xylophone"</a>: "some kind of pinging instrument used to sound chime-like notes",
|
||||
<a href="#yahoo">"yahoo"</a>: "an expression of exuberance, said under breath when something works right",
|
||||
<a href="#zeta">"zeta"</a>: "the way british people pronounce z",
|
||||
<a href="#alpha">"alpha"</a>: "the original letter of the alphabet, which has since come to mean the first. however, i think the original symbol of alpha is actually an ox. it is somewhat of a mystery to linquists as to the exact origin of the letter alpha, but it basically represents the dawn of the alphabet, which proved to be a huge step forward for human thought and expression.",
|
||||
<a href="#beta">"beta"</a>: "the period of time when something is finished but undergoing testing by a group of people.",
|
||||
<a href="#cappa">"cappa"</a>: "how italians refer to their baseball caps",
|
||||
<a href="#dunno">"dunno"</a>: "informal expression for 'don't know'"
|
||||
}
|
||||
|
||||
</pre>
|
||||
|
||||
</div><!-- end json-box-container-->
|
||||
</div> <!-- end col-md-6-->
|
||||
|
||||
<div class="col-md-3">
|
||||
|
||||
<div id="definition-box-container">
|
||||
|
||||
|
||||
<div id="apples"><h5>apples</h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer magna massa, euismod sed rutrum at, ullamcorper quis tellus. Vestibulum erat purus, aliquet sit amet pellentesque eget, tempus at ante. Nulla justo nisi, elementum nec nisi eget, consectetur varius tortor. </div>
|
||||
|
||||
<div id="bananas"><h5>bananas</h5>Curabitur quis nibh sed eros viverra tempus et quis lorem. Nulla convallis sit amet risus vitae rutrum. Nulla at faucibus lectus. Pellentesque tortor nisl, interdum ac quam non, egestas congue massa. Vestibulum non porttitor lacus. Nam tincidunt arcu lectus. Donec eget ornare neque, hendrerit ornare lectus. In ac pretium odio.</div>
|
||||
|
||||
<div id="carrots"><h5>carrots</h5>Vivamus pulvinar vestibulum pharetra. Vivamus vitae diam iaculis, posuere mi sed, dignissim massa. Nunc vitae aliquet urna. Proin sed pulvinar ex. Maecenas nisl lorem, rutrum sit amet hendrerit sed, posuere at odio. Sed consectetur semper tristique. Vivamus finibus varius felis at convallis. Fusce in dictum nunc.</div>
|
||||
|
||||
<div id="dingbats"><h5>dingbats</h5>Curabitur feugiat lorem eget elit ullamcorper tincidunt. In euismod diam aliquet tortor fermentum tempor. Fusce quam felis, commodo viverra orci vitae, scelerisque aliquet risus. </div>
|
||||
|
||||
<div id="eggs"><h5>eggs</h5>Duis est nunc, fringilla eu ligula et, varius dignissim dui. Vivamus in tellus vitae ipsum vehicula fermentum at congue tellus. Suspendisse fermentum, magna vitae aliquet sodales, tellus nisi rutrum arcu, vitae auctor dolor quam ac tellus. Cras posuere augue erat, in sagittis quam lacinia id.</div>
|
||||
|
||||
<div id="falafel"><h5>falafel</h5>Praesent auctor a enim non lacinia. Integer sodales aliquet mi vel dapibus. Donec consequat justo eget nisi lacinia, eu sodales ligula molestie. Sed sapien nulla, rhoncus at elementum a, </div>
|
||||
|
||||
<div id="giraffe"><h5>giraffe</h5>Nullam venenatis at lectus sed pharetra. Sed hendrerit ligula lectus, non pellentesque diam faucibus sit amet. Aliquam dictum hendrerit pellentesque. Cras eu nisl sagittis, faucibus velit sit amet, sagittis odio. Donec vulputate ex vitae purus</div>
|
||||
|
||||
<div id="hippo"><h5>hippo</h5>Cras nec pretium nulla. Suspendisse tempus tortor vel venenatis pulvinar. Integer varius tempor enim fringilla tincidunt. Phasellus magna turpis, auctor vitae elit eget, fringilla pellentesque est. Phasellus ut porta risus. Curabitur iaculis sapien sed venenatis auctor. Integer eu orci at lectus eleifend auctor id rutrum urna.</div>
|
||||
|
||||
<div id="igloo"><h5>igloo</h5>Suspendisse tempus tortor vel venenatis pulvinar. Integer varius tempor enim fringilla tincidunt. Phasellus magna turpis, auctor vitae elit eget, fringilla pellentesque est. Phasellus ut porta risus. </div>
|
||||
|
||||
<div id="jeep"><h5>jeep</h5>Nulla vitae metus rutrum, condimentum orci nec, maximus est. Aenean sit amet ante nec elit dignissim faucibus eget quis quam. </div>
|
||||
|
||||
<div id="kilt"><h5>kilt</h5>Morbi maximus, erat vel rhoncus sagittis, dolor purus dignissim ante, sit amet pharetra ex justo vitae ipsum. Nulla consequat interdum neque</div>
|
||||
|
||||
<div id="lamp"><h5>lamp</h5>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquam dapibus blandit. Donec porta, enim hendrerit venenatis vulputate, orci diam lacinia nibh, faucibus rutrum dolor dui ut quam.</div>
|
||||
|
||||
<div id="manifold"><h5>manifold</h5>Donec finibus massa vel nisi ullamcorper, vitae ornare enim euismod. Aliquam auctor quam erat. Duis interdum rutrum orci, ac interdum urna pharetra eget.</div>
|
||||
|
||||
<div id="octopus"><h5>octopus</h5>Nulla id egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Curabitur eu lobortis ligula.</div>
|
||||
|
||||
<div id="paranoia"><h5>paranoia</h5>Aenean hendrerit mauris ipsum, non laoreet ipsum luctus vel. Curabitur tristique auctor elit ut pulvinar. Quisque arcu arcu, condimentum aliquam sodales nec, dignissim nec justo. Nunc tristique sem felis, pharetra euismod lorem volutpat sed. Ut porttitor metus sit amet elit rhoncus semper.</div>
|
||||
|
||||
<div id="qui"><h5>qui</h5>Quisque rhoncus cursus felis vel elementum. Vestibulum dignissim molestie tortor nec facilisis. Praesent a nibh condimentum, porta nulla egestas, auctor eros</div>
|
||||
|
||||
<div id="radical"><h5>radical</h5>Etiam hendrerit interdum tellus, at aliquet sapien egestas in. Aenean eu urna nisl. Cras vitae risus pharetra, elementum mauris nec, auctor lectus. Fusce pellentesque venenatis dictum. Proin at augue at mauris finibus semper ultricies sed eros.</div>
|
||||
|
||||
<div id="silly"><h5>silly</h5>Praesent pulvinar consequat posuere. Morbi egestas rhoncus felis, id fermentum metus lobortis in. Vestibulum nibh orci, euismod eget vestibulum nec, vehicula vitae tortor. Aenean ullamcorper enim nunc, eu auctor ligula auctor eget.</div>
|
||||
|
||||
<div id="taffy"><h5>taffy</h5>Etiam et arcu vel lacus aliquet lobortis in in massa. Nunc non mollis elit. Aenean accumsan orci quis risus aliquam, non gravida nulla molestie. Mauris pharetra libero et magna aliquam aliquam. Integer quis luctus dolor. </div>
|
||||
|
||||
<div id="umbrella"><h5>umbrella</h5>Fusce molestie finibus malesuada. Nullam ac egestas quam, id venenatis ligula. Pellentesque pulvinar elit et vestibulum fringilla. Cras volutpat sed quam ornare scelerisque. Vivamus volutpat ante pretium scelerisque tempus. Etiam venenatis tempor nisl dignissim sollicitudin. Curabitur ac risus vitae dolor pretium posuere vel vitae diam. Donec in odio arcu.</div>
|
||||
|
||||
<div id="vampire"><h5>vampire</h5>Vestibulum pretium condimentum commodo. Integer placerat leo non ipsum ultrices, ac convallis elit varius. Vestibulum ultricies, justo eu rutrum molestie, quam arcu euismod sapien, vel gravida ipsum nulla eget erat. </div>
|
||||
|
||||
<div id="washington"><h5>washington</h5>Nunc ac quam eu risus dictum sodales. Nam ac risus iaculis, aliquet sem eu, mollis mauris. Curabitur pretium facilisis orci ut lacinia. Sed fermentum leo a odio blandit rutrum. Phasellus at nibh vel odio interdum vulputate ac eget urna. Nam eu arcu dapibus, sodales ligula nec, volutpat ipsum. Suspendisse auctor tellus vitae libero euismod venenatis. </div>
|
||||
|
||||
<div id="xylophone"><h5>xylophone</h5>Sed molestie lobortis ante sit amet hendrerit. Sed pharetra nisi sed interdum pulvinar. Nunc efficitur erat non aliquam mattis. Sed id nisl mattis lacus vehicula volutpat vitae vel massa. Curabitur interdum velit odio, vitae sollicitudin nunc rutrum non. </div>
|
||||
|
||||
<div id="yahoo"><h5>yahoo</h5>Nunc commodo consectetur scelerisque. Proin fermentum ligula ac quam finibus tincidunt. Aenean venenatis nisi et semper semper. Nunc sodales velit ipsum, ac pellentesque augue placerat eu.</div>
|
||||
|
||||
<div id="zeta"><h5>zeta</h5>Nullam ac suscipit odio. Curabitur viverra arcu ut egestas sollicitudin. Fusce sodales varius lectus ut tristique. Etiam eget nunc ornare, aliquet tortor eget, consequat mauris. Integer sit amet fermentum augue. </div>
|
||||
|
||||
<div id="alpha"><h5>alpha</h5>Praesent nec neque ac tellus sodales eleifend nec vel ipsum. Cras et semper risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer mattis leo nisl, a tincidunt lectus tristique eget. Donec finibus lobortis viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus egestas pulvinar odio non vehicula. Morbi malesuada leo eget nisl sagittis aliquet.</div>
|
||||
|
||||
|
||||
<div id="beta"><h5>beta</h5>Mauris a libero vel enim pharetra interdum non a quam. Sed tincidunt ut elit sed dignissim. Suspendisse vitae tellus dapibus, fermentum lacus ac, fermentum lacus. Nam ante odio, fringilla ac elementum a, mollis sed tellus.</div>
|
||||
|
||||
<div id="cappa"><h5>cappa</h5>Nam molestie semper nulla et molestie. Ut facilisis, ipsum sed convallis posuere, mi mauris bibendum erat, nec egestas ipsum est nec dolor. </div>
|
||||
|
||||
<div id="dunno"><h5>dunno</h5>Etiam et metus congue, commodo libero et, accumsan sem. Aliquam erat volutpat. Quisque tincidunt, tortor non blandit ullamcorper, orci mauris dignissim augue, eget vehicula nulla justo sed dolor. Nunc ac urna quis nisi maximus pharetra in a mauris. Proin metus mi, venenatis vitae tristique sed, fermentum at purus. Aliquam erat volutpat. Maecenas efficitur sodales nibh, ac hendrerit felis facilisis et. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
|
||||
|
||||
|
||||
</div> <!-- end definition-box-container -->
|
||||
</div> <!-- end col-md-3-->
|
||||
</div> <!-- end small-box-links -->
|
||||
</div> <!-- end row -->
|
||||
</div> <!-- end container -->
|
||||
|
||||
|
||||
{{site.data.alerts.note}} This was mostly an experiment to see if there was a better way to document a long JSON code example. I haven't actually used this approach in my own documentation.{{site.data.alerts.end}}
|
||||
|
||||
{% endif %}
|
||||
|
||||
@ -10,7 +10,7 @@ folder: mydoc
|
||||
---
|
||||
|
||||
|
||||
{% include note.html content="By \"layout,\" I'm not referring to the layouts in \_layouts in the project files. I'm referring to special ways of presenting information on the same \"page\" layout." %}
|
||||
{% include note.html content="By \"layout,\" I'm not referring to the layouts in \_layouts in the project files. I'm referring to special ways of presenting information on the same \"page\" layout." %}
|
||||
|
||||
## FAQ layout
|
||||
|
||||
@ -20,10 +20,6 @@ See {{site.data.mydoc_urls.mydoc_faq.link}} for an example of the FAQ format, wh
|
||||
|
||||
See {{site.data.mydoc_urls.mydoc_kb_layout.link}} for a possible layout for knowledge base articles. This layout looks for pages containing specific tags.
|
||||
|
||||
## Scroll layout
|
||||
|
||||
If you have a long JSON message you're documenting, see the {{site.data.mydoc_urls.mydoc_scroll.link}}. This layout adds a side pane showing links to pointers in the left pane.
|
||||
|
||||
## Shuffle layout
|
||||
|
||||
If you want a dynamic card layout that allows you to filter the cards, see {{site.data.mydoc_urls.mydoc_shuffle.link}}. This uses the Shuffle JS library.
|
||||
|
||||
@ -81,7 +81,7 @@ If you need a more sophisticated table syntax, use HTML syntax for the table. Al
|
||||
</tr>
|
||||
<tr>
|
||||
<td markdown="span">Second column **fields**</td>
|
||||
<td markdown="span">Some more descriptive text.
|
||||
<td markdown="span">Some more descriptive text.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -60,7 +60,11 @@ Check the prince-list.txt file in the output to see if it contains links. If not
|
||||
|
||||
If you build your site but the sidebar doesn't appear, check the following:
|
||||
|
||||
Look in \_includes/custom/sidebarconfigs.html and make sure the conditional values there match up with values you're using in each page's frontmatter.
|
||||
Look in your PDF config file and make sure you have a sidebar property, such as this:
|
||||
|
||||
```
|
||||
pdf_sidebar: product2_sidebar
|
||||
```
|
||||
|
||||
Make sure each TOC item has an output property that specifies web or pdf.
|
||||
|
||||
|
||||
@ -15,4 +15,6 @@ defaults:
|
||||
values:
|
||||
layout: "page_print"
|
||||
comments: true
|
||||
search: true
|
||||
search: true
|
||||
|
||||
pdf_sidebar: mydoc_sidebar
|
||||
|
||||
@ -15,4 +15,6 @@ defaults:
|
||||
values:
|
||||
layout: "page_print"
|
||||
comments: true
|
||||
search: true
|
||||
search: true
|
||||
|
||||
pdf_sidebar: product1_sidebar
|
||||
|
||||
@ -15,4 +15,6 @@ defaults:
|
||||
values:
|
||||
layout: "page_print"
|
||||
comments: true
|
||||
search: true
|
||||
search: true
|
||||
|
||||
pdf_sidebar: product2_sidebar
|
||||
|
||||
@ -3,7 +3,7 @@ layout: none
|
||||
search: exclude
|
||||
---
|
||||
|
||||
{% include custom/sidebarconfigs.html %}
|
||||
{% assign sidebar = site.pdf_sidebar %}
|
||||
|
||||
{% for entry in sidebar_pdf %}
|
||||
{% for folder in entry.folders %}
|
||||
@ -24,4 +24,4 @@ search: exclude
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
@ -8,7 +8,7 @@ permalink: /tocpage/
|
||||
<div id="navig">
|
||||
<h1>Table of Contents</h1>
|
||||
|
||||
{% include custom/sidebarconfigs.html %}
|
||||
{% assign sidebar = site.pdf_sidebar %}
|
||||
|
||||
<ul id="mysidebar" class="nav">
|
||||
{% for entry in sidebar_pdf %}
|
||||
|
||||
Reference in New Issue
Block a user