I am using the theme gravstrap for Grav CMS.
I want to make a single page website, like in this example :
http://gravstrap.diblas.net/gravstrap-theme-simple-page-example
I looked at the brief blog post explaining how to do it and also at the source code example on the project git repo.
I am having a hard time to undertand what to do exactly because what the blog-post says seems quite different than what I see in the example (especially how to link pages to menu items with the id thing).
I finally got it working :
Create a page with the template page_navbar_interne, create sub-pages as modular, each sub-page will be section.
By default sections will be ordered by the names of the folders. You can hardcode the order by adding this in the Frontmatter (expert mode) :
title: Single page website
published: true
slug: single-page-slug
content:
items: '#self.modular'
order:
by: default
dir: asc
custom:
- _header
- _mySection2
- _myOtherSection
To display the menu to navigate to the sections, you have to use navbar2 instead of navbar1, in the header module.
[g-navbar id="navbar2" name=navbar2 fixed=top centering=none brand_text="…" render=false]
[g-navbar-menu name=menu0 alignment="center" onepage=true attributes="class:highdensity-menu"][/g-navbar-menu]
[g-navbar-menu name=menu1 icon_type="fontawesome" alignment="right" ]
[g-link url="…" icon_type="fontawesome" icon="…"][/g-link]
…
[/g-navbar-menu]
[/g-navbar]
Related
I have recently tried creating a website using the Jekyll GitHub template here. One major alteration I hope to make to this template is to have two "blogs" in the format provided in the Blog tab of that template specifically shown here.
I (sort of) successfully created two blogs in my website and named the associated tabs (Media) and (Blog). I achieved this by reorganizing the file structure to have a "media" folder and a "blog" folder separately that each contain a _posts folder and index.html file. Now, when I add .md files in the _posts folder, these posts seem to get added to the correct tab (Media or Blog).
Even though that functionality works, both the Blog and Media tab lost their aesthetics compared to the style in the original template blog. Namely, 1) the banner image at the top is now gone; 2) the text formatting with the title in one line followed by the date in the "pretty" format (gray colored and in the format 29 Aug 2016) is now in a less-attractive bullet format with date first and in the format Aug 29, 2016; 3) the introductory excerpt text (in the example: "A pot still is a type of still used in distilling spirits such as whisky or brandy. Heat is applied directly to the pot containing the wash (for whisky) or wine (for brandy).") is now gone.
It is unclear to me why my separation of the _posts folder into two separate folders seems to cause these unwanted layout side effects. Since all three of these layout issues changed at once, I am assuming they can all be solved in the same solution. Whether or not that is true, any advice on how to solve these layout issues could be very helpful. Thank you for sharing any ideas!
You've removed the posts collection from your _config.yml which was setting the default feature_image for all posts. Unless you add that back in or include the overrides in each individual post it will not display the header (it may or may not also affect the rest of the styles):
collections:
media:
title: Media # Needed for Siteleaf
output: true
description: "Recent discussions with the media." # The post list page content
feature_text: |
Sharing our motivations and
opinions with the media.
feature_image: "https://picsum.photos/2560/600?image=866"
You're not actually using a media collection in either blog/index.html nor media/index.html, you're using the post.categories for filtering in the end, which will still causes some weird pagination once you start getting things rolling.
You may want to look at using the separate collections and then pre-building your site using paginator v2 (https://github.com/sverrirs/jekyll-paginate-v2/blob/master/README-GENERATOR.md) which will allow for pagination of different collections.
Edit 2020-01-23
Taking a new look at your repository, you still only have one (posts) collection. Therefore the logic for reading feature_* is being shared. If you look at the include site_feature.html you can see how the feature_image is being parsed out of the collections.
{% assign collectiondata = site.collections | where: "label", page.collectionpage | first %}
Which in your case is why Blog and Media both have the second image ?image=213. Your blog.html and media.html still have the front matter collectionpage: post.
I still think you're going down a slippery slope which will result in things not working exactly as you want them once you get more and more posts by doing it this way.
I'm working on a theme for Wyam and I'm wondering if there's a way to set the layout that should be used in the markdown file for a particular page. As far as I have seen so far, it seems that each page created with markdown uses _Layout.cshtml
To be more specific. I'm creating an "about.md" page, which has a different layout then then other (default) pages.
So what I would like to do is use metadata to select the layout. For example
Layout: _About.cshtml
or
Layout: _About
Is this possible with Wyam?
In A Razor File
Pages in the Wyam recipes (I'm assuming you're using either the blog or docs recipe) are processed by Razor. The use of a _Layout.cshtml is by convention in the recipe, but alternate layouts can be specified using standard Razor syntax. You can do so by placing the following at the top of the about page .cshtml file (under your front matter):
#{
Layout = "_About.cshtml";
}
In A Markdown File
Markdown files are also processed by the Razor engine, so the technique above would work if it weren't for the Markdown processor escaping the # symbol. There's really no good way around that, and the simple answer to your question is you can't specify an alternate layout for a Markdown file.
However, one of the advantages of using a code-driven generator like Wyam is that you have a lot of control. In this case, you can replace the RenderPages pipeline with one that will do exactly what you want. Add the following to your wyam.config file:
int index = Pipelines.IndexOf(Blog.RenderPages);
Pipelines.Remove(Blog.RenderPages);
Pipelines.Insert(index, Blog.RenderPages,
(IPipeline)new Wyam.Web.Pipelines.RenderPages(
Blog.RenderPages,
new Wyam.Web.Pipelines.RenderPagesSettings
{
Pipelines = new string[] { "Pages" },
Layout = (doc, ctx) => doc.String("Layout", "/_Layout.cshtml")
}));
Then you'll be able to add a "Layout" value as front matter exactly like you wrote in your question.
This was a good idea in general, so I've also opened an issue to add this behavior to the recipe by default.
Does anyone know how to create a link to the header of a different wiki page?
I know if I have a header ##Header name that I can link to it on that page by using (#header-name) as my link, but I want to link to that header from a different page. Is this possible?
ie. I want to have a table of contents that can link to the sub-sections of each wiki page as well as to the page itself.
Edit: I mean a way besides just using the url link
http://github.com/project/wiki/Wiki-Page#header-name
EDIT 1: So totally wrong about before, I just read up a bit more. So we have this new support as well inside of GitHub Wikis! (Relatively new.)
You can also do something like this:
[[ Link text | page_title#header_title ]]
This might work a lot better for you! TIL because of this answer here. You can see me do this with the Prerequisite link and you can see my other links work the other way. Time for me to do some updates!
EDIT 1: Still useful but definitely NOT THE ONLY WAY.
So I answered a question about this before, you should avoid absolute links on GitHub (i.e. https://github.com/user/repo_name/...)
However, a good way (and kind of the only way inside of Wikis EDIT 1: TOTALLY NOT TRUE TO BEING THE ONLY WAY) of doing what you need can be seen like this:
[Header link](/user/repository_name/wiki/page_name#title).
This is kind of the linking unfortunately that the Wiki would support. This will change your directory page based off of GitHub. You can see that it would be
https://github.com/(the linkage you want to hit)
I have actually began doing something like this in a Wiki I work on here. Inside of my Sidebar, you can see I have a Getting Started Page, and then a subsection into it is a Prerequisite heading and it will properly lead people to where they need to go. You would be able to perform this same thing on any page. It is a tad verbose, but worth it as you can easily change things around if need be. This is also case-sensitive since it will change their location so be sure that in your linkage, the page is the proper case and your heading is all lowercase.
Hope this helps!
You can link to the header by simply assigning an id to header. e.g you've "Extension" header in a page called Abc.
# <a id="extension"></a> Extensions
You have another page "Call center" and you want to go to extension in abc , you can use reference linking of markdown i.e "The [extensions][1] are handled by agents"
[1]: url-of-abc/#extension
I tested Maxwell's "good way" to link to the header of another page in Github in Edit 1 on and it works perfectly.
#[crux-ports Installation](/user/crux-ports/blob/master/README.md#installation)
markdown generate slug for the heading and convert it to id, example
# [ topic ][ color ]
will be converted to
<h1 id="topic--color" data-line="643" class="code-line">[ topic ][ color ]</h1>
Thus, to link it you can write it as [color](#topic--color).
If the destination anchor is on another page (assume filename css.md) with path relative to current markdown page, then you can write it as [color](css.md#topic--color)
Attach the slugify function from vscode
// excerpt from https://github.com/yzhang-gh/vscode-markdown/blob/908d7ba5465a203e4299f346c179211d992ef468/src/util/slugify.ts
const str = '# [ topic ][ color ]';
const slug = encodeURI(
str.trim()
.replace(/\s+/g, "-") // Replace whitespace with -
.replace(/[\]\[\!\'\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\#\\\^\_\{\|\}\~\`。，、；：？！…—·ˉ¨‘’“”々～‖∶＂＇｀｜〃〔〕〈〉《》「」『』．〖〗【】（）［］｛｝]/g, "") // Remove known punctuators
.replace(/^\-+/, "") // Remove leading -
.replace(/\-+$/, "") // Remove trailing -
);
console.log(slug) // "topic--color"
I have some tabular data about users. I would like to have a Confluence page generated based on it. But I don't want to show the data as it is but instead have a nice table made of it.
For example data includes user identifier. But on the page I would like to have it used for few things. For example make an anchor to the user entry/row, show the identifier in a column and generate link (in another column) to some other tools where the identifier is an argument in URL.
This goes in obvious direction of data vs. presentation separation with all its benefits.
Now the problem is that I don't know how to do that while I feel that it should be somehow possible with all that Confluence offers.
There are various reporting macros. But the problem is how to get the initial tabular data. I tried using Excel (or CSV) attachment. But I failed to extract data from it (otherwise than just showing a simple table based on it).
Any advice? I'm using Confluence 5.4.
I have asked about it previously on Atlassian Answers in question Reporting on spreadsheet data from attachment but there are no answers so far and I think there will be none. While I think Stack Overflow is more popular so I hope that maybe here someone will have any advices.
For the 'display table information on the page' part: This could be achieved with a user macro. The CSV macro and HTML macro can be used to pull data in from an attachment or other locations to display on a wiki page.
There are other ways to display this kind of data. This be done with information extracted from a database using the SQL macro. Confluence can read in from its own database or from external databases.
For example, let's say you wanted to list all pages in a space with hyperlinks using the key page information to edit, view, delete the target page. The information being extracted in this example is in the Confluence table.
{sql-query:dataSource=wiki|output=wiki}
SELECT
'['||B.spacename||'|'||B.spacekey||':]' "Space Name",
'['||A.parentid ||'|///pages/viewpage.action?pageId='||A.parentid||']' "Page Parent",
'['||A.contentid||'|///pages/viewpage.action?pageId='||A.contentid||']' "Page Id",
'['||A.title ||'|///viewpage.action?pageId='||A.contentid||']' "Page Title",
'[View Page |///pages/viewpage.action?pageId='||A.contentid||']' "View Page",
'[Edit Page |///pages/editpage.action?pageId='||A.contentid||']' "Edit Page",
'[Delete Page |///pages/removepage.action?pageId='||A.contentid||']' "Delete Page"
FROM wiki.CONTENT A, SPACES B
WHERE B.SPACEKEY = 'sp' -- Put the spacekey here
AND B.SPACEID = A.SPACEID
AND A.TITLE like '%this%' -- Optionally, only return results for pages with the word 'this' in them
-- AND A.CONTENTID = 125999877 -- optionally, only return results for a single page by id
ORDER BY A.TITLE
{sql-query}
Once you have the content on the page it is possible to post-render wiki content using a JavaScript via the html macro.
{html}
<script type="text/javascript">
AJS.$(document).ready(function() {
AJS.$('#tableid').find('tr > td').contents().html('Hello world'); // or whatever to find and change the html or text
});
</script>
{html}
I presume your Confluence is version 4 or later. The default editor is WISIWYG, but you can also enable Source Editor (read Confluence doc on how to do this).
You can create source of a page in external editor and then copy/paste it in to Confluence Source Editor (or use Confluence REST API if you need to import multiple files).
Create a page with sample table, then view source of this page. Copy/paste elements of this page to your tabular data. Use search and replace patterns to insert tags in right places.
For example, if you have CSV file:
- replace commas with </th><th>
- put <tr><th> at the start of each line
- put </th><tr> at the end of each line
This should create nice table in Confluence.
This is either very annoying or very embarrassing. I've set up most of my blog, but I can't figure out where or how the heck I set up single entry templates as opposed to the section/weblog containing them. I just can't find information on how to do it for the life of me.
This is especially important, because I want to define the canonical link for all entries, since ExpressionEngine links to entries in all kinds of ways.
So, the case is that I have a Blog section/weblog with an index working as the front page for mydomain.com. This lists all my entries as you would imagine a regular blog to do. The problem arises when I need to customize the code for the single entries' links.
If you have a template set up already which is showing a multitude of entries and you want a single entry page for each entry then what you need to do is this :
{exp:channel:entries
channel="default_site"
sort="asc"
disable="member_data|pagination|categories"}
{title}
{/exp:channel:entries}
Then in the template shown above by template_group/template_name (please change those to whatever your template group and template names actually are ;-) ) you will place this code :
{exp:channel:entries
channel="default_site"
limit="1"
dynamic="yes"
sort="asc"
disable="member_data|pagination|categories"}
{title}
{/exp:channel:entries}
This will then show you just the one entry as you will have used the {url_title_path="template_group/template_name"} in the first channel entries tag above which would basically create a URI something like this :
http://www.example.com/template_group/template_name/url_title_of_my_posted_entry
On the second (template_group/template_name) single entry template page it will see the URL title and use this to filter down the channel entries tag to just that one entry.
Hope that helps a bit.
Best wishes,