hugo/zzoのカスタムヘッダーを設定

· ☕ 3
🏷️
  • #hugo
  • 実は昨日も頑張ったんだけど…。

    その続き

    hugo/zzoのタイトルとプロフィールを変更

    とりあえず、タイトルは表示されたんだけど、スマホだと見切れてしまうの…。

    見切れタイトル

    絶対ダメでしょww

    カギはやっぱり、_index.mdだと思うんだよね。

    昨日いじっても、何も変化なかったし…。

    なので、こいつが効くまで頑張る!

    エラー

    実はね、エラー出てたんだよね…。

    $ hugo server -D
    ERROR 2020/02/14 12:32:22 svType != tvType; key=hascjklanguage, st=bool, tt=string, sv=true, tv=true
    Built in 631 ms
    Error: Error building site: "/mnt/c/github/runau/hugo/tweetBlog/content/_index.md:19:1": failed to unmarshal YAML: yaml: line 18: did not find expected key
    

    で、19行目以降削除したらエラー出なくなったから、ま、textしか使わないしいいか、と思ってたんだけど、

    だめなのかもな…。

    ただのyamlの文法エラーかもしれない?

    vsCodeで確認

    vscodeでyamlにして、エラー出ないか確認…

    vscode

    別にでない…

    pythonで確認

    手軽にyaml読む方法、pythonしかわからんから、pythonで読んでみる。

    import yaml
    yml = yaml.load(open("/mnt/c/github/runau/hugo/tweetBlog/content/header:.yml", 'r'))
    
    $ python
    Python 3.6.5 (default, Nov 14 2019, 22:52:14) 
    [GCC 7.4.0] on linux
    Type "help", "copyright", "credits" or "license" for more information.
    >>> import yaml
    >>> yml = yaml.load(open("/mnt/c/github/runau/hugo/tweetBlog/content/header:.yml", 'r'))
    Traceback (most recent call last):
      File "<stdin>", line 1, in <module>
      File "/home/lisa/.pyenv/versions/3.6.5/lib/python3.6/site-packages/yaml/__init__.py", line 72, in load
        return loader.get_single_data()
      File "/home/lisa/.pyenv/versions/3.6.5/lib/python3.6/site-packages/yaml/constructor.py", line 35, in get_single_data
        node = self.get_single_node()
      File "/home/lisa/.pyenv/versions/3.6.5/lib/python3.6/site-packages/yaml/composer.py", line 36, in get_single_node
        document = self.compose_document()
      File "/home/lisa/.pyenv/versions/3.6.5/lib/python3.6/site-packages/yaml/composer.py", line 55, in compose_document
        node = self.compose_node(None, None)
      File "/home/lisa/.pyenv/versions/3.6.5/lib/python3.6/site-packages/yaml/composer.py", line 84, in compose_node
        node = self.compose_mapping_node(anchor)
      File "/home/lisa/.pyenv/versions/3.6.5/lib/python3.6/site-packages/yaml/composer.py", line 133, in compose_mapping_node
        item_value = self.compose_node(node, item_key)
      File "/home/lisa/.pyenv/versions/3.6.5/lib/python3.6/site-packages/yaml/composer.py", line 82, in compose_node
        node = self.compose_sequence_node(anchor)
      File "/home/lisa/.pyenv/versions/3.6.5/lib/python3.6/site-packages/yaml/composer.py", line 110, in compose_sequence_node
        while not self.check_event(SequenceEndEvent):
      File "/home/lisa/.pyenv/versions/3.6.5/lib/python3.6/site-packages/yaml/parser.py", line 98, in check_event
        self.current_event = self.state()
      File "/home/lisa/.pyenv/versions/3.6.5/lib/python3.6/site-packages/yaml/parser.py", line 393, in parse_block_sequence_entry
        "expected <block end>, but found %r" % token.id, token.start_mark)
    yaml.parser.ParserError: while parsing a block collection
      in "/mnt/c/github/runau/hugo/tweetBlog/content/header:.yml", line 2, column 5
    expected <block end>, but found '?'
      in "/mnt/c/github/runau/hugo/tweetBlog/content/header:.yml", line 3, column 5
    >>> 
    

    うん。怒られた。

    これやな

    でも、公式サイトから取ってきただけなんだけどなーー

    しょうがない。yamlの勉強しよう

    yaml入門

    ふむふむ。インデントか?

    直して再実行

    >>> yml = yaml.load(open("/mnt/c/github/runau/hugo/tweetBlog/content/header:.yml", 'r'))
    >>> 
    

    読めた。

    修正後ファイルはこちら

     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
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    
    ---
    header:
        - type: text
          height: 200
          paddingX: 50
          paddingY: 0
          align: center
          title:
          - tweet blog//
          subtitle:
          - ツイート感覚で書く技術ブログ
          titleColor: # #123456, red
          titleShadow: false
          titleFontSize: 44
          subtitleColor: # #123456, red
          subtitleCursive: true
          subtitleFontSize: 16
          spaceBetweenTitleSubtitle: 20
          
        - type: img
          imageSrc: images/header/background.jpg # your image file path: root/static/images/header/background.jpg
          imageSize: cover # auto|length|cover|contain|initial|inherit
          imageRepeat: no-repeat # repeat|repeat-x|repeat-y|no-repeat|initial|inherit
          imagePosition: center # x% y%| xpos ypos| left top| center bottom| ...
          height: 235
          paddingX: 50
          paddingY: 0
          align: center
          title:
          - tweet blog//
          subtitle:
          - ツイート感覚で書く技術ブログ
          titleColor:
          titleShadow: false
          titleFontSize: 44
          subtitleColor:
          subtitleCursive: false
          subtitleFontSize: 16
          spaceBetweenTitleSubtitle: 20
        
        - type: slide
          height: 235
          options:
              startSlide: 0
              auto: 5000 # auto slide delay 5000ms(5sec)
              draggable: true # slide draggable
              autoRestart: true # restart after drag finished
              continuous: true # last to first
              disableScroll: true
              stopPropagation: true
          slide:
          - paddingX: 50
            paddingY: 0
            align: left
            imageSrc: images/header/background.jpg
            imageSize: cover
            imageRepeat: no-repeat
            imagePosition: center
            title:
            - header title1
            subtitle:
            - header subtitle1
            titleFontSize: 44
            subtitleFontSize: 16
            spaceBetweenTitleSubtitle: 20
          
          - paddingX: 50
            paddingY: 0
            align: center
            imageSrc: images/header/background.jpg
            imageSize: cover
            imageRepeat: no-repeat
            imagePosition: center
            title:
            - header title2
            subtitle:
            - header subtitle2
            titleFontSize: 44
            subtitleFontSize: 16
            spaceBetweenTitleSubtitle: 20
          
          - paddingX: 50
            paddingY: 0
            align: right
            imageSrc: images/header/background.jpg
            imageSize: cover
            imageRepeat: no-repeat
            imagePosition: center
            title:
            - header title3
            subtitle:
            - header subtitle3
            titleFontSize: 44
            subtitleFontSize: 16
            spaceBetweenTitleSubtitle: 20
        
    ---
    

    ビルド再挑戦!

    お、きた!

    ヘッダーってそっちか!

    ヘッダー設定

    微修正して、ビルド&デプロイ!

    はい、昼活おわり


    るな
    るな
    エンジニア