Currently, Vuepress permalinks are customisable only on the given template variables. For example, given the following directory structure:
posts
coding
my_post.md
and using permalink /:regular I get /posts/coding/my_post.md. However, due to migration and existing SEO issues, I need this link to be /coding/my_post.md. Is there a way to change the links that are generated in Vuepress blog plugin?
Unfortunately, there is no clear way for customising the permalinks generated from Vuepress or Vuepress blog plugin beyond the template variables. A solution I found was to use a custom plugin that set the permalink to exactly what I needed:
module.exports = {
extendPageData(pageCtx) {
// We will force permalinks on the posts to be mapped
// to root of the site. So /posts/my_post.md becomes /my_post.html
if (pageCtx.path.startsWith("/posts")) {
pageCtx.frontmatter.permalink = pageCtx.path.replace("/posts", "");
}
}
};
And use the plugin following the guidelines available on the Plugins page. This solution works because Vuepress respects the permalink frontmatter. I recommend reading more on the plugin options API where there is more documentation how to extend page data and in this case modify permalinks.
Related
I have recently found out about jekyll, and want to make a project landing page with it. I would like to have a home page using one theme (e.g. ubuild) and have another page for the docs (accessed via a navigation bar at the top) that uses a different theme (e.g. just-the-docs). How can I go about doing this?
EDIT: I want to use Github Pages for this.
Since you plan to use one of the themes on just a single page, I think the best solution would be to use two base layouts instead of two themes.
It will take some minor work initially, but will greatly ease future maintenance.
First set up the site to render just-the-docs theme for all pages including the landing page. Then modify _layouts/home.html to be a parent layout (like the default layout)
to render the markup from the ubuild.. theme.
I solved this with help from #JoostS's answer but with a few modifications:
Make an organization on GitHub pages with a repo called <org-name>.github.io. This repo should contain the theme for the home page (ubuild in my case) and all the content for it.
Make another repo with a jeykll site, called docs. This site should have the theme you want for the other page (just-the-docs in my case) and all the content along with it.
In the docs repo, add baseurl: "/docs" to your _config.yml
The <org-name>.github.io repo, should now be hosted at <org-name>.github.io/:
The docs repo should now be hosted at the <org-name>.github.io/docs url:
To link to the docs page, you should just be able to use /docs now.
The solution is to create two separate websites. The first site contains just the homepage and should be deployed to the root of your web folder. The second site contains all docs and should be deployed to a subdirectory, like '/docs/'. You might want to use baseurl for this: https://byparker.com/blog/2014/clearing-up-confusion-around-baseurl/
I do not think you can use this solution on Github pages. You can TRY to add the same CNAME to both repositories, as I am not 100% sure. Any other static hosting environment should work.
You can link from the docs to the homepage by linking to '/'. You can link from the homepage to the docs by linking to '/docs/pagename/' (assuming you use permalink: pretty).
The simplest way to maintain two layouts on the same site using Jekyll with GitHub Pages is for you to create a new repository for the new layout, so the main site is in a GitHub organization and the pages that need to use a different layout must be in your repositories.
However, if you are not using GitHub, just jekyll, just configure each folder as a new Jekyll project, and direct them to write to the respective subfolders in the _site folder. For everything to work out you need to start Jekyll Server from the main folder, and then build each subfolder separately, so it will update without removing the main one
I am using vuepress to build a personal notes.
I put some html, javascript demo files inside .vuepress/public/demo/javascript/01/.
When I writing my note using in .md file, I create a link by [demo](/demo/javascript/01/)
this seems not work well cause such relative path, vuepress will treat it as a .md file and try to look for the path and result as 404
(Although do a refresh on the 404 page, it works well..)
What is the better way to link files under public which I can use in .md and make vuepress treat it as normal external link without hardcoding the domain in the link.
here is the code
https://gitlab.com/changsijay/vuepress01
and here is the deployment result:
https://changsijay.gitlab.io/vuepress01/
I would move your code from index.html to a .vue-file and add the vue file to your index.html (except, I would name it README.md, since that is what VuePress looks for in every sub-directory) with the basic vue syntax <IndexCode />.
Then just link with [demo](/demo/javascript/01/) and it should automatically load the README.md
If for some reason you want to use the index.html, you can always link it with [demo](/demo/javascript/01/index.html)
How can I create a page for each category automatically in Jekyll ?
example:
the url of the post : https://UsrNm.github.io/Category1/Category2/2018/02/16/Post1.html
I want when I go to link like: https://UsrNm.github.io/Category1/Category2/
Get All posts in category Category1 and Category2
or when I go to link like: https://UsrNm.github.io/Category2/
Get All posts in category Category2 only
You can't do this automatically.
Well, you have 2 options:
The Jekyll way and the hackish way.
In pure Jekyll way you will need to create pages manually for each category, even if you have posts with multiple categories. Note that Jekyll doesn't have dynamic routing for this.
In hackish way you could use Javascript to read the parameters in url and show/hide needed content. Idea is to render all of the posts(hidden by default) and create identifiers on them, proper way to do this would be adding html attribute data-category=cat1 and say that you have url like this
/category?categories=cat1,cat2. You could then get categories from url and add logic in javascript to show just the ones that are actually in that categories.
Hope that helps
You can use the gem jekyll-archives to do this kind of work, which is a plugin of jekyll.
Or if you want to do this manually, you can read this guide
You can see the example of my site
Tips: Github Pages do not support this. Thus, if you want to deploy this on Github pages, you can convert site to static files and push only _site dir to the repo, which has been mentioned at here :)
I want to change the order of pages in navitation bar by using jekyll-plugins / weighted_pages.rb from here.
This plugin work very well on my localhost but github.
I find the navitation bar is empty on github host, which seems this plugin does not work.
How can I solve this problem?
I copy weighted_pages.rb code below:
# Generates a copy of site.pages as site.weighted_pages
# with pages sorted by weight attribute. Pages with no
# weight specified are placed after the pages with specified weight.
module Jekyll
class WeightedPagesGenerator < Generator
safe true
def generate(site)
site.config['weighted_pages'] = site.pages.sort_by { |a|
a.data['weight'] ? a.data['weight'] : site.pages.length }
end
end
end
Add weight attribute to the front matter of your pages (like weight: 1) and use site.weighted_pages instead of site.pages in your loops.
Github pages does not support plugins. From jekyll's documentation:
GitHub Pages is powered by Jekyll, however all Pages sites are generated using the --safe option to disable custom plugins for security reasons. Unfortunately, this means your plugins won’t work if you’re deploying to GitHub Pages.
The same documentation page also gives you a workaround:
You can still use GitHub Pages to publish your site, but you’ll need to convert the site locally and push the generated static files to your GitHub repository instead of the Jekyll source files.
Currently, Github pages does not support some custom plugins.
If you want to make Jekyll site run as if it were local, such as let the custom plugins work properly, here is a way really convenient to build and deploy the Jekyll site to Github Pages.
jekyll-deploy-action - 🪂 A Github Action to deploy the Jekyll site conveniently for GitHub Pages.
https://github.com/jeffreytse/jekyll-deploy-action
With this action, I think your issues can be settled perfectly.
I know how to create a post in jekyll, but how can I create a page (like About) without it being considered as a post?
Also, I use Github pages, so I can't use extensions.
If you create a file called about.html, about.markdown or about.textile in the root of your project it will be treated as a static page.
You can still give it some YAML front matter and jekyll if you wish to share a template etc.
It's all explained on the jekyll wiki at https://github.com/mojombo/jekyll/wiki/usage
Here's an excerpt from my about.markdown file
---
layout: default
title: About | Purebreeze
---
I'm a software developer based in London...
That's saying use the default template, set title to "About | Purebreeze" (which is rendered via a liquid tag in my default template) and then the contents of my about page.
This is then rendered at http://purebreeze.com/about by github (by default this would have been (http://levent.github.com/about)
This looks like a bug. But there's a workaround: create a directory called eg. "about" and put your content into about/index.[fill in the blank]. (oh, and by the way, report it.)