Todoリストと言っても、フィールドに入力した内容がli要素として追加されるだけ。 Elm習いたてなので、何か無駄があるかも。 個人的になるほどと思った点はList.mapを利用してli要素を生成するところで、これは要素を生成する関数が子要素のリストを引数に取るから実現できる。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 import Browser import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (onClick, onInput) main = Browser.sandbox { init = init, update = update, view = view } --Model type alias Todo = { description : String } type alias Model = { todos : List Todo , input : Todo } init : Model init = { todos = [] , input = Todo "" } type Msg = Add | Change String --Update update : Msg -> Model -> Model update msg model = case msg of Add -> { model | todos = model.input :: model.todos } Change str -> { model | input = Todo str } -- View view : Model -> Html Msg view model = div [] [ input [ type_ "text", placeholder "What will you do?", onInput Change] [] , button [ onClick Add ] [ text "Add" ] , ul [] (List.map viewLi model.todos) ] viewLi : Todo -> Html Msg viewLi todo = li [] [ text todo.description ]

簡単にセットアップ方法を備忘のために書いておく 前提 MacOS Mojave Homebrew 2.1.16 GitHubのblogリポジトリで公開する この記事でディレクトリを表記する時は、blogローカルリポジトリの最上位を/で表現する インストール ターミナルにて以下のコマンドを叩く 1 $ brew install hugo ブログサイトの作成 blogサイトのローカルリポジトリがある前提で進める。blogディレクトリに移動して以下のコマンドを実行する。 forceフラグをつけると、今のディレクトリに何かファイルがあった場合でもサイトを生成してくれる。僕の環境の場合はREADME.mdしかなかったので何も上書きされなかったが、hugoが生成するファイルと名前がかぶる場合は、何かファイルが上書きされる恐れがあるので注意。 1 $ hugo new site ./ --force すると、何やらたくさんファイルやディレクトリを生成してくれる。 テーマの追加 contrast-hugoが気に入ったのでこれを使う。 /themesに移動して、contrast-hugoのファイルをcloneしてくる 1 $ git clone https://github.com/niklasbuschmann/contrast-hugo.git 後でテーマをいじるので、一応テーマ名を変更しておく。contrast-hugoをch-modifiedに変更する。 シンタックスハイライトの設定 Chromaというハイライターが入っているらしい。そのテーマはこちらで見られる。今回はgithubというテーマを利用する。 /config.tomlでpygmentsStyle=githubと指定すると、スタイルをhtmlに直接埋め込んでくれる。しかしCSSを後で自分でいじりたいのでこの方法は用いない。その代わり、pygmentsUseClasses=trueとして、CSSを利用することにする。 /themes/ch-modified/static/cssに移動して、以下のコマンドを実行する。 1 $ hugo gen chromastyles --style=github > syntax.css configの設定 /config.tomlの内容を以下の通りにする。ほとんどの設定項目がデフォルトのもので、正直意味が分かっていないものもある。コメントアウトのところはAboutページのリンクを貼るものだが、Aboutページができたらコメントを外そうと思っている。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 baseURL = [ブログのURL] title = [ブログのタイトル] author = [作成者] paginate = 3 languageCode = "ja-jp" DefaultContentLanguage = "ja" enableInlineShortcodes = true footnoteReturnLinkContents = "^" theme = [テーマ] publishDir="docs" pygmentsUseClasses = true [menu] # 気が向いたら設定する # [[menu.main]] # identifier = "about" # name = "About" # url = "/about/" # weight = 10 [taxonomies] category = "categories" tag = "tags" series = "series" [privacy] [privacy.vimeo] disabled = false simple = true [privacy.twitter] disabled = false enableDNT = true simple = true [privacy.instagram] disabled = false simple = true [privacy.youtube] disabled = false privacyEnhanced = true [services] [services.instagram] disableInlineCSS = true [services.twitter] disableInlineCSS = true baseURL: 後でhugoコマンドで静的ページを作成するとき、cssやjsのアドレス解決のために必要。github公開後のアドレスを指定しておく。 theme: テーマ名を指定する。ここではch-modifiedを指定。 publishDir: 後でhugoコマンドで静的ページを作成したときの保存先。GitHub Pagesの表示先をmaster/docsにしたいので、このように書いている。 index.mdの作成 /contents/_index.mdを作成し、内容は以下のものとする。これは/theme/ch-modified/layouts/_default/list.htmlの{{ .Content }}に埋め込まれる。 ...

このブログではHugoを使っている。 Syntax highlighting 1 2 3 4 5 6 7 #include <iostream> int main() { std::cout << "Hello" << std::endl; return 0; } KaTeX inline: $x = 2$ block: $$ x^2 + x + 1 = 0 $$