168 lines
6.5 KiB
HTML
168 lines
6.5 KiB
HTML
|
---
|
||
|
|
title: Shuffle layout
|
||
|
|
tags: [special_layouts]
|
||
|
|
last_updated: November 30, 2015
|
||
|
|
keywords: shuffle, card layout, dynamic grid, doc portal, support portal
|
||
|
|
summary: "This layout shows an example of a knowledge-base style navigation system, where there is no hierarchy, just groups of pages that have certain tags."
|
||
|
|
permalink: mydoc_shuffle.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 %}
|
||
|
|
|
||
|
|
{% unless site.output == "pdf" %}
|
||
|
|
<script src="js/jquery.shuffle.min.js"></script>
|
||
|
|
<script src="js/jquery.ba-throttle-debounce.min.js"></script>
|
||
|
|
{% endunless %}
|
||
|
|
|
||
|
|
<div class="filter-options">
|
||
|
|
<button class="btn btn-primary" data-group="all">All</button>
|
||
|
|
<button class="btn btn-primary" data-group="getting_started">Getting Started</button>
|
||
|
|
<button class="btn btn-primary" data-group="formatting">Formatting</button>
|
||
|
|
<button class="btn btn-primary" data-group="publishing">Publishing</button>
|
||
|
|
<button class="btn btn-primary" data-group="content-types">Content types</button>
|
||
|
|
<button class="btn btn-primary" data-group="single_sourcing">Single Sourcing</button>
|
||
|
|
<button class="btn btn-primary" data-group="special_layouts">Special Layouts</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="grid" class="row">
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["getting_started"]'>
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">Getting started</div>
|
||
|
|
<div class="panel-body">
|
||
|
|
If you're getting started with Jekyll, see the links in this section. It will take you from the beginning level to comfortable.
|
||
|
|
<ul>
|
||
|
|
{% for page in site.pages %}
|
||
|
|
{% for tag in page.tags %}
|
||
|
|
{% if tag == "getting_started" %}
|
||
|
|
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["content-types"]'>
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">Content types</div>
|
||
|
|
<div class="panel-body">
|
||
|
|
This section lists different content types and how to work with them.
|
||
|
|
<ul>
|
||
|
|
{% for page in site.pages %}
|
||
|
|
{% for tag in page.tags %}
|
||
|
|
{% if tag == "content-types" %}
|
||
|
|
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["formatting"]'>
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">Formatting</div>
|
||
|
|
<div class="panel-body">
|
||
|
|
These topics get into formatting syntax, such as images and tables, that you'll use on each of your pages:
|
||
|
|
<ul>
|
||
|
|
{% for page in site.pages %}
|
||
|
|
{% for tag in page.tags %}
|
||
|
|
{% if tag == "formatting" %}
|
||
|
|
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["single_sourcing"]'>
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">Single Sourcing</div>
|
||
|
|
<div class="panel-body">These topics cover strategies for single_sourcing. Single sourcing refers to strategies for re-using the same source in different outputs for different audiences or purposes.
|
||
|
|
<ul>
|
||
|
|
{% for page in site.pages %}
|
||
|
|
{% for tag in page.tags %}
|
||
|
|
{% if tag == "single_sourcing" %}
|
||
|
|
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["publishing"]'>
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">Publishing</div>
|
||
|
|
<div class="panel-body">When you're building, publishing, and deploying your Jekyll site, you might find these topics helpful.
|
||
|
|
<ul>
|
||
|
|
{% for page in site.pages %}
|
||
|
|
{% for tag in page.tags %}
|
||
|
|
{% if tag == "publishing" %}
|
||
|
|
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='["special_layouts"]'>
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
<div class="panel-heading">Special Layouts</div>
|
||
|
|
<div class="panel-body">
|
||
|
|
These pages highlight special layouts outside of the conventional page and TOC hierarchy.
|
||
|
|
<ul>
|
||
|
|
{% for page in site.pages %}
|
||
|
|
{% for tag in page.tags %}
|
||
|
|
{% if tag == "special_layouts" %}
|
||
|
|
<li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- sizer -->
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-1 shuffle_sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
</div><!-- /#grid -->
|
||
|
|
|
||
|
|
{% unless site.output == "pdf" %}
|
||
|
|
{% include initialize_shuffle.html %}
|
||
|
|
{% endunless %}
|
||
|
|
|
||
|
|
{{site.data.alerts.note}} This was mostly an experiment to see if I could break away from the hierarchical TOC and provide a different way of arranging the content. However, this layout is somewhat problematic because it doesn't allow you to browse other navigation options on the side while viewing a topic.{{site.data.alerts.end}}
|
||
|
|
|