this is my question about docusuarus (docusaurus.io):
In my site I have several folders inside "docs" folder:
docs
doc1.md
folder1
doc2.md
folder2
doc3.md
so when I call a document, for example, "doc2.md", in the url i see:
domain.com/folder1/doc2
I would like to hide the folder name in all cases:
domain.com/doc1
domain.com/doc2
domain.com/doc3
Is it possible to do this? Thanks.
I'm not sure about this but give a try please.
You can declare that you want this behavior in docusaurus.config.js file like this:
module.exports = {
// ...
docs: {
path: 'docs',
pages: [
{
path: 'file2',
route: '/file2',
title: 'File 2',
sidebar_label: 'File 2',
source: 'folder1/file2.md',
},
],
},
// ...
}
now try navigating to it like this: exampleSite.com/file2, with remaining your folders structure.
Thanks for response Gwhyyy.
I found an easy solution:
We can add a slug option at the top of each file, example:
---
id: File2
title: File 2
slug: /file2
---
Regards.
Related
I want to add Schema Tags and load my custom CSS in head tag on some particular pages not all, So is their any easy way to do that as I am not a coder, Can anyone help me regarding this?
To Add custom style to the default installed vuepress I use the following code in index.styl under .vuepress/styles/ to update content__default css class:
/**
* Custom Styles here.
*
* ref：https://v1.vuepress.vuejs.org/config/#index-styl
*/
.home .hero img
max-width 450px!important
.content__default
background-color #3df085
Screen:
About SEO tags I suggest loris plugin
after reading your comment I see a custom layout is the solution.
Add tags to head via config.js:
head: [
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
['meta', { 'property': 'og:type', 'content': 'article' }]
],
Easy customization using default theme:
Custom style for each page using custom page class.
Add tags for each page using yaml header.
Example for #1 & #2:
/blog/README.md
---
pageClass: blog-page
home: true
heroText: Hero Title
actionLink: /blog/
meta:
- name: description
content: blog page by abuabdellah
- name: keywords
content: super duper SEO
---
# Introduction
This is a test for a blog using v1 Vuepress
/guide/README.md
---
pageClass: guide-page
meta:
- name: description
content: guide page by abuabdellah
- name: keywords
content: super duper SEO
---
# Introduction
VuePress is composed of two parts
index.styl
.theme-container.blog-page
background-color blue !important
.theme-container.guide-page
background-color green !important
I tried running npm run serve, and it came back with this error:
This relative Module was not found:
*./components/Map.vue
It exists, and I'm pretty sure I've linked the pages right. How do I correct this?
My config looks like this:
module.exports = {
pages: {
home: {
entry: './src/components/main.js',
template: './src/pages/home/App.vue',
filename: './src/pages/home/App.vue',
title: 'Home Page',
chunks: ['chunk-vendors', 'chunk-common', 'Home']
},
map: {
entry: './src/pages/map/main.js',
template: './src/pages/map/App.vue',
filename: './src/pages/map/App.vue',
title: 'Map',
chunks: ['chunk-vendors', 'chunk-common', 'Map']
},
}
}
Am I linking things wrong?
edit:
I have changed my templating based on another answer given on here to the a similar question. Now it's telling me:
These dependencies were not found:
C:\Users\xadri\OneDrive\Documents\Adrian Code Projects\demo2\demo2\demo2\src\pages\Home\main.js in multi (webpack)-dev-server/client?http://192.168.1.5:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/pages/Home/main.js
C:\Users\xadri\OneDrive\Documents\Adrian Code Projects\demo2\demo2\demo2\src\pages\Map\main.js in multi (webpack)-dev-server/client?http://192.168.1.5:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/pages/Map/main.js
And is saying I can download them.
module.exports = {
pages: {
'index': {
entry: './src/pages/Home/main.js',
template: 'public/index.html',
title: 'Home',
chunks: [ 'chunk-vendors', 'chunk-common', 'index' ]
},
'map': {
entry: './src/pages/Map/main.js',
template: 'public/index.html',
title: 'Map',
chunks: [ 'chunk-vendors', 'chunk-common', 'about' ]
}
}
}
The error is likely caused by the invalid config you currently have.
From the docs for pages:
template should point to an .html file (not a .vue file)
entry should be a .js file (that imports a .vue file)
filename should be the output filename in the output folder (don't link it back to the original source files)
use # before import yours modules, like it:
import BntPayment from '#/components/BntPayment.vue'
the # should fix your issue, if it doesn't works do like this
import BntPayment from './components/BntPayment'
I have my Nuxt app and I'm trying to add Vuepress on it.
I did yarn add vuepress#next -D then created the docs folder and a readme.md file in there.
The problem: The project only shows the sidebar and navbar if the .vuepress folder is outside of the docs folder; If it's inside, it won't work - Not respecting the config.js rules.
Also, it's recognising the readme.md from the Nuxt app (outside from docs folder too), not the one inside docs folder.
Can anyone help me with that?
Another question, if this above works, Am I be able to access through localhost:3000/docs instead of localhost:3000 for the Nuxt project and localhost:8080 for the docs?
That's my current folder structure (no sidebar showing - not respecting the config.js inside the .vuepress folder):
docs
|__.vuepress
| |__config.js
|
|__guides
The config.js file:
module.exports = {
title: 'Documentation',
description: 'Documentation',
themeConfig: {
sidebar: 'auto',
nav: [{
text: 'Home',
link: '/'
},
{
text: 'Guides A',
link: '/guides/apis/'
},
{
text: 'item with subitems',
items: [{
text: 'Subitem 01',
link: '/'
},
{
text: 'SubItem 02',
link: '/'
}
]
},
{
text: 'External',
link: 'https://google.com'
},
]
}
}
Vuepress version 1.0.2
Thanks.
Why you need to use both of these? If you using Nuxt you don't actually need VuePress. Check the official VuePress documentation.
Nuxt
Nuxt is capable of doing what VuePress does, but it is designed for building applications. VuePress is focused on content-centric static sites and provides features tailored for technical documentation out of the box.
I have attached 2 screenshots, one of my vue.config.js and another of a section of the unminified output my build is producing.
Whats happening is this: I want to change the icon paths and the path to the manifest. For whatever reason the official way of changing this is not working. Right now they are blank spaces, however it was not working when it was anything else either ( just tried with 'foo/bar' as the path as I was typing this to triple check ).
I am confused because I seem to be doing everything exactly as I should according to the official docs. Is there anything another set of eyes can spot that I am missing?
Greetings Erik White
At some point I had the same difficulty and solved it as follows:
Copy the images into the "public" folder
example:
We add the folder "favicon" to "public", "favicon" contains 5 images
[project]/public/favicon/favicon-32x32.png
[project]/public/favicon/favicon-16x16.png
[project]/public/favicon/apple-touch-icon-152x152.png
[project]/public/favicon/safari-pinned-tab.svg
[project]/public/favicon/msapplication-icon-144x144.png
To add images in your html: modify the "vue.config.js" and add.
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
iconPaths: {
favicon32: 'favicon/favicon-32x32.png',
favicon16: 'favicon/favicon-16x16.png',
appleTouchIcon: 'favicon/apple-touch-icon-152x152.png',
maskIcon: 'favicon/safari-pinned-tab.svg',
msTileImage: 'favicon/msapplication-icon-144x144.png'
}
// ...
}
}
To change the path and name of "manifest.json" modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestPath: 'my_new_manifest.json',
// ...
}
}
To change the properties of the "manifest.json", (name, images, color, etc) modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestOptions: {
name: 'etc ..',
short_name: 'etc ..',
theme_color: '# f44647',
background_color: '# f44647',
start_url: 'index.html',
display: 'standalone',
orientation: 'portrait',
icons: [
{
src: './favicon/favicon-32x32.png',
sizes: '32x32',
type: 'image/png'
},
{
src: './favicon/favicon-16x16.png',
sizes: '16x16',
type: 'image/png'
},
{
src: './favicon/apple-touch-icon-152x152.png',
sizes: '152x152',
type: 'image/png'
},
{
src: './favicon/safari-pinned-tab.svg',
sizes: '942x942',
type: 'image/svg+xml'
},
{
src: './favicon/msapplication-icon-144x144.png',
sizes: '144x144',
type: 'image/png'
},
]
},
// ...
}
}
NOTE
chucks is not a supported parameter.
excludeChucks is not a supported parameter.
If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It's recommended to use a browser incognito window to avoid complications with your browser cache.
Remember to see the VUE documentation, it is very detailed, I leave you a link below #vue/cli-plugin-pwa
Nevermind, solved by updating my dependencies.
guessing this was fixed in a patch i didnt catch
I have a vuepress site which lives in my current vuejs app at /docs.
I am building the site into the main /dist folder and deploying them together.
When I am adding a link to the navbar in the .vuepress/config.js file the base is always appended or if adding the full URL it creates an external link.
module.exports = {
base: "/docs/",
dest: "dist/docs",
themeConfig: {
nav: [
{ text: 'Home', link: 'https://myapp.com/'},
{ text: 'Guide', link: '/guide/'}
],
}
}
I can change the way external links are handled, but this is site wide and I do not want this to apply to all links.
In short:
{ text: 'Home', link: '/'} // this is directing to /docs due to base
I would like, for this to direct to myapp.com