I am trying to do something fairly unique in Jekyll. I want to render some URLs by a direct path but then add a rule that allows the potential for more pages to also render the navmenu.
The best example looks like the following:
title: Page1
url: /page/
hidden: true
children:
- title: Title 1
url: /title/test/1/
key: t1
- title: Title 2
url: /title/test/2/
key: t2
- title: Remaining pages not defined hear(rendered dynamically)
url: /title/test/{can be anything}/
key: remaining
Ideally, when I go to the link site/title/test/3, it can have the navmenu on it as well.
Is there any way that Jekyll can open an URL that is not hard defined within the .yaml file?
Related
Let the following nav be:
nav:
- Home: 'index.md'
- Operations:
- Training: 'operations/Training.md'
- Instructions: 'operations/Instructions.md'
I would like to have a page be associated with the sub-section Operations, meaning that clicking on the Operations node in the menu opens it and load the page.
Is it possible ?
I'm working on a single RMD file with 'output: bookdown::html_document2'. I noticed that when cross-referencing to figures in tabbed sections (e.g. # Header {.tabset}), clicking on the link works nicely for content in the first tab but not for any of the following tabs. I mean, clicking on the number linking to the figure in the second tab does not open/activate the second tab.
Among the tons of questions regarding cross-referencing, I was not able to find any dealing with the same problem. I'm afraid that it might just not be possible to 'activate' a tab by clicking on a cross-reference, but I do hope to find some workaround. I'm happy about any hints.
Here's a minimal example:
---
title: "Untitled"
date: "17 2 2021"
output:
bookdown::html_document2:
number_sections: FALSE
---
# First section {.tabset}
## Subsection 1
```{r plot1, fig.cap="A first figure"}
plot(cars)
```
## Subsection 2
```{r plot2, fig.cap="A second figure"}
plot(cars)
```
# Second section
Here I want to cross-reference Figures \#ref(fig:plot1) and \#ref(fig:plot2)
```
If we take a look at the final html created, the "figure number link" is a normal html anchor tag linking to the image itself, so clicking on it the page will be scrolled to the figure position, without activating the containing tab.
As suggested by #cderv I would add some js code in order to achieve your desired result.
First of all I would work on naming:
set a naming convention for images contained in tabs (e.g. simply adding a fixed prefix "TBIMG-")
set a naming convention for tabs containing this kind of images (e.g. another custom prefix "TBTAB-" + figure name)
So we'll end up having images with name "TBIMG-name1", "TBIMG-name2", etc.. contained in "TBTAB-name1", "TBTAB-name2", etc.
Now we just need to bind the functionality to the click event of "figure number links" (only the ones having our special prefix).
In their href attribute we'll find the image id.
This one can lead us to the containing tab (using our second custom prefix)
Then we just activate the tab and finally we scroll the page to the tab itself.
Here's the JS code you need to add:
$(document).on("click", 'a[href^="#fig:TBIMG"]', function(event){
//this in order to prevent the page to scroll to the image itself
event.preventDefault();
//from the img name we build the tab name
var tabKey = 'TBTAB' + $(this).attr('href').replace('#fig:TBIMG', '');
//set the tab active
var tabPlc = $('.nav[role="tablist"] a[href="#' + tabKey + '"]')
tabPlc.tab('show');
//the page scrolls to the tab containing the image
$("html, body").animate({ scrollTop: tabPlc.offset().top }, 700);
});
Maybe this could help you:
---
title: "Untitled"
date: "17 2 2021"
output:
bookdown::html_document2:
number_sections: FALSE
---
# First section {.tabset}
## Subsection 1
```{r plot1, fig.cap="A first figure"}
plot(cars)
```
## Subsection 2
```{r plot2, fig.cap="A second figure"}
plot(cars)
```
# Second section
Here I want to cross-reference Figures [1](#subsection-1) and [2](#subsection-2)
The links are good, but not working on Firefox neither Chromium. I dot not know why it does not refresh the window when we click on the link.
Here is the Html code that works to activate the tab (Subsection 2) (I do know how to implement it here, sorry):
<a role="tab" data-toggle="tab" href="#subsection-2" aria-controls="subsection-2" aria-expanded="true">Subsection 2</a>
I'm using Jekyll to build a portfolio showcasing my design work. I'm getting confused on whether I should use a 'data' file (yml) and loop through content on my templates or use 'collections'.
My content is structured like this:
Homepage:
Featured Item
Client Hero 1
Client Hero 2
Client Hero 3
Client Hero 4
Client Hero 5
All of these link to their respective 'Client' page where i'll have images as jpgs in the same format for all case studies.
I'm confused on how to best use data, collections, etc to build out my site while keeping updating as efficient as possible.
My current solution uses _data/projects.yml where i have defined for 5 clients:
category: Pitch
description: "Lorem Ipsum Dolar Erat"
title: "Client John Smith"
shortname: "john-smith"
publish: false
featured: true
All of this is looped through and featured on the homepage. Now, I can create each post myself and add content manually but i believe there is a better way. How can I use collections and/or multiple individual project data files to best address this?
My idea situation would be defining content in yml or data files for each individual client and having 10 images, numbered 1 to 10 automatically brought in from /client name/ into a client layout.
collection are beta, so, not production ready. Just don't use them as they can break without notice.
data are not creating pages, an if you want to refer to data file from a page/post, you have to loop over to get a match between site.data.client and page.client or post.client. This is an option but you will have datas in page/post and in data files. all over the place.
creating a page/post with front-matter custom vars ensure that you get all datas in same place. And you can easily loop over page/post variables to get things done.
I prefer #3 and in any client/clientName.html I personally do :
---
category: Pitch
description: "Lorem Ipsum Dolar Erat"
title: "Client John Smith"
shortname: "john-smith"
publish: false
featured: true
img:
- img-02.jpg
- img-03.jpg
---
{% include _client.html %}
That's it : all in the same place.
And on the home page you can loop with :
{% for page in site.pages %}
{% if page.category == 'Pitch' and page.featured = 'true' %}
And also loop over page/post.img
The idea is to get all in the same place. But it's really up to you.
Happy Jekyll !
I have a page with Superslides. It's a jQuery slider that fills the entire background of the page.
I have a problem. Every time the image updates, the URL in the address bar changes. (When the first image shows, the URL changes to http://…/index.html#1 ... the URL then changes for the next image: http://…/index.html#2 )
How can I stop the URL in the address bar from changing?
I'm completely stumped on this one. Any ideas?
Assuming you are talking about this plugin.
You must use the option hashchange: false, which is its default value.
If you are initializing it like this:
$('#slides').superslides({
slide_easing: 'easeInOutCubic',
slide_speed: 800,
pagination: true,
hashchange: true, // <-- Remove this line
scrollable: true
});
you must remove hashchange: true.
You can see the full list of options and what they do in plugin's github page.
In pelican, by default, blog articles are listed on the index.html file.
What I want instead is that I use a static page as my home page and put all the blog articles on a dedicated "Blog" page.
How can I get this done?
While there are several possible methods for achieving your desired goals, I would start with the following changes to your settings file:
SITEURL = '/blog'
OUTPUT_PATH = 'output/blog'
PAGE_URL = '../{slug}.html'
PAGE_SAVE_AS = '../{slug}.html'
DISPLAY_PAGES_ON_MENU = False
DISPLAY_CATEGORIES_ON_MENU = False
MENUITEMS = [('Home', '/'), ('Blog', '/blog/')]
Put your blog posts in content/ as usual, and then create your home page with the following headers and save as content/pages/home.md:
Title: Home
URL: ../
Save_as: ../index.html
This is the home page.
Caveats:
Dynamic navigation menu generation has been effectively turned off since it doesn't work well with this configuration. Highlighting for the currently-active menu item — a feature you normally get out-of-the-box — will not be present in this configuration and, if desired, must be implemented separately in your theme.
If your theme's base.html template has a link to your site home that depends on SITEURL (e.g., as the notmyidea theme does), you will need to change the link to point to <a href="/"> instead.
Set the following in the pelicanconf
DIRECT_TEMPLATES = ['blog']
PAGINATED_DIRECT_TEMPLATES = ['blog']
1st line will set blog.html for the articles
2nd line will allow pagination of blog.html file
For the index page, create a pages folder in the content directory and create the .md file there and set save_as:index.html this will save the md file as index.html
This is covered in the Pelican FAQ
- "How can I override the generated URL of a specific page or article?"
Basically, in your contents folder, create two subfolders:
/contents/blogs, which will store all your blog entries
/content/pages, which will store your other static pages (including your home page)
In the pages subfolder, create a file (e.g. home.rst) with the option :save_as: index.html, which will make this file your home page. E.g.:
Home
####
:date: 2015-05-22 12:30
:url:
:save_as: index.html
This is my home page
In your pelicanconf.py file, specify the following options:
DISPLAY_PAGES_ON_MENU = False
DISPLAY_CATEGORIES_ON_MENU = True
USE_FOLDER_AS_CATEGORY = True
PATH = 'content'
ARTICLE_PATHS = ['articles',]
PAGE_PATHS = ['pages',]
MENUITEMS = ()
You should now have a home page and a contents bar with a Blogs menu.
If you want to add more menus to the contents bar (for example an About or CV menu), create the corresponding files in your pages folder, and add them to MENUITEMS:
MENUITEMS = (
('About', '/pages/about.html'),
('CV', '/pages/cv.html'),
)
I have an answer similar to the one Justin Mayer gave, except in mine I change blog article urls instead of page urls.
I've been getting the following error when trying to use the answer above, so it might be useful to other people having the same issue
ERROR: Skipping volunteering.rst: file '../volunteering.html' would be written outside output path
ERROR: Skipping presentations.rst: file '../presentations.html' would be written outside output path
Make all article urls to be under 'blog/' url
ARTICLE_URL = "blog/{date:%Y}-{date:%m}-{date:%d}-{slug}.html"
ARTICLE_SAVE_AS = "blog/{date:%Y}-{date:%m}-{date:%d}-{slug}.html"
Put blog index under 'blog/' url
INDEX_SAVE_AS = "blog/index.html"
Add a explicit menu item for blog index
MENUITEMS = [
('home', '/'),
('blog', '/blog'),
]
As your page is now an index page, automatically displaying link to that page in the menu will lead to a broken link, so you will have to set the following option and specify the following flag
DISPLAY_PAGES_ON_MENU = False
For the new index page, add a directive save_as, like Justin Mayer pointed it out. Here how it looks in rst
About
=====
:slug: about
:category: About
:save_as: index.html
This should give you a home page and an index page for articles.
When you want to add more static pages, you will also need to add them in menu items that still contains '/pages' prefix in the url if you want links to the pages appear in a menu. i.e for the volunteering.rst with the following content,
Volunteering
============
:slug: about
:category: About
Your MENUITEMS variable will look like the following
MENUITEMS = [
('home', '/'),
('blog', '/blog'),
('volunteering', '/pages/volunteering'),
]
I tested this answer on pelican 4.2.0.
You can use the following settings to put the index file for example at /blog/index.html.
INDEX_SAVE_AS = 'blog/index.html'
INDEX_URL = 'blog/'
Then you created a home.md page and use "save_as: index.html" directive for the actual home page.