hugo/content/blog/2021-07-03-vue.md

+++ date = "2021-07-03" tags = ["hugo", "vue"] title = "お絵かきの枚数が増えてきたので自動表示してみた" slug = "vue-img" +++

今まで新しい絵を追加するたびに、手動でhtmlを書き換えてたんですが、面倒だなあと思いつつ、しかし、載せるタイミングは操作できるので別にいいかと思っていたのですが、流石に枚数が増えてきたので自動化しました。

<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>

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

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などを活用してください。

$ 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に対応させるため、以下のファイルを用意します。

$ mkdir -p static/img
$ cp -r src/dist/*.js static/img/ 
$ cp -r src/dist/*.map static/img/

---
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に置いて読み込んでもいいです。ただ、私の場合、なにか追加で載せたいことがあるので、こちらのほうがわかりやすいと思いました。

{{ partial "head.html" . }}
{{ partial "navbar.html" . }}
{{ partial "header.html" . }}
		{{ .Content }}
		</div>
		{{ partial "footer.html" . }}
	</body>
</html>

$ hugo serve
$ hugo

仮にhugoで厳格にやるとしたら、以下のほうがいいですね。

{{ partial "head.html" . }}
{{ partial "navbar.html" . }}
{{ partial "header.html" . }}
{{ partial "vue-img.html" . }}
		{{ .Content }}
		</div>
		{{ partial "footer.html" . }}
	</body>
</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>

---
type: img
---

![](/img/特別読み込みたい.png)

gh-actionsは、以下のようにします。なお、envはgitignoreしてもいいですが、clone後に色々と面倒なのでpushしてtouch && rmします。

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も一応。

src/node_modules
src/dist
public

vueのindentはleafOfTree/vim-vue-pluginが便利。

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,
      \}