216 lines
4.9 KiB
Markdown
216 lines
4.9 KiB
Markdown
+++
|
|
date = "2021-07-03"
|
|
tags = ["hugo", "vue"]
|
|
title = "お絵かきの枚数が増えてきたので自動表示してみた"
|
|
slug = "vue-img"
|
|
+++
|
|
|
|
今まで新しい絵を追加するたびに、手動でhtmlを書き換えてたんですが、面倒だなあと思いつつ、しかし、載せるタイミングは操作できるので別にいいかと思っていたのですが、流石に枚数が増えてきたので自動化しました。
|
|
|
|
|
|
```html:src/App.vue
|
|
<template>
|
|
<div class="chara">
|
|
<p>
|
|
<a v-for="(n,index) of cid" :key="n" :href="'/img/c_'+ ( '00' + index ).slice( -2 ) +'.png'">
|
|
<img :src="'/img/c_'+ ( '00' + index ).slice( -2 ) +'.png'" />
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
var c = Number(process.env.VUE_APP_IMGNUMBERC);
|
|
export default {
|
|
data () {
|
|
return {
|
|
cid: c
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
|
|
```js:src/main.js
|
|
import Vue from 'vue'
|
|
import App from './App.vue'
|
|
|
|
new Vue({
|
|
render: h => h(App)
|
|
}).$mount('#app')
|
|
```
|
|
|
|
```js:vue.config.js
|
|
module.exports = {
|
|
configureWebpack: {
|
|
output: {
|
|
filename: '[name].js',
|
|
chunkFilename: '[name].js'
|
|
}
|
|
},
|
|
css: {
|
|
extract: {
|
|
filename: '[name].css',
|
|
chunkFilename: '[name].css'
|
|
},
|
|
},
|
|
}
|
|
```
|
|
|
|
pngは`static/img/c_0x.png`に置くと仮定して、自動化にはgh-actionsなどを活用してください。
|
|
|
|
```sh
|
|
$ ln -s ./static ./src/public
|
|
$ echo VUE_APP_IMGNUMBERC=`ls ./static/img/c_*.png|wc -l` >> .env
|
|
$ yarn add vue
|
|
$ yarn serve
|
|
$ yarn build
|
|
```
|
|
|
|
hugoに対応させるため、以下のファイルを用意します。
|
|
|
|
```sh
|
|
$ mkdir -p static/img
|
|
$ cp -r src/dist/*.js static/img/
|
|
$ cp -r src/dist/*.map static/img/
|
|
```
|
|
|
|
```html:content/img.md
|
|
---
|
|
type: img
|
|
---
|
|
|
|
<div id=app></div>
|
|
<script src=/img/chunk-vendors.js></script>
|
|
<script src=/img/app.js></script>
|
|
```
|
|
|
|
なお、cssを追加したい場合、App.vueの`<style>`に追加してbuild後に`src/dist/*.css`をhugoのdir、ここでは`static/img`ですが、そこにcpします。読み込む必要があるのでapp.jsを読み込むところに追記すればいいでしょう。
|
|
|
|
```
|
|
<link rel="stylesheet" href="/img/app.css" />
|
|
```
|
|
|
|
最後に、`content/`で指定した場所に`single.html`を用意します。なお、contentに書かず、こちらに直接書いたり、`partial`に置いて読み込んでもいいです。ただ、私の場合、なにか追加で載せたいことがあるので、こちらのほうがわかりやすいと思いました。
|
|
|
|
```html:layout/img/single.html
|
|
{{ partial "head.html" . }}
|
|
{{ partial "navbar.html" . }}
|
|
{{ partial "header.html" . }}
|
|
{{ .Content }}
|
|
</div>
|
|
{{ partial "footer.html" . }}
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
```sh
|
|
$ hugo serve
|
|
$ hugo
|
|
```
|
|
|
|
仮にhugoで厳格にやるとしたら、以下のほうがいいですね。
|
|
|
|
```html:layout/img/single.html
|
|
{{ partial "head.html" . }}
|
|
{{ partial "navbar.html" . }}
|
|
{{ partial "header.html" . }}
|
|
{{ partial "vue-img.html" . }}
|
|
{{ .Content }}
|
|
</div>
|
|
{{ partial "footer.html" . }}
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
```html:layout/partials/vue-img.html
|
|
<div id=app></div>
|
|
<link href=/img/app.css rel=preload as=style>
|
|
<link href=/img/app.js rel=preload as=script>
|
|
<link href=/img/chunk-vendors.js rel=preload as=script>
|
|
```
|
|
|
|
```html:content/img.md
|
|
---
|
|
type: img
|
|
---
|
|
|
|
|
|
```
|
|
|
|
gh-actionsは、以下のようにします。なお、envはgitignoreしてもいいですが、clone後に色々と面倒なのでpushして`touch && rm`します。
|
|
|
|
```yml:.github/workflows/gh-pages.yml
|
|
name: github pages
|
|
|
|
on:
|
|
push:
|
|
branches:
|
|
- src
|
|
jobs:
|
|
build-deploy:
|
|
runs-on: ubuntu-18.04
|
|
steps:
|
|
- uses: actions/checkout@master
|
|
- uses: actions/setup-node@v1
|
|
with:
|
|
node-version: 12
|
|
ref: src
|
|
submodules: true
|
|
fetch-depth: 0
|
|
- run: yarn install
|
|
|
|
- name: Setup Hugo
|
|
uses: peaceiris/actions-hugo@v2
|
|
with:
|
|
hugo-version:
|
|
# extended: true
|
|
|
|
- name: Build
|
|
env:
|
|
TZ: "Asia/Tokyo"
|
|
run: |
|
|
touch .env
|
|
rm -r .env
|
|
echo VUE_APP_IMGNUMBERC=`ls ./static/img/c_*.png|wc -l` >> .env
|
|
yarn build
|
|
cp -rf ./dist/*.js ./static/img
|
|
cp -rf ./dist/*.map ./static/img
|
|
hugo
|
|
|
|
- name: Deploy
|
|
uses: peaceiris/actions-gh-pages@v3
|
|
with:
|
|
github_token: ${{ secrets.GITHUB_TOKEN }}
|
|
publish_dir: ./public
|
|
publish_branch: master
|
|
```
|
|
|
|
`.gitignore`も一応。
|
|
|
|
```sh
|
|
src/node_modules
|
|
src/dist
|
|
public
|
|
```
|
|
|
|
vueのindentは[leafOfTree/vim-vue-plugin](https://github.com/leafOfTree/vim-vue-plugin)が便利。
|
|
|
|
```vim:
|
|
Plug 'leafOfTree/vim-vue-plugin'
|
|
|
|
let g:vim_vue_plugin_config = {
|
|
\'syntax': {
|
|
\ 'template': ['html'],
|
|
\ 'script': ['javascript'],
|
|
\ 'style': ['css'],
|
|
\},
|
|
\'full_syntax': [],
|
|
\'initial_indent': [],
|
|
\'attribute': 0,
|
|
\'keyword': 0,
|
|
\'foldexpr': 0,
|
|
\'debug': 0,
|
|
\}
|
|
```
|