Transform files into content that can be fetched with GraphQL in your components.
What is Gridsome. Gridsome is a static site generator similar to Gatsby (though still new so not as feature rich) for the Vue framework. Gridsome has a ton of features but here are just a few. What this means for me is I get to write Vue applications that can then generate a static website. Gridsome is a free & open source Vue.js-powered framework for building websites & apps that are fast by default ?. Aug 15, 2019 yarn add gatsby-source-filesystem gatsby-transformer-remark. The above command will install gatsby-source-filesystem and gatsby-transformer-remark packages to our app. Gatsby-source-filesystem is a source plugin for sourcing data into our Gatsby application from our local filesystem and gatsby-transformer-remark parses Markdown files using Remark.
Install
Usage
A filesystem source will also require a transformer in order to parse the files. The example above is looking for a set of Markdown files, so in order to let Gridsome understand the content of the files, you must install @gridsome/transformer-remark as a dev dependency in your project. Gridsome will automatically transform the files for you as long as a transformer that supports your files is found in your
package.json .
Optionspath
Gridsome Source-filesystem Generate Key File
Where to look for files. Should be a glob pattern.
typeName
The GraphQL type and template name. A
.vue file in src/templates must match the typeName to have a template for it.
baseDir
![]()
The base directory for all files. The
baseDir will not be included when routes are generated from the file paths. The option defaults to the project root directory if omitted.
The following example will look for all markdown files inside the
/content/blog directory. A file located at /content/blog/hello-world.md will generate a /hello-world route.
Gridsome Source-filesystem Generate Key WindowspathPrefix
Gridsome Source-filesystem Generate Key Download
Prefix paths generated from the file location. The example below looks for markdown files inside
/content/blog/*.md . And a file named blog-post.md in that folder will get a path like /blog/my-post . This option is excluded if a route is defined.
refs
Define fields that will have a reference to another node. The referenced
typeName is expected to exist. But a content type can also be created automatically if you set create: true . Read more about references.
index
Define which files to consider as index files. These files will not have their filename appear in its route path and will become the main
index.html file of the directory. Make sure there is only one possible index file per directory if multiple index names are defined. This option is only used if there is no dynamic route defined.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |