[{"data":1,"prerenderedAt":697},["ShallowReactive",2],{"content-\u002Fcontents\u002Fhugo_create_theme":3,"surroundPost-\u002Fcontents\u002Fhugo_create_theme":688},{"id":4,"title":5,"body":6,"createdAt":676,"description":44,"draft":677,"extension":678,"meta":679,"navigation":680,"path":681,"seo":682,"stem":683,"tags":684,"thumbnail":686,"updatedAt":676,"__hash__":687},"contents\u002Fcontents\u002Fhugo_create_theme.md","Hugoのテーマ作成のやり方",{"type":7,"value":8,"toc":669},"minimark",[9,14,18,21,32,35,38,68,71,359,362,365,409,412,431,434,437,458,467,475,489,495,498,523,530,534,546,552,558,564,570,576,579,584,590,593,604,610,616,619,639,645,655,658,665],[10,11,13],"h2",{"id":12},"hugo-でテーマを自作","Hugo でテーマを自作",[15,16,17],"p",{},"Hugo を使って、静的ホームページを作成する。Hugo ではいくつか無料で利用可能なテーマがあるが、せっかくなので自分用のテーマを作成してみます。",[15,19,20],{},"ここからはすでに Hugo がインストールされている前提で話しますので、インストールはお願いします!",[15,22,23,24,27],{},"※ (2020\u002F1\u002F19 追記) インストール方法記載しました ↓",[25,26],"br",{},[28,29,31],"a",{"href":30},"hugo_blog_create","Hugo を使ったブログ運営方法の紹介",[10,33,34],{"id":34},"新規テーマの作成",[15,36,37],{},"まずは下記コマンドで新しいテーマを作成します。",[39,40,45],"pre",{"className":41,"code":42,"language":43,"meta":44,"style":44},"language-bash shiki shiki-themes github-dark","hugo new theme [テーマ名]\n","bash","",[46,47,48],"code",{"__ignoreMap":44},[49,50,53,57,61,64],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"svObZ","hugo",[49,58,60],{"class":59},"sU2Wk"," new",[49,62,63],{"class":59}," theme",[49,65,67],{"class":66},"s95oV"," [テーマ名]\n",[15,69,70],{},"実行後のルート以下のファイル構造は以下のようになります。",[39,72,74],{"className":41,"code":73,"language":43,"meta":44,"style":44},"├── archetypes\n│   └── default.md\n├── config.toml\n├── content\n│   └── post\n│       └──test.md\n├── data\n├── layouts\n├── resources\n├── static\n└── themes\n    └── myTheme\n        ├── LICENSE\n        ├── archetypes\n        │   └── default.md\n        ├── layouts\n        │   ├── 404.html\n        │   ├── _default\n        │   │   ├── baseof.html\n        │   │   ├── list.html\n        │   │   └── single.html\n        │   ├── index.html\n        │   └── partials\n        │       ├── footer.html\n        │       ├── head.html\n        │       └── header.html\n        ├── static\n        │   ├── css\n        │   └── js\n        └── theme.toml\n",[46,75,76,84,96,104,112,122,130,138,146,154,162,171,180,189,196,206,213,224,234,247,259,271,281,291,302,312,323,330,340,350],{"__ignoreMap":44},[49,77,78,81],{"class":51,"line":52},[49,79,80],{"class":55},"├──",[49,82,83],{"class":59}," archetypes\n",[49,85,87,90,93],{"class":51,"line":86},2,[49,88,89],{"class":55},"│",[49,91,92],{"class":59},"   └──",[49,94,95],{"class":59}," default.md\n",[49,97,99,101],{"class":51,"line":98},3,[49,100,80],{"class":55},[49,102,103],{"class":59}," config.toml\n",[49,105,107,109],{"class":51,"line":106},4,[49,108,80],{"class":55},[49,110,111],{"class":59}," content\n",[49,113,115,117,119],{"class":51,"line":114},5,[49,116,89],{"class":55},[49,118,92],{"class":59},[49,120,121],{"class":59}," post\n",[49,123,125,127],{"class":51,"line":124},6,[49,126,89],{"class":55},[49,128,129],{"class":59},"       └──test.md\n",[49,131,133,135],{"class":51,"line":132},7,[49,134,80],{"class":55},[49,136,137],{"class":59}," data\n",[49,139,141,143],{"class":51,"line":140},8,[49,142,80],{"class":55},[49,144,145],{"class":59}," layouts\n",[49,147,149,151],{"class":51,"line":148},9,[49,150,80],{"class":55},[49,152,153],{"class":59}," resources\n",[49,155,157,159],{"class":51,"line":156},10,[49,158,80],{"class":55},[49,160,161],{"class":59}," static\n",[49,163,165,168],{"class":51,"line":164},11,[49,166,167],{"class":55},"└──",[49,169,170],{"class":59}," themes\n",[49,172,174,177],{"class":51,"line":173},12,[49,175,176],{"class":55},"    └──",[49,178,179],{"class":59}," myTheme\n",[49,181,183,186],{"class":51,"line":182},13,[49,184,185],{"class":55},"        ├──",[49,187,188],{"class":59}," LICENSE\n",[49,190,192,194],{"class":51,"line":191},14,[49,193,185],{"class":55},[49,195,83],{"class":59},[49,197,199,202,204],{"class":51,"line":198},15,[49,200,201],{"class":55},"        │",[49,203,92],{"class":59},[49,205,95],{"class":59},[49,207,209,211],{"class":51,"line":208},16,[49,210,185],{"class":55},[49,212,145],{"class":59},[49,214,216,218,221],{"class":51,"line":215},17,[49,217,201],{"class":55},[49,219,220],{"class":59},"   ├──",[49,222,223],{"class":59}," 404.html\n",[49,225,227,229,231],{"class":51,"line":226},18,[49,228,201],{"class":55},[49,230,220],{"class":59},[49,232,233],{"class":59}," _default\n",[49,235,237,239,242,244],{"class":51,"line":236},19,[49,238,201],{"class":55},[49,240,241],{"class":59},"   │",[49,243,220],{"class":59},[49,245,246],{"class":59}," baseof.html\n",[49,248,250,252,254,256],{"class":51,"line":249},20,[49,251,201],{"class":55},[49,253,241],{"class":59},[49,255,220],{"class":59},[49,257,258],{"class":59}," list.html\n",[49,260,262,264,266,268],{"class":51,"line":261},21,[49,263,201],{"class":55},[49,265,241],{"class":59},[49,267,92],{"class":59},[49,269,270],{"class":59}," single.html\n",[49,272,274,276,278],{"class":51,"line":273},22,[49,275,201],{"class":55},[49,277,220],{"class":59},[49,279,280],{"class":59}," index.html\n",[49,282,284,286,288],{"class":51,"line":283},23,[49,285,201],{"class":55},[49,287,92],{"class":59},[49,289,290],{"class":59}," partials\n",[49,292,294,296,299],{"class":51,"line":293},24,[49,295,201],{"class":55},[49,297,298],{"class":59},"       ├──",[49,300,301],{"class":59}," footer.html\n",[49,303,305,307,309],{"class":51,"line":304},25,[49,306,201],{"class":55},[49,308,298],{"class":59},[49,310,311],{"class":59}," head.html\n",[49,313,315,317,320],{"class":51,"line":314},26,[49,316,201],{"class":55},[49,318,319],{"class":59},"       └──",[49,321,322],{"class":59}," header.html\n",[49,324,326,328],{"class":51,"line":325},27,[49,327,185],{"class":55},[49,329,161],{"class":59},[49,331,333,335,337],{"class":51,"line":332},28,[49,334,201],{"class":55},[49,336,220],{"class":59},[49,338,339],{"class":59}," css\n",[49,341,343,345,347],{"class":51,"line":342},29,[49,344,201],{"class":55},[49,346,92],{"class":59},[49,348,349],{"class":59}," js\n",[49,351,353,356],{"class":51,"line":352},30,[49,354,355],{"class":55},"        └──",[49,357,358],{"class":59}," theme.toml\n",[15,360,361],{},"themes 配下にテーマ名 myTheam というのが生成されています。これが今回新しく作ったテーマです。",[15,363,364],{},"hugo にはいくつかの template が用意されており、各 templatate によって読み込まれる順番があります。\n以下に base template の例を示します。",[366,367,368,400],"blockquote",{},[369,370,371,375,378,381,384,387,390,393,396,398],"ol",{},[372,373,374],"li",{},"\u002Flayouts\u002Fsection\u002F-baseof.html",[372,376,377],{},"\u002Fthemes\u002Flayouts\u002Fsection\u002F-baseof.html",[372,379,380],{},"\u002Flayouts\u002Fbaseof.html",[372,382,383],{},"\u002Fthemes\u002Flayouts\u002Fbaseof.html",[372,385,386],{},"\u002Flayouts\u002Fsection\u002Fbaseof.html",[372,388,389],{},"\u002Fthemes\u002Flayouts\u002Fsection\u002Fbaseof.html",[372,391,392],{},"\u002Flayouts\u002F_default\u002Fbaseof.html",[372,394,395],{},"\u002Fthemes\u002Flayouts\u002F_default\u002Fbaseof.html",[372,397,392],{},[372,399,395],{},[15,401,402,403],{},"引用： ",[28,404,408],{"href":405,"rel":406},"https:\u002F\u002Fgohugo.io\u002Ftemplates\u002Fbase\u002F",[407],"nofollow","Base Template",[15,410,411],{},"このように読み込みに優先順位があるので、ダウンロードした theme を用いる場合などに、優先度の高いファイルに新しく記述することで上書きができます。",[15,413,414,415,418,419,422,423,426,427,430],{},"新しく theme を作る場合は、一番優先度の低い",[46,416,417],{},"\u002Fthemes\u002F\u003CTHEME>\u002Flayouts\u002F_default\u002Fbaseof.html","のファイルの編集をします。ただし、どうやら",[46,420,421],{},"baseof.html","より",[46,424,425],{},"\u002Fthemes\u002F\u003CTHEME>\u002Flayouts\u002Findex.html","が優先されるようです。\n簡単にするために",[46,428,429],{},"index.html","を削除してもいいらしいです。",[10,432,433],{"id":433},"ページの作成",[15,435,436],{},"ページのレイアウトは以下の順番で行います。",[369,438,439,441,443,446,449,452,455],{},[372,440,429],{},[372,442,421],{},[372,444,445],{},"head.html",[372,447,448],{},"list.html",[372,450,451],{},"single.html",[372,453,454],{},"header.html",[372,456,457],{},"sidebar.htnl",[15,459,460,463,464,466],{},[46,461,462],{},"layout","配下の",[46,465,429],{},"には以下のような記述をしました。",[39,468,473],{"className":469,"code":471,"language":472},[470],"language-text","{{ define \"title\" }} {{ .Title }} – {{ .Site.Title }} {{ end }} {{ define \"main\" }} This is\ntest\n\n\u003Cmain>\n  \u003C!-- root直下の\u002Fcontent\u002Fpost\u002F内の記事を10個まで表示 -->\n  \u003C!-- rangeはループ -->\n  {{ range first 10 .Data.Pages }}\n  \u003Cdiv>\n    \u003C!-- .Titleで記事のタイトルを表示 -->\n    \u003Ca href=\"#\">{{ .Title }}\u003C\u002Fa>\n    \u003C!-- .Contentは記事の内容を全て表示 -->\n    {{.Content}}\n  \u003C\u002Fdiv>\n  {{ end }}\n\u003C\u002Fmain>\n{{ end }}\n","text",[46,474,471],{"__ignoreMap":44},[15,476,477,478,481,482,485,486,488],{},"ただ、これだけでは何も表示されないです。\n",[46,479,480],{},"{{define \"name\"}}{{end}}","とすることで",[46,483,484],{},"{{block \"name\" .}}{{end}}","で他のファイルから呼び出すことができます。これを用いて次は",[46,487,421],{},"を記述していきます。",[39,490,493],{"className":491,"code":492,"language":472},[470],"\u003C!DOCTYPE html>\n\u003Chtml lang=\"ja\">\n  \u003Chead>\n    \u003Cmeta charset=\"utf-8\" \u002F>\n    \u003Ctitle>{{ block \"title\" . }} {{ .Site.Title }} {{ end }}\u003C\u002Ftitle>\n    \u003Clink rel=\"stylesheet\" href=\"{{\"\u002Fcss\u002Fcustom.css\"|relURL }}\">\n  \u003C\u002Fhead>\n  \u003Cbody>\n    {{ block \"main\" . }}\n    \u003C!-- define \"main\"の内容が表示される -->\n    {{ end }}\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[46,494,492],{"__ignoreMap":44},[15,496,497],{},"これで下記のコマンドをルート直下で実行します。",[39,499,501],{"className":41,"code":500,"language":43,"meta":44,"style":44},"hugo server --theme=myTheme --buildDrafts=true --watch -v\n",[46,502,503],{"__ignoreMap":44},[49,504,505,507,510,514,517,520],{"class":51,"line":52},[49,506,56],{"class":55},[49,508,509],{"class":59}," server",[49,511,513],{"class":512},"sDLfK"," --theme=myTheme",[49,515,516],{"class":512}," --buildDrafts=true",[49,518,519],{"class":512}," --watch",[49,521,522],{"class":512}," -v\n",[15,524,525,526,529],{},"ブラウザで",[46,527,528],{},"http:\u002F\u002Flocalhost:1313","にアクセスすると content\u002Fpost 以下に配置された.md ファイルが表示されます。",[10,531,533],{"id":532},"html-の部品化","html の部品化",[15,535,536,537,463,540,542,543,545],{},"Hugo では、html を部品化することができます。",[46,538,539],{},"myTheme\u002Fpatials\u002F",[46,541,445],{},"に",[46,544,421],{},"の一部を以下のようにコピペします。",[39,547,550],{"className":548,"code":549,"language":472},[470],"\u003Chead>\n  \u003Cmeta charset=\"utf-8\" \u002F>\n  \u003Ctitle>{{ block \"title\" . }} {{ .Site.Title }} {{ end }}\u003C\u002Ftitle>\n  \u003Clink rel=\"stylesheet\" href=\"{{\"\u002Fcss\u002Fcustom.css\"|relURL }}\">\n\u003C\u002Fhead>\n",[46,551,549],{"__ignoreMap":44},[15,553,554,555,557],{},"次に",[46,556,421],{},"を以下のように編集します。",[39,559,562],{"className":560,"code":561,"language":472},[470],"\u003C!DOCTYPE html>\n\u003Chtml lang=\"ja\">\n  {{partial \"head\" .}}\n  \u003Cbody>\n    {{ block \"main\" . }}\n    \u003C!-- define \"main\"の内容が表示される -->\n    {{ end }}\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[46,563,561],{"__ignoreMap":44},[15,565,566,569],{},[46,567,568],{},"{{partial \"○○.html\"}}","で patials 配下の html を挿入することができます。",[15,571,572,573,575],{},"このように",[46,574,421],{},"と部品化された html を用いることでコード可読性やカスタマイズ性をあげることができます。",[15,577,578],{},"ここまでの状態をブラウザで確認すると記事がいくつか縦にずらずらと表示されているはずです。このままだと読みづらいのでタイトルと少量の内容だけを表示して記事をリスト化してみます。",[15,580,581,583],{},[46,582,448],{},"に以下のように記述します。",[39,585,588],{"className":586,"code":587,"language":472},[470],"\u003Cdiv>\n  \u003C!-- 記事タイトルをリンクにする -->\n  \u003Ca href=\"{{ .Permalink }}\">{{ .Title}}\u003C\u002Fa>\n  \u003Cdiv>{{ .Date.Format \"2006-01-15\" }}\u003C\u002Fdiv>\n  \u003Cp>{{ .Summary}}\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[46,589,587],{"__ignoreMap":44},[15,591,592],{},"内容としては記事のタイトルと書かれた日時と記事のうち定められた語数だけを表示するといったものです。",[15,594,595,596,599,600,603],{},"ちなみにここでハマったこととして日時の指定を日本っぽい並び順にしたい場合は、",[46,597,598],{},"2006-01-15","と必ず書かなければならないようです。",[46,601,602],{},"2018-03-19","とか異なる年月日では正しく表示されなかったです（バグなのかはわからない）。",[15,605,606,607,609],{},"これだけでは変更が反映されないの、今書いた内容を読み込むように",[46,608,429],{},"を編集します。",[39,611,614],{"className":612,"code":613,"language":472},[470],"{{ define \"title\" }} {{ .Title }} – {{ .Site.Title }} {{ end }} {{ define \"main\" }}\n\u003Cmain>\n  \u003C!-- root直下の\u002Fcontent\u002Fpost\u002F内の記事を10個まで表示 -->\n  \u003C!-- rangeはループ -->\n  {{ range first 10 .Data.Pages }}\n  \u003Cdiv>\n    \u003C!-- list.htmlを読み込む -->\n    {{ .Render \"list\"}}\n  \u003C\u002Fdiv>\n  {{ end }}\n\u003C\u002Fmain>\n{{ end }}\n",[46,615,613],{"__ignoreMap":44},[15,617,618],{},"これでリスト化された記事が表示されると思います。",[15,620,621,622,625,626,628,629,631,632,635,636,638],{},"続いて各記事の詳細画面の設定を行います。Hugo は記事の詳細には",[46,623,624],{},"\\_default"," 配下の ",[46,627,451],{}," が優先で適用されます。先ほどの ",[46,630,448],{}," の",[46,633,634],{},"{{ .Permalink }}","は各記事へのパスを示します。\n",[46,637,451],{}," に以下のように記述します。",[39,640,643],{"className":641,"code":642,"language":472},[470],"{{ define \"title\" }} {{ .Title }} – {{ .Site.Title }} {{ end }} {{ define \"main\" }}\n\u003Cmain>\n  \u003Carticle>{{ .Content }}\u003C\u002Farticle>\n\u003C\u002Fmain>\n{{ end }}\n",[46,644,642],{"__ignoreMap":44},[15,646,647,648,650,651,654],{},"これで",[46,649,429],{},"の",[46,652,653],{},"{{define \"main\"}}","が上書きされます。",[10,656,657],{"id":657},"まとめ",[15,659,660,661,664],{},"この記事では Hugo のテーマを自作する場合の基本的な流れについて説明しました。\n記事中のコードで使用していた Go の ",[46,662,663],{},"html\u002Ftemplate"," の記述方法や Hugo でデフォルトで使用できる変数や関数については別途記事にすつもりです。",[666,667,668],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":44,"searchDepth":86,"depth":86,"links":670},[671,672,673,674,675],{"id":12,"depth":86,"text":13},{"id":34,"depth":86,"text":34},{"id":433,"depth":86,"text":433},{"id":532,"depth":86,"text":533},{"id":657,"depth":86,"text":657},"2018-08-25",false,"md",{},true,"\u002Fcontents\u002Fhugo_create_theme",{"title":5,"description":44},"contents\u002Fhugo_create_theme",[685],"Hugo","\u002Fimg\u002Ftwitter-card.png","IoqgjhePzDiOmvVweVB-nO1Cn4UXr0Fi3apGx_JVr9g",[689,693],{"title":690,"path":691,"stem":692,"children":-1},"Hugoを使ったブログ運営方法の紹介","\u002Fcontents\u002Fhugo_blog_create","contents\u002Fhugo_blog_create",{"title":694,"path":695,"stem":696,"children":-1},"【学び】株式投資基礎編：知らない単語調べてみた","\u002Fcontents\u002Finvestment_basic","contents\u002Finvestment_basic",1782257369256]