VuePressの基礎基礎メモ2
VuePressのメモです。
VuePressの基礎基礎の続きです。
sass(scss)を使ってみる
以下をインストール。 あとはVueコンポーネントのを<style lang=``"``scss``"``>に変更するだけ。
yarn add -D sass-loader node-sass
pugを使ってみる
私はpugを利用しませんが、利用する場合は以下をインストール。 あとはVueコンポーネントのを<template lang="pug">に変更するだけ。
yarn add -D pug pug-plain-loader
babelを使ってみる
VuepressではデフォルトでBubleを利用しています。 Bubleの場合asyncなどが利用できないのでbabelをインストールしてみたいと思います。
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-syntax-dynamic-import
config.jsに以下を追加。
module.exports = {
chainWebpack: config => {
const jsRule = config.module.rule('js')
jsRule.uses.delete('buble-loader')
jsRule.use('babel-loader').loader('babel-loader')
}
}
.babelrcを追加
{
"presets": [
["env", {
"targets": {
"browsers": ["ie 10", "safari >= 7"]
},
"useBuiltIns": true
}]
],
"plugins": ["syntax-dynamic-import"]
}
テンプレート構文を使ってみる
markdownファイルの中でもテンプレート構文を利用することができます。
# Hello VuePress
{{1 + 1}}
テンプレート構文をエスケープしてみる
::: v-pre
{{1 + 1}}
:::
ページの情報を取得してみる
$pageで開いているページの情報を取得することができます。 markdownファイルからも、Vueコンポーネントからも利用できます。
# Hello VuePress
{{ $page.title }}
heroイメージを表示してみる
docs/.vuepress/public配下に画像を配置します。
frontmatterにパスを定義します。 例) index.md
---
title: Home Title
description: Home description
home: true
heroText: Springfield Dim Sum
heroImage: /hero.png
---
Custom Themeを利用してみる
まずはデフォルトのテーマファイルを出力し、それを雛形に変更していく。 以下のコマンドを実行。
vuepress eject docs
vuepressをglobalにインストールしていなければ、以下。
yarn run vuepress eject docs
.vuepress配下にthemeディレクトリが作成されます。
.vuepress
└── theme
├── LICENSE
├── components
│ ├── AlgoliaSearchBox.vue
│ ├── DropdownLink.vue
│ ├── DropdownTransition.vue
│ ├── Home.vue // ホーム画面用
│ ├── NavLink.vue
│ ├── NavLinks.vue
│ ├── Navbar.vue
│ ├── Page.vue // ページ用
│ ├── Sidebar.vue
│ ├── SidebarButton.vue
│ ├── SidebarGroup.vue
│ ├── SidebarLink.vue
│ └── SidebarLinks.vue
├── global-components
│ └── Badge.vue
├── index.js
├── layouts
│ ├── 404.vue
│ └── Layout.vue // ベースレイアウト用
├── noopModule.js
├── styles
└── util
└── index.js
あとは適宜修正するだけ。
Google Analyticsを入れてみる
yarn add -D @vuepress/plugin-google-analytics
config.js
plugins: {
'@vuepress/google-analytics': {
ga: 'UA-XXXXXXXX-X'
}
}
フォントを変更してみる
以下のような感じになればいいので、config.jsのheadで読み込む。
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">
config.js
module.exports = {
head: [
[
'link',
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet'
}
]
]
};
docs/.vuepress/theme/styles/index.stylのfont-familyを変更する。
body
font-family "Nico Moji", sans-serif
記事一覧のリストを作ってみる
記事一覧を作成する場合は$site.pagesの情報を利用する。 データはこんな感じ。
[{
"title": "Home",
"frontmatter": {
"title": "Home",
"description": "Homeページです",
"home": true,
"heroText": "ヒーロー画像を表示！",
"heroImage": "/hero.png",
"meta": [{"og:title": "og title Home page"}, {"og:desciption": "og Home description"}, {"og:image": "https//test.jp/thisog.jpg"}]
},
"regularPath": "/",
"relativePath": "index.md",
"key": "v-de1d3a26",
"path": "/"
}, {"title": "Page1",
"frontmatter": {
"title": "Page1",
"description": "Page1だよ",
"date": "2019-01-22T00:00:00.000Z",
"meta": null
},
"regularPath": "/blog/page2.html",
"relativePath": "blog/page2.md",
"key": "v-613ff918",
"path": "/blog/page2.html"
},
...
Home画面のデータも入っているので、pathが/blog/で始まるものだけ記事データとしてフィルターする。
記事のcomponentはこんな感じ。
<template>
<section>
<article v-for="article in articles">
<h2>{{article.title}}</h2>
<p>{{article.frontmatter.description}}</p>
</article>
</section>
</template>
<script>
export default {
name: "Articles",
props: ['pages'],
computed: {
articles() {
return this.pages.filter(d => d.path.startsWith('/blog/'))
}
}
}
</script>
<style scoped>
</style>
ページに並び替えに利用する日付を設定する。 ページのfrontmatterにdate: YYYY-MM-DDのような感じで設定する。 この情報を利用して記事一覧をソートする。
---
title: Sample
date: 2019-01-21
---
少し整えるとこんな感じになる。
