123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- ---
- 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}}
|