Hexo Icarusのテーマの変更箇所の備忘録

ネットに転がっているIcarusの情報はバージョンが古いために参考にならず、調査。
備忘録としておいておく。
お困りの方の参考になれば幸い。

About、404ページの配置

About、404はMarkdownファイルを [PROJECT DIR]\source 以下に配置することで使用可能。

readme.mdの配置

Github用に readme.md を置く場合、404と同じように [PROJECT DIR]\source に配置する。
合わせて [PROJECT DIR]\_config.yml に追記が必要。

◆変更前

[PROJECT DIR]\_config.yml (変更後)

# Directory
skip_render:

◆変更後

[PROJECT DIR]\_config.yml (変更後)

# Directory
skip_render: readme.md

こうすることで hexo generate コマンドで readme.md が public フォルダ直下に配置される。

不要なウィジェットの非表示

[PROJECT DIR]\_config.icarus.yml を修正する。
ドキュメントに従い、コメントアウトではなく position を null で対応。

◆変更前

[PROJECT DIR]\_config.yml (変更前)

widgets:
    # Google FeedBurner email subscription widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: left
        type: subscribe_email

◆変更後

[PROJECT DIR]\_config.yml (変更後)

widgets:
    # Google FeedBurner email subscription widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: null
        type: subscribe_email

フォントの変更

デフォルトだと中国語のような文字が表示される。
[PROJECT DIR]\themes\icarus\include\style\base.styl から Microsoft YaHei を削除。
あとはお好み。
今回はMac用のヒラギノ、Android用のNoto Sans CJK JPを優先し、それらがない場合はNoto Sans JPのWebフォントを表示するようにした。

◆変更前

[PROJECT DIR]\themes\icarus\include\style\base.styl (変更前)

$family-sans-serif ?= Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
$family-code ?= 'Source Code Pro', monospace, 'Microsoft YaHei'

◆変更後

[PROJECT DIR]\themes\icarus\include\style\base.styl (変更後)

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
$family-sans-serif ?= Hiragino Sans, Noto Sans CJK JP, Noto Sans JP
$family-code ?= 'Source Code Pro', monospace

プロファイル ウィジェットの配置

[PROJECT DIR]\themes\icarus\source\img 直下に配置。

アーカイブ ウィジェットの日付表記の変更

デフォルトだと “M月 YYYY”という表記で使いづらい。
[PROJECT DIR]\node_modules\hexo-component-inferno\lib\view\widget\archives.js を修正する。

◆変更前

[PROJECT DIR]\node_modules\hexo-component-inferno\lib\view\widget\archives.js (変更前)

posts.forEach(function (post) {
    var year = date.year();
    var month = date.month() + 1;
    var name = date.format(format || type === 'monthly' ? 'MMMM YYYY' : 'YYYY');
    var lastData = data[length - 1];

◆変更後

[PROJECT DIR]\node_modules\hexo-component-inferno\lib\view\widget\archives.js (変更後)

posts.forEach(function (post) {
    var year = date.year();
    var month = date.month() + 1;
    var name = date.format(format || type === 'monthly' ? 'YYYY / MM' : 'YYYY');
    var lastData = data[length - 1];

記事の日付表記

[PROJECT DIR]\themes\icarus\layout\common\article.jsx を修正。
正直直し方が思いつかず力技で対応。精進したい。
(2021/06/17追記) 綺麗に直せました。

◆変更前

[PROJECT DIR]\themes\icarus\layout\common\archives.js (変更前)

module.exports = class extends Component {
    render() {
        <div class="card">
            <article class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
                {page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">
                    <div class="level-left">
                        {/* Creation Date */}
                        {page.date && <span class="level-item" dangerouslySetInnerHTML={{
                            __html: _p('article.created_at', `<time dateTime="${date_xml(page.date)}" title="${new Date(page.date).toLocaleString()}">${date(page.date)}</time>`)
                        }}></span>}
                        {/* Last Update Date */}
                        {page.updated && <span class="level-item" dangerouslySetInnerHTML={{
                            __html: _p('article.updated_at', `<time dateTime="${date_xml(page.updated)}" title="${new Date(page.updated).toLocaleString()}">${date(page.updated)}</time>`)
                        }}></span>}

◆変更後

[PROJECT DIR]\themes\icarus\layout\common\archives.js (変更後)

module.exports = class extends Component {
    render() {
        <div class="card">
            <article class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
                {page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">
                    <div class="level-left">
                            {/* Creation Date */}
                            {page.date && <span class="level-item" dangerouslySetInnerHTML={{
                                __html: _p('article.created_at', `${date(page.date)}`)
                            }}></span>}
                            {/* Last Update Date */}
                            {page.updated && <span class="level-item" dangerouslySetInnerHTML={{
                                __html: _p('article.updated_at', `${date(page.updated)}`)
                            }}></span>}

Highlight.jsの最新版利用

Highlight.jsを折角なので最新版を使うようにする。
多分Prismjsもここを弄れば使えるはずだがよく分からなかった。

◆変更前

[PROJECT DIR]\themes\icarus\layout\common\head.jsx (変更前)

module.exports = class extends Component {
    render() {
        return <head>
            {hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '9.12.0', 'styles/' + hlTheme + '.css')} /> : null}

◆変更後

[PROJECT DIR]\themes\icarus\layout\common\head.jsx (変更後)

module.exports = class extends Component {
    render() {
        return <head>
            {hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '11.0.1', 'styles/' + hlTheme + '.css')} /> : null}

ちなみに、highlight.js のハイライト機能を有効にするには、言語とタイトルの間にスペースが必要。逆にコロンはいらない。

codeblock

``` javascript [PROJECT DIR]\themes\icarus\layout\common\head.jsx