Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

开始使用

本博客使用 Gatsby 进行开发,在开始使用 Sculpting 时,建议先了解下一些 Gatsby 的开发流程.

Gatsby 支持两种创建博客方式,一种是全新的安装模式,一种是在现有的 Gatsby 博客上进行扩展.

全新模式安装

gatsby new suziwen/gatsby-starter-sculpting

扩展模式安装

如果你已经有了一个 Gatsbyjs 的静态网站,想在该网站的基础上安装 sculpting 主题,可以使用这种方式安装.

  1. 安装 gatsby-theme-sculpting 组件
npm install `@suziwen/gatsby-theme-sculpting`
  1. 在配置文件 gatsby-config.js 里注册安装的组件
module.exports = {
  plugins: [ 'gatsby-theme-sculpting']
}

配置

插件支持的参数

可以使用下面的形式,对 gatsby-theme-sculpting 主题进行参数设置

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-sculpting',
      options: {
        basePath: '/',
        tagsPath: 'tags',
        archivesPath: 'archives',
        contentPath: 'posts',
        disqus: { // 需要使用时再配置这个节点
            shortname: ''
        },
        gitalk: {  // 需要使用时再配置这个节点
            clientID: '',
            clientSecret: '',
            repo: '',
            owner: '',
            admin: []
        }
      }
  ]
}

BasePath

生成博客的基础路径,默认为值为 /

tagsPath

标签的基础访问路径,默认值为 tags

archivesPath

归档的基础访问路径,默认值为 archives

contentPath

指定放置小书匠 zip 文件的位置(相对路径时,以博客的安装目录为起点算起),默认值为 posts

评论

目前支持 disqus 和 gitalk.

当同时配置了 disqus 和 gitalk 时,系统直接使用 gitalk.

disqus

shortname

gitalk

支持的参数可以参考这里.

通用的 sitemetadata 配置

可以在 gatsby-config.js 里的 sitemetadata 节点,配置一些网站的基本信息.

module.exports = {
    siteMetadata: {
       title: '小书匠', // 网站标题, 页面左上角的文字
       siteUrl: 'http://www.xiaoshujiang.com', // 网站地址
       description: '', // 对网站的一些介绍
       idiom: '', // 谚语,可以为空,页面左下角的文字
       author: '', // 作者, 页面右下角 copyright 上作者信息.
    },
    plugins: [...]
}

文章元数据支持

title

文章标题

createDate

文章创建时间,如果不指定,系统直接使用内置的创建时间

slug

用于生成文章的访问路径,如果不指定,直接使用 title 做为访问路径.

tags

标签,多个标签以逗号分开,也可以使用 yaml 的数组定义多个标签

excerpt

文章摘要

定制

想要对主题进行微调的,需要使用到 Gatsby 的 shadowing component 功能,进行继承修改,详细教程可以参考 Gatsby 官方教程.

当然你也可以直接在主题上进行修改,然后重新发布一个新的主题.

目录结构

├── gatsby-browser.js
├── gatsby-config.js // gatsby 默认的配置文件 
├── gatsby-node.js
├── gatsby-ssr.js
├── index.js
├── package.json
├── posts
│   └── 在这里存储小书匠导出的 zip 文件
├── README.md
├── src
│   ├── assets
│   ├── components //组件目录
│   ├── gatsby-plugin-theme-ui //样式主题
│   │   └── index.js
│   ├── header.mdx
│   ├── layouts //整个博客框架页面
│   │   ├── button.js
│   │   ├── footer.js
│   │   ├── header.js
│   │   ├── index.js
│   │   ├── menu-button.js
│   │   ├── nav-link.js
│   │   └── sidenav.js
│   ├── pages
│   │   ├── 404.js // 404 页面
│   │   ├── index-default.js //默认主页
│   │   └── search.js //搜索页面
│   ├── templates
│   │   ├── template-archive.js //归档模板
│   │   ├── template-blog-list.js //博客列表模板
│   │   ├── template-blog-post.js //博客文章模板
│   │   └── template-tag.js //标签模板
│   └── utils // 一些帮助函数
└── static // 静态引用的文件

主题颜色配置

可以创建一个主题专用的配置文件 src/gatsby-plugin-theme-ui/index.js 来修改主题样式的配置.

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website.

Here are some places to start:

Themes

  • To learn more about Gatsby themes specifically, we recommend checking out the theme docs.

General

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples, head to our documentation. In particular, check out the Reference Guides and Gatsby API sections in the sidebar.

其他

如何添加统计功能

可以直接安装一些统计插件 gatsby-plugin-google-analyticsgatsby-plugin-baidu-analytics

© 2023 Gatsby, Inc.