Configuring Fusuma

Fusuma can run even if a configuration file doesn't exist, but if you want to customize SEO, slide options, etc, you can use .furumarc file. It supports .yml and .js extensions and can be generated by CLI.

meta:
  url: #         [SEO] your site url, e.g. github pages
  title: #       [SEO] your slide title
  description: # [SEO] your slide description
  thumbnail: #   [SEO] your slide thumbnail, if this filed is empty, fusuma will create an image
  siteName: #    [SEO] your slide siteName
  sns: #         [Sidebar] add SNS buttons
    - twitter
slide:
  loop: true
  targetBlank: true
  ui:
    sidebar: true
    vertical: false
    pagination: # bullets | progressbar | fraction
    effect: #     fade | cube | flip
  code:
    languages:
      - javascript
      - html
    plugins:
      - line-numbers
    theme: default
extends:
  js: index.js
  css: style.css
  webpack: webpack.config.js
build:
  useCache: true
  publicPath: 'foo'

meta

Making SEO and OGP to 100%

meta.url, meta.title, meta.description and meta.siteName are required if you want to improve SEO. If meta.thumbnail is empty but meta.url is set, Fusuma will generate an image for ogp automatically. In many cases, users prefer auto-generation, so when created with init, the thumbnail field does not exist in the config file.

slide

Slide Core UI

Fusuma uses swiper for Slider. Fusuma provides loop, vertical, pagination, and effect options. The options enabled by default are a11y and keyboard.

Sidebar

Fusuma adds a sidebar component as default. This component displays agenda of slides and some helpers.

Code Syntax Highlighting

Fusuma uses Prism.js and babel-plugin-prismjs. You can specify languages, plugins, theme to .fusumarc.yml.

code:
  languages: # the default is javascript
    - javascript
  plugins: # the default is []
    - line-numbers
  theme: default # the default is default

See these options for more details. babel-plugin-prismjs#configuring-the-plugin, Prism.js Playground

extends

JavaScript

Fusuma uses babel and webpack, so you can use ES2020 and ESM(ECMAScript Modules). The default value is null.

CSS

The default value is style.css so ./style.css is loaded by fusuma automatically. Fusuma uses postcss-preset-env and postcss-import, so you can use the cssnext syntax up to level:1 and @import.

See the example css.

webpack

If you want to extend fusuma's webpack.config.js, you can use this option. The default value is null.

Build

Fusuma was changed to full rendering to HTML as default when running build task from v2.

persistent caching

webpack@5 supports persistent caching so fusuma uses it as default but if you face some issues, please try to turn off it.

publicPath

Fusuma infers publicPath for production automatically but if it is wrong, please set this field.