markdown のテンプレートを作る

この記事を書いた動機 hugoで書いているとき、以下のようにして、フォルダごとに分けることで、記事を管理しています。それで、それらフォルダ内に、新しく記事をhugo newするときに、デフォルトで生成される記事のテンプレートを異なるものにして、管理できるらしいということがわかったので、メモを自分用に取るだけです。 やり方 hugo で作業しているルートディレクトリの “archetypes” というフォルダに、“content” 配下にあるフォルダ構造を意識して、[フォルダ名].mdのようにして、ファイルを作成し、テンプレートを作る。以下に、フォルダ構造やテンプレートファイルのマークダウンの例を一応乗せることにする。 archetypes archetypes ├── default.md ├── images.md └── posts.md content content ├── posts └── images posts.md +++ title = '{{ replace .File.ContentBaseName "-" " " | title }}' date = {{ .Date }} draft = true ShowToc = true +++ images.md +++ title = '{{ replace .File.ContentBaseName "-" " " | title }}' date = {{ .Date }} draft = true ShowToc = false +++ 補足(2025年5月8日) このページは、まだ未完成です。。。 nicotalk&キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html (2024年5月16日) ├── archetypes │ ├── Images │ │ └── MMD.md │ ├── default.md │ ├── posts.md │ └── think.md Leaf bundles hugo new --kind Images/MMD content/Images/MMD/DIYUSI.md archetypes/Images/MMD.md +++ date = '{{ .Date }}' draft = false title = '{{ replace .File.ContentBaseName "-" " " | title }}' +++ ## data \{\{<Images/MMD/Data folder="\{\{.File.ContentBaseName}}">}} ## Images and Videos \{\{<Images/MMD/ShowImageAndVideo folder="\{\{.File.ContentBaseName}}">}} https://gohugo.io/content-management/archetypes/#specify-archetype ...

March 16, 2025

リソースを追加する

このページは、まだ未完成です。。。 nicotalk&キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html (2024年5月16日) 注意点 大文字小文字に気をつけること ファイル名であっても、その違いだけですぐ動かなくなる テクスチャの追加 テクスチャが正しく認識されていないときは、黒と紫のチェック柄が表示されてしまう。 言語ファイルの追加 言語ファイルがないと、正しく名前を表示できない 参考にしたサイト https://jabelarminecraft.blogspot.com/p/minecraft-modding-localization.html https://docs.minecraftforge.net/en/1.12.x/concepts/internationalization/#

March 4, 2025

MOD 開発環境構築

このページは、まだ未完成です。。。 nicotalk&キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html (2024年5月16日) Forge 公式サイトからツールをダウンロード gradle の調整 gradle の実行 参考にしたサイト

March 4, 2025

アイテムを追加する

このページは、まだ未完成です。。。 nicotalk&キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html (2024年5月16日)

March 4, 2025

ブロックを追加する

このページは、まだ未完成です。。。 nicotalk&キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html (2024年5月16日)

March 4, 2025

マインクラフト Mod 開発記録 1.7.10

このページは、まだ未完成です。。。 nicotalk&キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html (2024年5月16日) 環境構築 MOD 開発環境構築 基本 ブロックを追加する アイテムを追加する リソースを追加する この記事を書いた動機 自分はマインクラフトのMODについては、ちょっと環境構築してとりあえずサンプルMODが動くところまでやっていたものの、そこから先が今まで何もできていない状態だったので、最近また触り始めました。 それで、記録してすぐ参照できる状態にしておきたいと思ったので、記録を残そうというわけです。ちなみのこの記事をリンク集として、適当にまとめていこうかなと思います。 参考にしたサイトとか ここはリンク集なので特になし

March 4, 2025

記事ごとにトップ画像を表示したい (hugo PaperMod)

この記事を書いた動機 hugo を使っていて、書いた記事のサムネイルというかトップ画像みたいなのを、記事のリストで表示したかったが、すぐにどうすればいいか見つけられないかったので忘れない内に記録するというだけです。 今回の場合は、Google 検索とかで適当に調べたり、 Paper Mod 公式サイト では直接どうするのかを見つけることは出来なかったのですが、そこで動いている例を無理やりChrome の開発者ツールで調べて、実際の開発環境側で、themes/PaperMod 配下にあるファイルと一致する記述を見るけることで対応しました。 Paper Mod 公式サイト の動いている例 うまく動いた例 PaperMod の場合 +++ date = '2025-02-15T00:46:54+09:00' draft = false title = 'Windows' weight = 2 [cover] image = "/posts/windows/indexIcon.svg" +++ ... 記事の内容(markdown) ちなみに画像は、staticフォルダ配下においている。 無理やり見つけた経緯 調査 Paper Mod 公式サイト のトップページにある動いているやるのタグやクラス名を調べる。 検索 VS code の検索機能で、<article class=" と調べる。以下の様な記述が見つかる。クラス名にentry-headerとあったりするなど、Paper Mod 公式サイト の動いている例と似ている点が見つかる。 themes/PaperMod/layouts/_default/list.html ... {{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }} <header class="entry-header"> <h2 class="entry-hint-parent"> ... そして、画像のタグがある部分に該当するのが、cover.htmlというところにありそうなことが分かる。 ...

February 15, 2025

Android版 Chrome でデバックする

この記事を書いた動機 自分用のメモとして、実際にやったことを記録し、ノートを取るみたいな感じにしたいと思ったのと、私は、自分用のWebアプリみたいなのを開発しているのだが、その過程でスマホ版のブラウザでのデバックをしたくなったというのがある。 二番煎じではあるが、他のブログでの説明はなんか画像とか少なくて不満があったというのもあり、ならば自分でやってみたらというところも経緯としてある。(自分も人のこと言えたほど大したこと書けないけど。。。) 環境 スマホ側 Pixel 5a 5G Android版 Chrome 131 Android 14 PC側 Windows 11 (linux環境でも同じことはできると思う) Windows版 Chrome 131 イメージ 概要 adb コマンドの環境構築 USBデバックの接続 PCで chrome://inspect/#devicesを開く デバックしたいタブを選択して終わり デバックの仕方 adb をインストールする(PC側) 開発ツールをダウンロード 今回は、以下のページから"platform-tools-latest-windows.zip"をダウンロード SDK Platform-Tools リリースノート | Android Studio | Android Developers 開発ツールを展開と配置する 適当な場所(ダウンロード)とかで展開し、配置する。今回は、“C:"直下に開発者ツールを配置することとする。 # ダウンロードして展開したフォルダの中に入っている、"platform-tools"を以下の様な形になるように配置する (base) PS C:\> ls platform-tools Directory: C:\platform-tools Mode LastWriteTime Length Name ---- ------------- ------ ---- -a--- 2025/01/11 0:20 5969000 adb.exe -a--- 2025/01/11 0:20 108136 AdbWinApi.dll -a--- 2025/01/11 0:20 73320 AdbWinUsbApi.dll -a--- 2025/01/11 0:20 451688 etc1tool.exe -a--- 2025/01/11 0:20 1874536 fastboot.exe -a--- 2025/01/11 0:20 54376 hprof-conv.exe -a--- 2025/01/11 0:20 242968 libwinpthread-1.dll -a--- 2025/01/11 0:20 479848 make_f2fs_casefold.exe -a--- 2025/01/11 0:20 479848 make_f2fs.exe -a--- 2025/01/11 0:20 1157 mke2fs.conf -a--- 2025/01/11 0:20 756840 mke2fs.exe -a--- 2025/01/11 0:20 1089833 NOTICE.txt -a--- 2025/01/11 0:20 38 source.properties -a--- 2025/01/11 0:20 2912360 sqlite3.exe 環境変数を設定する ...

January 10, 2025

hugoで画像を追加する 📷の補足

この記事を書いた動機 ここでは前回、hugoのショットコードを使えば、もっといい感じに画像を表示できるように調整できるのではということがあったので、それをやってみた過程を記録します。 hugo のセーフティーを外さないで、画像を自在に表示できるはずだと思っていたのと、shortcodes について調べているうちに、テーマ側に画像を表示するための、figure という shortcode を見つけたというのがある。 ./theme/テーマ名/layouts/shortcodes/figure.html の存在に気づくことが、figure 発見のきっかけであった。 Features / Mods | PaperModでは、どうやって画像を表示するのか、私は見つけられなかった。(chrome で figure と検索をかけても出てこないので、ドキュメント見てどうしたら画像を表示できるか、すぐわかる感じじゃなさそう。) ちなみに、かろうじて figure shortcode が、 FAQs / How To’s Guide | PaperMod にどうやったら画像を中心揃えにできるかという話題で載っていた。 この記事の目的 明らかによくないことを書き直す 前回のhugoで画像を追加する 📷では、hugo のセーフティを外すなど、よくない方法を紹介してしまっているので、それをできる範囲で改めようと試みる。多分今回の方法であれば、セーフティを外さなくてもうまくいくはずであるが、試す気力もないので検証はまだしていない。 放置記事を何とかする そもそも、下の引用文にも書いてあるように、hugoで画像を追加する 📷の続きをすぐ書こうと当時思っていたのだが、結局やらずに何カ月も下書きのまま放置してたので、再び戻ってくることにした。 もっとよさそうな方法 hugo 内蔵の画像表示機能を使う。 追記(2025年1月26日) Hugo 自体にはそんなものない。hugo の shortcodes というのを使って、自分で画像を表示するコードを書くか、テーマごとに用意された画像を表示するための shortcodes を使うことはできる。また、マークダウン形式でも画像を張り付けられるが、細かいスタイルの調整はできなかったと思う。 さらなる追記 (2025年1月30日) 今回、新たな間違いに気づいたので、ここにもその記録置いときます。。。なんでドキュメント見て気づけなかったんだろうとそんな気持ちです。。。(実は間違っていたと思っていることはあっていた。。。) 追記 (2025年1月30日) 今気づいたが、実は組み込みで、hugoに figure っていうのが入っていることに気づいた。hugo自体に画像を表示する機能がないというのは間違いで、気づけてないだけだった。 Figure | Hugo shortcode で画像を表示する 選択肢 テーマ付属の shortcode を使う 自分で shortcode を適当に作る ...

July 2, 2024

テンプレ作成

つまずいたところ hugo でhtmlを拡張した形で書かれる、テンプレート?を作ろうとしたら、メンドウなことになった。 layouts の html ページの作成 hugo new layouts/baseof.html はできないことを知らなかったという。ちなみにこれを実行してしまうと一見うまくいったように見えるが、laytouts フォルダではなく、contentフォルダ配下にディレクトリやらファイルやらが生成されてしまうのでめんどくさくなる。 ちなみにミスった時はこうなる # hugo new layouts/baseof.html Content "何かしらのパス/content/layouts/baseof.html" created . ├── archetypes ├── assets ├── content │ ├── _index.md │ └── layouts │ └── baseof.html ├── data ├── hugo.toml ├── i18n ├── layouts ├── public ├── res.txt ├── static └── themes 一部関係ない部分省略してここには書いてるので、layouts、contentフォルダだけ見てもらえればと思います。 知らなかったこと hugoでのhtmlの書き方 hugo ではそのままhtmlを今までどおり書くことができるが、他のファイルやforループを行うこともできる。phpみたいなイメージに近いかも。Chat GPTに質問してみたらこんな感じになるらしい。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ .Title }}</title> <!-- Additional meta information or stylesheets can be added here --> {{- partial "head_custom.html" . -}} </head> <body> <header> <!-- Header content goes here --> {{- partial "header_custom.html" . -}} </header> <main> <!-- Content from individual pages will be inserted here --> {{- block "main" . }}{{ .Content }}{{ end -}} </main> <footer> <!-- Footer content goes here --> {{- partial "footer_custom.html" . -}} </footer> <!-- Additional scripts or footer scripts can be added here --> {{- partial "footer_scripts.html" . -}} </body> </html> ちなみに公式ドキュメントはここら辺っぽい ...

May 16, 2024