Single Page VuePress Theme
This these extends the VuePress default theme @vuepress/theme-default
for a layout for single page sites that contain several sections, each covering at least one view height.
I this this is easier described with a picture:
Desktop version:
Mobile version:
I developed this theme as the basis for my personal homepage. So it can well be used to put your resume online.
It also defines a couple of social icons that you can use to link to your online profiles.
Example
In the example
directory, there is a simple sample project.
You can see this live at https://ptandler.github.io/vuepress-theme-single-page-sections/
Setup
This theme uses VuePress v1.
Install the theme:
yarn install -D vuepress-theme-single-page-sections
Usage
In your .vuepress/config.js
include theme: "single-page-sections"
. And I recommend the following themeConfig
. The themeConfig comes from the default theme.
module.exports = {
theme: "single-page-sections",
themeConfig: {
sidebar: "auto",
search: false,
smoothScroll: true,
social: { monochrome_icons: false },
editLinks: false,
nextLinks: false,
prevLinks: false,
},
}
And on the pages that should contain several sections use the following frontmatter:
---
title: Page Title...
pageClass: sections-layout
sidebarImage: /small-image.jpg
---
<PageSection id="welcome" title="First Section">
Some content...
</PageSection>
---
::: section Second Section
Some content... this time using the markdown "custom container" syntax.
:::
The sidebarImage
is optional. If defined, this image is included in the sidebar above the navigation links. In the mobil version, it is included in the navbar instead, as the sidebar is hidden then.
Implementation
This theme overwrites two components from the default theme:
components/Navbar.vue
components/Sidebar.vue