vuepress入門詳細(六)vuepressユーティリティプラグイン
20648 ワード
vuepressユーティリティプラグイン
これらのプラグインはすべて公式に提供されており、一部のプラグインは私たちが実用的なデフォルトのテーマの時にすでにインストールされており、これ以上単独でインストールする必要はありません.一部のプラグインは私たちが単独でインストールする必要があります.具体的には以下の紹介をご覧ください
デフォルトのトピックに付属するプラグイン
:::warningデフォルトトピックに付属のプラグインで、直接構成して使用できます.デフォルトトピックを使用していない場合は、自分でダウンロードしてインストールする必要があります.::
メニューハイライト
名前:@vuepress/plugin-active-header-links効果:ページスクロール時にサイドバーリンクのプラグインを自動的にアクティブにします.効果は右の内容がスクロールしている間に、どこを見たか、左側のメニューが現在見ているディレクトリを自動的にハイライト表示します.
インストール
インストールなし
yarn add -D @vuepress/plugin-active-header-links
# OR npm install -D @vuepress/plugin-active-header-links
コンフィギュレーション
module.exports = {
plugins: {
'@vuepress/active-header-links':{
sidebarLinkSelector: '.sidebar-link',
headerAnchorSelector: '.header-anchor'
}
}
}
back-to-top
名称:@vuepress/plugin-back-to-top効果:文章が下を見たとき、アイコンをクリックすると上部に戻ります
インストール
インストールなし
yarn add -D @vuepress/plugin-back-to-top
# OR npm install -D @vuepress/plugin-back-to-top
コンフィギュレーション
module.exports = {
plugins: {
'@vuepress/back-to-top': true
}
}
last-updated
名前:@vuepress/plugin-last-updated効果:文章の末尾に文章の更新日が自動的に表示されます.テーマはインストールされません.
コンフィギュレーション
module.exports = {
plugins: {
'@vuepress/last-updated': true
}
}
デフォルトでは、このプラグインはページごとに13ビットのタイムスタンプを生成し、transformerに転送して任意のフォーマットに変換することができます.例:
const moment = require('moment');
module.exports = {
plugins: {
'@vuepress/last-updated':{
transformer: (timestamp, lang) => {
// moment
const moment = require('moment')
moment.locale(lang)
return moment(timestamp).fromNow()
}
}
}
}
:::warning lastUpdatedはgitベースであるため、gitベースのプロジェクトでのみ有効にできます.また、git commitから使用されるタイムスタンプは、指定されたページの最初のコミット後にのみ表示され、ページの後続のコミット変更時にのみ更新されます.(私のプロジェクトはgitに基づいていないので、このプロジェクトを使用していません):
進捗バー
名前:@vuepress/nprogress効果:新しいページを開くと進捗バーが表示されます:::tipデフォルトトピックはインストールせず、デフォルト構成はtrueです.進捗バー機能がほしい場合は、何もしなくてもいいです.プログレスバー機能を閉じるにはfalse::
コンフィギュレーション
module.exports = {
plugins: {
'@vuepress/nprogress':false // true， false
}
}
グローバル検索
名前:@vuepress/plugin-search効果:ナビゲーションバーでグローバル検索
インストール
デフォルトのトピックはインストールされていません
yarn add -D @vuepress/plugin-search
# OR npm install -D @vuepress/plugin-search
コンフィギュレーション
module.exports = {
plugins: {
'@vuepress/search': {
search: true, // false
searchMaxSuggestions: 10 // 5
}
}
}
Google analyticsプラグイン
名称:@vuepress/plugin-google-analytics効果:ウェブサイトのトラフィックを統計し、ウェブサイトのいくつかの機能を分析します::warningこの機能を使用するには、Googleアカウントが必要で、Google analyticsを作成します
プロジェクトがGoogle analyticsプラグインを使用している場合は、npmではなくYarnを使用してすべての依存をインストールすることをお勧めします.この場合、npmは誤った依存ツリーを生成するからです.::
インストール
個別のインストールが必要
yarn add -D @vuepress/plugin-google-analytics
コンフィギュレーション
module.exports = {
'@vuepress/google-analytics': {
'ga': 'UA-166594741-1' // UA-00000000-0
},
}
PWA
PWAとは
PWA(フルネーム:Progressive Web App)つまり、これは漸進的なWebアプリケーションです.主な特徴:
名前:@vuepress/plugin-pwa
効果:Webコンテンツが更新されたときに更新ボタンがあります.ページをデスクトップに保存して、appと同じようにすることができます.具体的に見ると
インストール
個別のインストールが必要
yarn add -D @vuepress/plugin-pwa
# OR npm install -D @vuepress/plugin-pwa
コンフィギュレーション
module.exports = {
'@vuepress/pwa': {
serviceWorker: true,
updatePopup: {
message: " ",
buttonText: " "
}
}
}
:::tipはあなたのウェブサイトがPWAと完全に互換性があるように、あなたは必要です:
これは、VuePressにおいてPWAと完全に互換性がある例です.
//head href .vuepress public
module.exports = {
head: [
['link', { rel: 'icon', href: '/logo.png' }],
['link', { rel: 'manifest', href: '/manifest.json' }],
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
['meta', { name: 'msapplication-TileColor', content: '#000000' }]
],
plugins: {
'@vuepress/pwa': {
serviceWorker: true,
updatePopup: {
message: " ",
buttonText: " "
}
},
}
}
以前のテスト用のmanifest.jsonファイルテンプレートは次のとおりです.
{
"name": " ",
"short_name": " ",
"start_url": "index.html",
"display": "standalone",
"background_color": "#3711f3",
"description": " ",
"theme_color": "red",
"icons": [
{
"src": "./image/pwalogo.png",
"sizes": "144x144",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "web",
"url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
},
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
}
]
}
:::warning