I am interested in using different layouts for different slides within my index.Rmd file. after copying the template provided here and below, I created a .html file in my assets/layouts folder.
<slide class="{{ class }}" id="{{ id }}">
<hgroup>
{{{ header }}}
</hgroup>
<article>
<hr noshade size=4 color='red'>
{{{ content }}}
<div class='left' style='float:left;width:48%'>
{{{ left }}}
</div>
<div class='right' style='float:right;width:48%'>
{{{ right }}}
</div>
</article>
</slide>
having got this far, it remains unclear:
1) why the slides in my deck are blank and not displaying any of the below:
---
#testing
hello
*** left
- point a
- point b
- point c
*** right
- point a
- point b
- point c
2) how to "call" the custom layout from my assets folder for an individual slide and not the whole deck
You can specify a layout for a slide as metadata. For example, if you saved the layout you describe in the question as twocol.html in assets/layouts, then you can specify the layout in the slide level metadata. A & specifies a layout, while a . specifies a class and a # specifies an id. You are also free to define your own custom metadata as key:value pairs.
--- &twocol
## Two Columns
*** left
- point a
- point b
- point c
*** right
- point a
- point b
- point c
Related
Hello I need to add some SEO text to one of my Webpage Menu Category.
The problem is that the ''Category'' is not a real category it is and URL Meny Type used for ''offers'' (All the products which includes a discount).
On these page I have no text nor info banner. Just products with discounts.
is there any way I could add at least a box so I can type a well structures SEO text?
Looking forward for you answwer
One way of crudely doing it, (if the page uses the category.tpl file) would be, open the category.tpl file within your theme directory, add a little smarty if statement to check the current category id? or category name, if it matches the desired page, your on.... then show a div with the required SEO text content, obviously not ideal & not dynamic!.. add style code to your css/global.css or css/category.css
to check if the page is using the category files: check the source code body tag!..
ie: body id="category" class="category category-227"
{if $category->id==YOURCATEGORY || $category->name==YOURCATEGORYNAME}
<div id="seoContent">
<p>SEO content!</p>
</div>
{else}
<!-- not required page -->
{/if}
I am working on an Angular project and stuck on this bug for a very long time. Not able to find anything on the web and couldn't find any solution to it by myself.
Description :
I have an HTML document both with different UI as One is feed and One is Login/Signup. I have arranged this template in my app.component.html . Attaching Code below
<app-pageloader></app-pageloader>
<app-header></app-header>
<app-login *ngIf = "router.url == '/login'"></app-login>
<!-- <router-outlet></router-outlet> -->
<div *ngIf="router.url != '/login'" class="view-wrapper">
<!-- Container -->
<div id="main-feed" class="container">
<!-- Content placeholders at page load -->
<!-- this holds the animated content placeholders that show up before content -->
<!-- Feed page main wrapper -->
<div id="activity-feed" class="view-wrap true-dom">
<div class="columns">
<!-- Left side column -->
<div class="column is-3 is-hidden-mobile">
<app-left-sidebar *ngIf="router.url != '/login'"></app-left-sidebar>
</div>
<!-- /Left side column -->
<!-- Middle column -->
<div class="column is-6">
<app-postarea></app-postarea>
<router-outlet></router-outlet>
<app-loadmore></app-loadmore>
</div>
<!-- /Middle column -->
<!-- Right side column -->
<div class="column is-3">
<app-right-sidebar></app-right-sidebar>
</div>
</div>
</div>
</div>
<app-modals></app-modals>
</div>
Now you see my feed template starts from Container and Pageloader and the app header are common in both the interfaces. In my feed template, there are multiple components that only need to load once i.e when we refresh. They are Leftsidebar, Post Area, and Right sidebar and different pages like feed and home are being routed with the help of router outlet.
In the Login Page, there is no need for such things I mentioned above.
Now I want that when I switch to /login. It should only load the login component and No other component should load and when I switch to /feed. All components should load below the container.
I have used the URL approach as of now and will be using accessToken local storage condition to hide and show the component.
This solution is working it is only hiding the component from the main page but it is also loading them in the background making unauthorized API calls.
So now I want that if I switch to /login only the login part should load and if I switch to feed or home or blogs then alongside with router outlet all component should load like sidebars and postarea.So that it only make calls when component is called.
If you have ever come across this problem and solved the problem. Help me too. Thank you.
Assuming the idea is that only logged in users ever get to see anything, you should probably target the *ngIf to display only with authenticaed Users like:
*ngIf="isAuthenticated()" or *ngIf="user && user.id"
or something along those lines. In fact, it's best to use a Route Guard to immediately reroute any non-authenticated users to your login.
Aside from all that, your component is getting activated even before the router.url is a thing. You might try:
*ngIf="router.url && router.url!= "" && router.url != '/login'"
I'm trying to build a basic documentation site using asciidoctor. One thing I am struggling with is how I can inject a standard site header (a banner with a logo and top-level navigation) into each documentation page.
I render my asciidoc directly to html from the command line. I have tried to find a way to somehow inject an extra div element and position it fixed at the top, but I can't figure out what mechanism to use for this. My early attempts involved using docinfo.html but that gets injected into the html in the <head> element, instead of the <body>.
I am aware that full-on publication systems like Jekyll allow me to configure "front matter" that can probably take care of this, but I was hoping there was a mechanism or trick using vanilla asciidoctor that can achieve this.
Ted Bergeron on the Mailing List mentioned a simple project:
Demo website created just using Asciidoctor.
Check the corresponding repo to see the files and how to create the site (just using one command).
In summary: simply create a header asciidoc file that includes your site nav (in the demo site this is done using table markup), without including a level-0 (document) title. Include this header file right at the top in every page of your site. Then render by just running asciidoctor *.txt on your project.
--embedded option + simple post processing
With this option, asciidoctor generates only the interior part of the <body> element.
For example:
main.adoc
= Super title
== Second level
asdf
== Also second level
qwer
then:
asciidoctor --embedded main.adoc
produces:
main.html
<div class="sect1">
<h2 id="_second_level">Second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>asdf</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_also_second_level">Also second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>qwer</p>
</div>
</div>
</div>
You can then just cat a header and closing footer, and you are done.
Tested with Asciidoctor 2.0.10.
I want to introduce hash links to the headings of a page into the menu of a web page. The web page is generated with Jekyll and it's default layout looks as follows:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div id="BigFatContainer">
{{ content }}
{% include footer.html %}
</div>
</body>
</html>
It is in the header that the menu for navigating to the different pages is located. I've been able to add a table of contents to the {{ content }} with the help of the following Kramdown command:
* Point at which the TOC is attached
{:toc}
One could use some ugly JavaScript hack to move this table of contents from the {{ content }} and into header.html but that'd be a bad solution. It's not possible to place the {:toc} macro inside header.html since that's not parsed by Kramdown, and even if you make sure that it's parsed by Kramdown using for example this plugin it outputs the TOC of header.md instead of the TOC for the content.
#miroslav-nedyalkov was on the right track here. Following his suggestion of looking at the Bootstrap documentation, I found that it uses a Ruby Gem - jekyll-toc that allows you to place a TOC anywhere in a layout file. You enable it in the front matter. I'm now successfully using:
<nav aria-label="Table of Contents">
{{ content | toc_only }}
</nav>
<section itemprop="articleBody">
{{ content }}
</section>
I would suggest you to use the approach Bootstrap website (scroll down and observe the right navigation area) is using - make your TOC as part of the content area, but style it to be placed on the side like main navigation. The main reason I'm suggesting you this approach is that you may (and most probably will) have more than one page. In this case you will need to display different page navigation for every page and display some navigation between the pages.
For more information you may refer to this article - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/
Why moving the toc block ?
This is correct to say that this toc is part of the page content. Semantically speaking.
You problem here is not at the document structure level but at the presentational one.
In this case the use of CSS is recommended to solve your problem.
I'm trying to figure out the best way to have a side menu auto generated from the headings of a tutorial. I can either add them to a list in the front matter or have it auto detect them, but I need to write some code that only generates a side menu of appropriate length. Something like this(you can see the side menu in large windows) but I would use the side nav or preferabbly accordion modules present in Foundation 4. I guess it would have to first count the words or phrases i nthe list, then generate a side module in a loop for the required number of times.
Since I'm not too familiar with jekyll and Liquid templating code, I though I would ask here first and find out if anyone can give me a hand. If it's difficult a nudge toward where to start would be much appreciated.
You'd be much better off just hard-coding the side menu and using a layout to include it on each page.
At the start of each file that makes up the tutorial, include a YAML front matter section like this:
---
layout: sidebar
---
Then in your _layouts folder include a layout with the name sidebar.html, which describes the sidebar like this:
<html>
<body>
<div id="sidebar">
<!--Sidebar content goes here-->
</div>
<div id="content">
{{ content }}
</div>
</body>
</html>