主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

Jekyllのテンプレートカスタマイズ

細々カスタマイズしたら随時更新してゆきます。
サイト内検索つけたいけど挫折中。

ページ内リンクを自動生成

見出しを勝手にあつめてページ内リンクの目次を生成してくれます。

jQuerytoc.jsを読ませて、<div id="toc"></div>をテンプレに追加するだけ。

<script type="text/javascript">
$(document).ready(function() {
    $('#toc').toc({ 
      listType: 'ul',
      headers: 'h1'
       });
});
</script>

どの見出しタグまで集めるかとかもオプションで指定できます。

参考:ghiculescu/jekyll-table-of-contents

カテゴリーごとの一覧ページ

公式のドキュメンテーションにもあることはあるのですが、肝心のテンプレートから呼び出す方法がまったくわからず、調べてみたらGitHubにあげてくれてる人がいて、期待どおりの動きになりました。

(Embedしてみたけど、幅がせまいからめっちゃ見にくい)

あとは、メニューとかは下記のような感じで出力できます。

{% for category in  site.categories %}
 <a class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}" href="/categories/{{ category[0] }}/index.html">{{ category[0] }}</a>
  {% endfor %}

Markdownカスタマイズ

_plugins 以下に、extendMd.rb というファイルを作って、下記のように書けば、オリジナルのMarkdownが作れます(正確には変換直前に上書きしているらしい)。

module Jekyll
  module Converters
    class Markdown
      class RedcarpetParser
        alias :old_convert :convert
          def convert(content)

          # ここにコンバート処理を記述

          end
          old_convert(content)
        end
      end
    end
  end
end
引用元:"Ruby - jekyllのmarkdownにカスタムタグを定義する - Qiita

参考:Ruby - jekyllのmarkdownにカスタムタグを定義する - Qiita

** を使っても見出しになるようにしました。

# ** => h2
content.gsub! /(\*\*\s)(.*?\n)/ do
"<h2>#{$2}</h2>"

正規表現むずかしい。

参考:正規表現の構文