CODES

import { createApp } from 'vue'
import App from './App.vue'
import dayjs from 'dayjs';

const app = createApp(App);
app.config.globalProperties.$dayjs = dayjs
app.mount('#app')

import { createApp } from 'vue'
import App from './App.vue'
import routes from './routes'
import { store } from './stores/'

const app = createApp(App);
app.use(routes);
app.use(store);
app.mount('#app')

docker run --detach -it --restart=always --name=dropbox -e "POLLING_INTERVAL=20" -v /home/rancher/Dropbox:/opt/dropbox/Dropbox otherguy/dropbox:latest

<template>
  <p id="exscript">
    <ins class="banner"></ins>
  </p>
</template>
<script>
  export default {
    mounted() {
      let scriptEl = document.createElement('script')
      scriptEl.setAttribute('src', 'スクリプトのURL')
      document.getElementById('exscript').appendChild(scriptEl)
    }
  }
</script>

{
  "name": "hoge",
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome dev",
    "lint": "vue-cli-service lint",
    "deploy": "gridsome build && netlify deploy --dir=dist/ -p"
  }
}

<template>
  // OK
  <p v-if="!$route.params.page">1〜{{perPage}}件</p>

  // NG
  <p v-if="$route.params.page === null">1〜{{perPage}}件</p>

  // NG
  <p v-if="$route.params.page === 'undefined'">1〜{{perPage}}件</p>
</template>

plugins: [
  {
    use: 'gridsome-plugin-matomo',
    options: {
      host: 'matomoのアドレス', // https:から書くこと
      siteId: サイトID
    }
  }
]

export default function (Vue, { router, head, isClient }) {
  // 省略

  const gIndex = head.meta.findIndex(e => e.name === 'generator')
  if (gIndex !== -1) head.meta.splice(gIndex, 1)
}

yarn add @gridsome/transformer-remark

// ゾーンIDを取得
curl -s -X GET "https://api.cloudflare.com/client/v4/zones?name=ドメイン名&status=active&page=1&per_page=20&order=status&direction=desc&match=all" \
-H "X-Auth-Email: 会員メールアドレス" \
-H "X-Auth-Key: APIKey" \
-H "Content-Type: application/json" 

// キャッシュクリア
curl -X DELETE "https://api.cloudflare.com/client/v4/zones/ゾーンID/purge_cache" \
     -H "Content-Type:application/json" \
     -H "X-Auth-Email: 会員メールアドレス" \
     -H "X-Auth-Key: APIKey" \
     --data '{"files":["削除するファイルパス"]}'

window.navigator.serviceWorker.getRegistrations()
.then(registrations => {
  for(let registration of registrations) {
    registration.unregister();
  }
});
window.location.reload(true); 

<div class="overflow-y-scroll">
  <select name="sbox" id="sbox">
    <option value="">iOS Safriでは、オプション項目の文字数が横幅を超える文字数だと、表示上は見えてなくても背景で横幅が突き抜けてる</option>
  </select>
</div>

<style>
.overflow-y-scroll{
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.overflow-y-scroll select{
  width:100%;
  overflow: hidden; // これがないと、selectのoverflow-yの影響で横スクロールが走る
}
</style>

module.exports = {    
  chainWebpack: config => {
    config
      .plugin('html-inline-source')
      .use(require('html-webpack-inline-source-plugin'))
    config.plugin('html').tap(args => {
      args[0].inlineSource = '^(/css/.+\\.css)'
      return args
    })
  }
}

{
  "name": "サイト名",
  "short_name": "短縮サイト名",
  "icons": [
    {
      "src": "/img/icons/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#FFF"
}

image: node:latest

pages:
  stage: deploy
  only:
    - master
  before_script:
    - 'yarn config set cache-folder .yarn'
    - 'yarn install'
  script:
    - 'yarn build'
    - 'mv public public_org && mv dist public'
  artifacts:
    paths:
      - public

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js', // 必須パラメータ
      title: 'ページタイトル',
    }
  }
}

// langは表示中の言語。config.tomlで設定する
// 直後の数字は桁数

{{lang.NumFmt 0 .Params.price}}

h1{
  display: flex;
  justify-content: center;
}

# .Hugo.Environmentで取れる。
# 初期は"development"
# 「hugo server  --environment 文字列」で指定もできる

# hugo server環境下だった変換したcssをlink hrefでリアルタイムで読む
{{- if eq .Hugo.Environment "development" }}{{- $style := resources.Get "sass/main.scss" | toCSS }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
{{else}}
# hugoコマンドで出力するときは、ローカルで変換したcssの方を読む
<style amp-custom>
    {{readFile "/assets/sass/main.css" | safeCSS}}
</style>
{{end}}

# hugo server時はreadFileで読んだファイルはリアルタイムで読み直してくれない
# この方式にすればhugo serverでプレビューしながらSCSSでコーディングができる

# lastestは使うバージョンに変更可能
image: registry.gitlab.com/pages/hugo:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

# masterブランチ以外で実行されるテストコマンド。と行ってもhugoコマンドを実行しているだけ
# 記事追加でブランチを切る場合（Netlify CMSなど）は無駄にPipeline Quataを消費するからtestは削除するか、開発用のブランチを指定したほうがいい
test:
  script:
  - hugo
  except:
  - master

# ここで公開処理。hugoコマンドを実行して、できたpublicディレクトリを公開しているだけ
pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  only:
  - master

{{ $posts := (where (where .Site.Pages "Section" "topics") ".Params.slug" "!=" .Params.slug) }}

import Dexie from 'dexie';

const db = new Dexie('testDB');

async noteInit(){
  await db.delete();
  await db.version(1).stores({
    notes: 'fileName, noteTxt',
  });
  await db.open()
},

{{ .Params.price | lang.NumFmt 0}}

{{- if .IsTranslated -}}
{{ range .Translations }}
<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ .Language.LanguageName }}">
{{- end -}}    
{{- end -}}

{{ if .IsTranslated }}
<div class="translated__box">
  <ul class="tab__btn">
    <li>
      <span class="tab__btn--item current-lang">{{ .Site.Language.LanguageName }}</span>
    </li>
  {{ range .Translations }}
    <li>
      <a class="tab__btn--item" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
    </li>
  {{end}}
  </ul>
</div>
{{end}}

---
title: Categories
outputs:
  - html
  - json
---

// page.vue (呼び出し元)
<Btn :to="'/'" :className="{active: true}">実行する！</btn>

// btn.vue (受け取り側)
<template>
  <router-link class="btn" :class="className" :to="to"><slot></slot></router-link>
</template>

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: "/index.html",
      name: "index",
      redirect: '/',
    },
    {
      path: "/",
      name: "Home",
      component: () => import( './views/Home/Index.vue'),
    },
    {
      path: "/:categories(code|note|author)",
      name: "CategoryTop",
      component: () => import( './views/Categories/Detail.vue'),
    }
  ]
})

buildImgProxyUrl: function(url){
  const crypto = require('crypto');
  const key = 'CAMO_KEY'; // 自分のものに置き換える
  const hmac = crypto.createHmac('sha1', key);
  const convUrl = hmac.update(url);
  const digest = hmac.digest('hex')
  const result = 'サーバーのURL' + digest + '?url=' + encodeURIComponent(url)  // 自分のものに置き換える
  return result;
}

for(let [key, val] of Object.entries(testObj)){
  this[key] = val
}