VuePress のテーマのソースコードを吐き出す
VuePress のテーマのソースコードを吐き出す
デフォルトのテーマをいじっていい感じにしたい。
参考: Default Theme Config | VuePress
vuepress eject で、デフォルトのテーマのソースコードを吐き出せる。
vuepress eject srcでsrc以下に吐き出す。
実際にやってみた。
できなかった
vuepress eject src と打てばできるだろう。
$ vuepress eject src
(node:90682) UnhandledPromiseRejectionWarning: TypeError: cli.command(...).option(...).option(...).option(...).option(...).option(...).option(...).option(...).option(...).action is not a function
at module.exports (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/lib/registerCoreCommands.js:26:6)
at beforeParse (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/vuepress.js:16:5)
at CLI (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/lib/util.js:22:24)
at Object.<anonymous> (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/vuepress.js:12:1)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10) at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:612:3
(node:90682) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not
handled with .catch(). (rejection id: 3)
(node:90682) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
できない・・
vuepress コマンド自体で同じエラーが出た。
$ vuepress
(node:95290) UnhandledPromiseRejectionWarning: TypeError: cli.command(...).option(...).option(...).option(...).option(...).option(...).option(...).option(...).option(...).action is not a function
at module.exports (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/lib/registerCoreCommands.js:26:6)
at beforeParse (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/vuepress.js:16:5)
at CLI (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/lib/util.js:22:24)
at Object.<anonymous> (/Users/xxxxx/.config/yarn/global/node_modules/vuepress/vuepress.js:12:1)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:612:3
(node:95290) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:95290) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
~~これは、そもそもこうだったのかよくわからない。(今もこのままです。)~~
グローバルにインストールしていないので、動かないのは当然だった。。
// package.json
{
...
"devDependencies": {
...
"vuepress": "^1.0.0-alpha.32"
}
}
できた
以下の方法にやり方を変えて、とりあえずデフォルトのテーマのソースコードを吐き出せました。
package.json
package.json に、vuepress eject src を追加。
npm run devで、vuepress dev srcが動いているから動くだろうと思った。
// package.json
{
...
"scripts": {
"dev": "vuepress dev src",
"build": "vuepress build src",
"eject": "vuepress eject src"
},
...
}
npm run
$ npm run
Scripts available in hene via `npm run-script`:
dev
vuepress dev src
build
vuepress build src
eject
vuepress eject src
vurepress eject src
実行する。
$ npm run eject
> [email protected] eject /Users/xxxxx/hene
> vuepress eject src
success Copied default theme into /Users/xxxxx/hene/src/.vuepress/theme.
src の中に吐き出せました。
吐き出したソースコード
$ % pwd
/Users/xxxxx/hene/src/.vuepress/theme
$ tree
.
├── 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
├── global-components
│ └── Badge.vue
├── index.js
├── layouts
│ ├── 404.vue
│ └── Layout.vue
├── noopModule.js
├── styles
│ ├── arrow.styl
│ ├── code.styl
│ ├── custom-blocks.styl
│ ├── mobile.styl
│ ├── theme.styl
│ ├── toc.styl
│ └── wrapper.styl
└── util
└── index.js
5 directories, 26 files
ついでに src/.vuepress/styles/palette.styl から src/.vuepress/theme/styles/palette.styl に移しておいた。
// src/.vuepress/theme/styles/palette.styl
// colors
$accentColor = #FF6E00
$textColor = #2C3E50
$borderColor = #EAECEF
$codeBgColor = #282C34
$arrowBgColor = #FBFBF0
