タグに自動で色がつくようにしました。なお、同一のタグは同一の色がつくようになっています
タグのコンポーネントはこんな感じ
<template>
<b-badge pill v-bind:style="'background-color : #'+ string_to_utf8_hex_string(tag).substr(1,6) + ';'" class="mr-2" v-bind:to="to">{{tag}}</b-badge>
</template>
<script>
export default {
props:["tag","to"],
methods : {
string_to_utf8_hex_string : function(text){
var bytes1 = this.string_to_utf8_bytes(text);
var hex_str1 = this.bytes_to_hex_string(bytes1);
return hex_str1;
},
string_to_utf8_bytes : function(text){
var result = [];
if (text == null)
return result;
for (var i = 0; i < text.length; i++) {
var c = text.charCodeAt(i);
if (c <= 0x7f) {
result.push(c);
} else if (c <= 0x07ff) {
result.push(((c >> 6) & 0x1F) | 0xC0);
result.push((c & 0x3F) | 0x80);
} else {
result.push(((c >> 12) & 0x0F) | 0xE0);
result.push(((c >> 6) & 0x3F) | 0x80);
result.push((c & 0x3F) | 0x80);
}
}
return result;
},
bytes_to_hex_string : function(bytes){
var result = "";
for (var i = 0; i < bytes.length; i++) {
result += this.byte_to_hex(bytes[i]);
}
return result;
},
byte_to_hex : function(byte_num){
var digits = (byte_num).toString(16);
if (byte_num < 16) return '0' + digits;
return digits;
}
}
}
</script>
この後はワードクラウドとか作りたい
Nuxt3+@nuxt/contentでブログを作ってcontentをgit submoduleで別リポジトリ管理にする
2023年6月14日(水) 12時57分6秒 | 303 viewmicroCMSにプリセットで入っているimgixを利用してお手軽に動的OGPを設定する
2021年9月6日(月) 14時33分9秒 | 226 viewLIFF(LINE)ブラウザでwindow.prompt()が期待する動作をしない
2021年10月16日(土) 14時22分50秒 | 140 view記事が公開された瞬間にツイートする
2021年9月20日(月) 16時51分57秒 | 57 viewtwitter埋め込み最適化テスト
2021年10月5日(火) 13時48分18秒 | 18 view