装飾 | VuePressの使い方

😅

試したものだけです

# プラグイン

@vuepress/plugin-back-to-top;　ページの先頭に戻る矢印を追加してみました

npm install -D @vuepress/plugin-back-to-top

config.js に追加(続きからで大丈夫です)

 // ここからもう少し追加します
  plugins: ['@vuepress/back-to-top'],

# Markdown

markdown-it-markをインストールしてマーカーが引けるようにしてみました

マーカー

npm install markdown-it-mark --save

config.js に追加

 markdown: {
    // #を消す場合(必要に応じて追加して下さい)
    anchor: { permalink: false },
    // [[toc]]を使って目次を表示する時にh2までにする設定(必要に応じて追加して下さい)
    toc: { includeLevel: [1, 2] },
    extendMarkdown: md => {
      md.use(require('markdown-it-mark'))
     }
   },

memo

変更が反映されない場合は　スクリプトを止めて、npm run devして下さい

# スタイルの変更

ページごとにCSSを変更できるようです（試していません💦 ）ドキュメント (opens new window)
ホバー時の色を変えてみましたドキュメント (opens new window)

.vuepress/styles/palette.stylファイルを作る

.
└─ src
　　└─ .vuepress
　　　　└─ styles
     　　　└─ palette.styl

StylusはSassとLessのいいとこどりと言われているCSSメタ言語だそうです

$accentColor = #3eaf7c //#3eaf7cを好きな色に変更(上書きできる)

ここでデフォルトの定数を上書きできます
そのほかのデフォルトの定数

$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961

// layout
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px

// responsive breakpoints
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

# その他

ドキュメント (opens new window) .mdファイルにVueコンポーネントが書ける

# 組み込みコンポーネントを使う

Badge (使い方はチートシートに書いています)

beta beta default theme

# コンポーネントを登録する

.vuepress/components このディレクトリ内のVueコンポーネントは、グローバルコンポーネントとして自動的に登録されます

# カスタマイズ用にデフォルトテーマのコードを見られます

package.json の"scripts"にejectを追加して

"scripts": {
   "dev": "vuepress dev src",
   "build": "vuepress build src",
   "eject": "vuepress eject src"
 },

 npm run eject

.vuepress/themeにデフォルトのテーマがコピーされます

まだまだ内容は？がいっぱいですが、いろいろな意味で感動(オープンソースって凄いな〜) 😭

← 設定チートシート(.md用) →