New Journey
Posted Updated  Mo1cibo Murmur

New Journey

時隔多年，寫網誌的衝動又再度浮現，不知道這次能持續多久

現在 HEXO 也改進了不少，好用很多，順便紀錄一下一些設定

Packages

1
2
3
4
5
6
7
8
# git deploy
npm install hexo-deployer-git --save
# sitemap
npm install hexo-generator-sitemap --save
# hexo-admin
npm install --save hexo-admin
# theme
npm install hexo-theme-icarus

Theme

特別提一下 theme: hexo-theme-icarus

原本是指用 Next 黑白簡約的風格，不過這次看到 icarus 整個被燒到

附帶的功能非常齊全，於是就換一下風格，重新出發!!!

Setting

Post Template

  • Permalink of post template in scaffolds/
    要在 _config.yml 增加變數 urlname，再去 scaffold/_post.md 增加 tag urlname 即可

Article

  • Readmore
    文章不要展開至 #more 位置，而是開頭

    • Path:
      • themes\icarus\layout\common\article.jsx
    • 修改
      • from: {url_for(page.link || page.path)}#more
      • to: {url_for(page.link || page.path)}

  • Post 內改為 2 columns

    • Page 預設為 3 columns，Flexible Theme Configuration 作者有提供此功能，只要新增 _config.post.md，然後在裡面把想要的 widgets 放置左側即可

  • 頁面寬度
    這裡會需要修改兩個地方

    • themes\icarus\layout\common\article.jsx
      將 column_size 由 4 -> 3

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      function getColumnSizeClass(columnCount) {
          switch (columnCount) {
              case 2:
                  //return 'is-4-tablet is-4-desktop is-4-widescreen';
                  return 'is-4-tablet is-4-desktop is-3-widescreen';
              case 3:
                  return 'is-4-tablet is-4-desktop is-3-widescreen';
          }
          return '';
      }

    • themes\icarus\include\style\responsive.styl
      base.styl 有設定 $fullhd ?= 1472px，剩下就把 responsive.styl 的設定都改成 fullhd size
      NOTE: 2 欄及 3 欄都要修改，否則切換頁面會對不齊

      1
      2
      3
      4
      5
      6
      7
      8
      +fullhd()
          .is-3-column .container
              max-width: $fullhd - 0 * $gap
              width: $fullhd - 0 * $gap

          .is-2-column .container
              max-width: $fullhd - 0 * $gap
              width: $fullhd - 0 * $gap

  • toc 顯示
    需要在 front-matter 中添加

    1
    toc: true

  • [TODO] toc 預設展開

    • 主題不支援預設展開 toc，而是隨著定位展開 sub-header。而且預設 sidebar 是不連動滑動，所以在滑動時，會造成文章往下滑，就看不到上方展開的 toc
    • 目前的解決方案是把 toc 移到 profile widget 上方，並調整 sidebar 為 sticky mode
    • [許願] 希望之後能夠支援預設展開 toc (ps: 我不會前端阿QQ)

Image

  • 圖片置中
    theme 預設是靠左，在 themes\icarus\include\style\article.styl 可以增加文章內的圖片 margin 屬性

    • 參考: 文章图片居中

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      &.article
          ...

          .content
              ...

              a
                img
                    margin: auto
                    display: block

  • 圖片封面與縮圖
    在 front-matter 內加入 tag: cover 與 thumbnail

    1
    2
    cover: /gallery/covers/cover.jpg
    thumbnail: /gallery/thumbnails/thumbnail.jpg

  • 調整文章內外 cover image 顯示範圍

    • 針對 image class 去做限制高度，Home 下的調窄一些
      • Home (.fill): height: 287
      • Page (.center): height: 487
    • img
      • 使用 cover 模式
      • 置中
      • 高度與 imagebox 相同
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .image
        .center
            width: 100% !important
            height: 487px !important
            object-fit: cover
            object-position: 50% 50%

        .avatar
            height: 100%
            object-fit: cover

        .fill
            object-fit: cover
            width: 100% !important
            height: 287px !important
            object-position: 50% 50%

  • 圖片放置位置
    theme/source 底下找個資料夾放就好，呼叫以相對路徑於 theme/source

    • Path: theme/source/img 或 theme/source/gallery

front-matter template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: {{ title }}
author: Mo1cibo
date: {{ date }}
tags:
    -
categories:
    -
urlname:
mathjax: false
toc: true
cover:
thumbnail:
---

Others

References

New Journey

https://mousyball.github.io/2020/11/01/new-journey/

Author

Mo1cibo

Posted on

2020-11-01

Updated on

2020-11-01

Licensed under

#

Comments

Catalogue

Follow

Links

Categories

×