kostumブログ

勉強したことやノート代わりのアウトプットに使っています。

docsifyを触る②

Javascript documentation Note

前の記事

kostum.hatenablog.jp

目的

docsifyでドキュメントのページを作成する。

結果

ページの作成

ディレクトリの構造に合わせて、URLパスが生成されます。

サイドバーの作成

自分で作成したサイドバーを使いたい場合、_sidebar.mdをdocs配下に作成し、index.htmlにloadSidebarをtrueに指定します。他の名前を使用する場合、loadSidebarの値に、その名前のファイルを指定します。

<!-- index.html -->
.....
<body>
  <script>
      window.$docsify = {
        name: "",
        repo: "",
        loadSidebar: true,
        // 子要素の表示数
        subMaxLevel: 2
      };
    </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
  .....

自分でサイドバーを作成する場合、デフォルトのCSSが効かなくなるので注意です。

ナビゲーションバーの作成

自分で作成したナビゲーションバーを使いたい場合、_navbar.mdをdocs配下に作成し、index.htmlにloadNavbarをtrueに指定します。他の名前を使用する場合、loadNavbarの値に、その名前のファイルを指定します。

<!-- index.html -->
.....
<body>
  <script>
      window.$docsify = {
        name: "",
        repo: "",
        loadSidebar: true,
        loadNavbar: true,
        // 子要素の表示数
        subMaxLevel: 2
      };
    </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
  .....

絵文字の使用

絵文字を使う場合は、scriptにpluginを追加する必要があります。
```
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
```

カバーページの作成

自分で作成したカバーページを使いたい場合、_coverpage.mdをdocs配下に作成し、index.htmlにcoverpageをtrueに指定します。他の名前を使用する場合、coverpageの値に、その名前のファイルを指定します。

<!-- index.html -->
.....
<body>
  <script>
      window.$docsify = {
        name: "",
        repo: "",
        loadSidebar: true,
        // 子要素の表示数
        subMaxLevel: 2
        coverpage: true
      };
    </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
  .....

背景を変えたい

デフォルトでは、ランダムに背景画像が生成されますが、以下のようにすることで、背景色や画像を変更することができます。

<!-- _coverpage.md -->

# docsify <small>3.5</small>

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#test)

<!-- background image -->
![](_media/bg.png)

<!-- background color -->
![color](#f0f0f0)

ホスティング方法

Github Pages

Github Pagesの設定で、ソースを/docsに指定すれば、それだけでOK。

他ホスティングサービスについては、ドキュメント参考。。。

参考

docsify docsify.js.org