【Hexo】画像を使い回す方法

はじめに

Hexoで画像を表示する方法を検索するとよく出てくるのが
_config.ymlpost_asset_folder: trueとすることで、_posts配下に記事名と同じ名前のフォルダを作成して、その中に画像を入れて、
記事中では

1
{% asset_img hoge.jpeg %}

のように使う方法ですよね

しかし!

これだと同じ画像を使い回しできなくて不便ですよね、、

なんと調べてみると画像を使い回せる方法を見つけたのでメモしておきます

手順

まず、sourceフォルダの直下にimagesフォルダを作成します
で、その中に画像を入れます

記事中では![](/images/hoge.jpeg)ってやるだけです

簡単すぎワロタ

参考

https://hexo.io/docs/asset-folders.html

【読書メモ】リファクタリング(第2版): 既存のコードを安全に改善する

はじめに

リファクタリング(第2版): 既存のコードを安全に改善する
という書籍を読み始めました

せっかくなので要点をメモしておきます

【Git】忘れやすいgitコマンドまとめ

はじめに

個人的に忘れやすい git コマンドをメモしておきます

【随時更新】個人的にJavaScriptでよく使う記法まとめ

個人的にJavaScriptでよく使う記法をまとめました

【Vue.js】要素の枠線をマウスで掴んでサイズ変更する

はじめに

要素の枠線をマウスで掴んでサイズ変更するやり方をメモします

JavaScript でクラスを追加・削除する方法

JavaScript でクラスを追加・削除する方法です

1
2
3
const item = document.querySelector('.hoge')
item.classList.remove('hoge')
item.classList.add('fuga')

以上です

【JavaScript】CSVをインポートするコード

はじめに

JavaScript で CSV を取り込むコードです

CSV 取り込みの文字をクリックでファイル選択するか、ドラッグアンドドロップでもできます。

JavaScriptでのダブルクリック処理の実装方法

コード

1
2
3
4
5
data: {
delay: 500,
clicks: 0,
timer: null
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
click_one(){
this.clicks++
if(this.clicks === 1) {
var self = this
this.timer = setTimeout(function() {
// ここにシングルクリック書処理
self.clicks = 0
}, this.delay);
} else{
clearTimeout(this.timer);
// ここにダブルクリックの処理
this.clicks = 0;
}
},

参考

https://stackoverflow.com/questions/41303982/vue-js-how-to-handle-click-and-dblclick-events-on-same-element/56046910

【Vue.js】無限スクロール処理

ライブラリ公式ページ

https://peachscript.github.io/vue-infinite-loading/

ライブラリインストール

1
npm install vue-infinite-loading -S

コンポーネント登録

main.js

1
2
3
4
5
6
7
import InfiniteLoading from 'vue-infinite-loading'
Vue.use(InfiniteLoading, {
slots: {
noResults: '',
noMore: ''
}
})

HTML コード

1
2
3
4
5
6
<template>
<div>
<div v-for="hoge in hoge_list"></div>
<infinite-loading ref="infiniteLoading" spinner="bubbles" v-on:infinite="infiniteHandler"></infinite-loading>
</div>
</template>

JavaScript コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
infiniteHandler() {
if (/* 無限するロールする条件 */) {
this.get_news_list();
} else {
console.log("無限スクロール完了")
this.$refs.infiniteLoading.stateChanger.complete();
},
},

async get_news_list() {
const params = {
page: this.page,
};
const res = await this.gm_api_get("news", params)
this.page += 1;
this.$refs.infiniteLoading.stateChanger.loaded();
}

this.$refs.infiniteLoading.stateChanger.reset();で初期化できます

【Vue】inputのv-modelの値を0以上に制限する方法

input の v-model の値を 0 以上に制限する方法をメモします

filter だと表示上は制限できますが実際の値は制限できないんですよね

コツとしては v-model を使うのではなく、:value@change に分けることですね

分かってしまえば簡単ですが微妙にハマったので一応メモしておきます

1
2
3
4
<div>
<label>test label</label>
<input type="number" :value="hoge" @change="min($event.target.value)" />
</div>
1
2
3
4
5
6
7
8
methods: {
min(val) {
if (val < 0) {
this.hoge = 0;
} else {
this.hoge = val;
}
},
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×