池の鯉も大海を知らず

プログラミングとか作品制作とか

はてなブログのカスタムHTMLのパーツをGitHubに移植、GitHubPagesを介して表示するようにした

プログラミング JavaScript

ランキング参加中
プログラミング

題名の通り。

こういう「自分でHTMLを書ける機能」って自分で自由にかけるのは嬉しいけど、管理等面倒ですよね。

このブログにもいくつかカスタムHTMLで作成している部分があります。

（全然更新してないブログなのにそういうとこはこだわる）

カスタムパーツの紹介

カスタムパーツその１：ブログタイトル下のカテゴリメニュー

<nav id="header-nav">
   <ul>
       <li><a href="https://izumiikezaki.hatenablog.com/archive/category/3DCG">
           <i class="fas fa-cube"></i>
           <span class="nav-text">3DCG</span></a></li>
       <li><a href="https://izumiikezaki.hatenablog.com/archive/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">
            <i class="fas fa-keyboard"></i>
            <span class="nav-text">プログラミング</span></a></li>
        <li><a href="https://izumiikezaki.hatenablog.com/archive/category/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">
            <i class="fas fa-pencil-ruler"></i>
            <span class="nav-text">デザイン</span></a></li> 
        <li><a href="https://izumiikezaki.hatenablog.com/archive/category/%E6%97%A5%E8%A8%98">
            <i class="fas fa-book"></i>
            <span class="nav-text">日記</span></a></li>
    </ul>
</nav>
<style>
    #header-nav{
        display:block;
        //background-color:red;
        max-width:800px;
        margin:auto;
    }
    @media screen and (max-width: 480px) {
        .nav-text{
            display:none;
        }
    }
    
        
    #header-nav ul{
        list-style-type:none;
        display:flex;
        justify-content: space-evenly;
        padding:0;
    }
    #header-nav ul li{
        
    }
    
</style>

カスタムパーツその２：サイドバー横の「今週は〇週目です」

2021年ごろに設置したなあ

一年を大事に生きようと思って今が第〇週かをいつでも確認しようと設置しました。

全〇週の表記がバグってるからこれも直さなきゃな…

<p>
  今週は<span id="izumi-year"></span>年の第<span id="izumi-week-counter"></span>週目です🐠<br/>
  <small>(全<span id="izumi-week-max"></span>週)</small>
  </p>

スクリプト部分はフッタ部に記載してます。

<script>
    dayjs.extend(window.dayjs_plugin_isoWeek)
    const now  = dayjs();
    const end_of_year = now.endOf('year');
    document.getElementById("izumi-year").innerHTML=now.year();
    document.getElementById("izumi-week-counter").innerHTML=now.isoWeek();
    document.getElementById("izumi-week-max").innerHTML=end_of_year.isoWeek();
</script>

カスタムパーツその３：サイドバー横のカテゴリ欄ハイライト

これはhtmlではないですがデザインcssに記載しています。

/*カテゴリの色変更*/
a.category-3DCG{
    background-color:#002030;
    color:white;
}
a.category-プログラミング{
    background-color:#002030;
    color:white;
}
a.category-デザイン{
    background-color:#002030;
    color:white;
}
a.category-日記{
    background-color:#002030;
    color:white;
}

書き換え後

リポジトリはここ github.com

カスタムパーツその１

ヘッダーバーをvueコンポーネントとして書き換えてみました（vueである必要ないな…）

<template>
  <nav id="header-nav">
    <ul>
      <li>
        <a href="https://izumiikezaki.hatenablog.com/archive/category/3DCG">
          <i class="fas fa-cube"></i>
          <span class="nav-text">3DCG</span></a
        >
      </li>
      <li>
        <a
          href="https://izumiikezaki.hatenablog.com/archive/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0"
        >
          <i class="fas fa-keyboard"></i>
          <span class="nav-text">プログラミング</span></a
        >
      </li>
      <li>
        <a
          href="https://izumiikezaki.hatenablog.com/archive/category/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3"
        >
          <i class="fas fa-pencil-ruler"></i>
          <span class="nav-text">デザイン</span></a
        >
      </li>
      <li>
        <a
          href="https://izumiikezaki.hatenablog.com/archive/category/%E6%97%A5%E8%A8%98"
        >
          <i class="fas fa-book"></i>
          <span class="nav-text">日記</span></a
        >
      </li>
    </ul>
  </nav>
</template>
<style lang="scss">
#header-nav {
  display: block;
  max-width: 800px;
  margin: auto;
  ul {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    padding: 0;
  }
}
@media screen and (max-width: 480px) {
  .nav-text {
    display: none;
  }
}
</style>

カスタムパーツその２

こちらもvueコンポーネントを使用しました。

個人的にvueに慣れてるのでgetElementedBy使わないで書けるのはとても楽…

あと全○○週の計算が間違ってる問題も雑に対処。

<template>
  <p>
    今週は{{ year }}年の第{{ weekCount }}週目です🐠<br />
    <small>(全{{ weekMax }}週)</small>
  </p>
</template>
<script>
import dayjs from "dayjs";
import isoWeek from "dayjs/plugin/isoWeek";
dayjs.extend(isoWeek);
export default {
  computed: {
    now() {
      return dayjs();
    },
    year() {
      return this.now.year();
    },
    weekCount() {
      return this.now.isoWeek();
    },
    weekMax() {
      const weekNumOfLastDay = this.now.endOf("years").isoWeek();
      const weekNumOf1WeefBefore = this.now
        .endOf("years")
        .subtract(1, "week")
        .isoWeek();
      // 1年の最後の日が来年の1週目となる場合があるので雑に対応
      return Math.max(weekNumOfLastDay, weekNumOf1WeefBefore);
    },
  },
};
</script>

カスタムパーツその３

せっかくなんでsassを使って書きかえました。

/*カテゴリの色変更*/
a.category- {

  &3DCG,
  &プログラミング,
  &デザイン,
  &日記 {
    background-color: #002030;
    color: white;
  }
}

vite.config.jsで書き出し設定を書く

今回はscript.jsとstyle.cssを書きだすので、その設定をここに記載します。

これをgithubpagesをつかってホスティングすることで、はてなブログに読み込ませることができます

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: "/ikz-hateblo-sustom/",
  build: {
    outDir: './dist/',
    rollupOptions: {
      input: ['src/app.js'],
      output: {
        entryFileNames: 'script.js',
        assetFileNames: 'style.css',
      },
    },
  },
})

readmeに書いてある通り、htmlを設置したい該当箇所にそれぞれ<div id="app-sideblock"></div>と<div id="app-sideblock"></div>を書き、 ヘッダーかどこかに

<link rel="stylesheet" href="https://izumiikezaki.github.io/ikz-hateblo-custom/style.css">
<script src="https://izumiikezaki.github.io/ikz-hateblo-custom/script.js"></script>

を描くことで呼び出せます

おわりに

こういう実装をパパっとできたのも自身の成長だなあと感じました。

プログラミングたのしいな～～～