Q&A実現したいこと
GitHubの JekyllによるWebページ作成で日本語のWebページを作ろうとしています。
メニューをクリックするとその文章まで
自動クロールする機能がある、「Leap Day theme」という既存のJekyllテーマを採用して、
現在MarkDownで書いたファイルを作成しているところです。
問題点
しかし、自動スクロール機能が正しく動作する時と、
正しく動作しない(スクロール先が間違っている)時があり、
何が原因でこのような動作になっているのかがわからず、困っています。
正しくスクロールされる時は以下のような感じです。
テストページ1を見てみて下さい。
画面左側のメニューをクリックすると、その内容が記載された部分まで自動スクロールされます。
しかし1部のメニューは正しく動作しません。以下のような感じです。
その1 - スクロール先が間違っている -
"「」 1"をクリックすると、"ヘッダー 1"の部分にスクロールされてしまいます。
その2 - ページ最上部に行ってしまう -
テストページ2を見てみて下さい。
日本語でヘッダーを書いている部分は、軒並みページ最上部に行ってしまいます。
上記のような動作になってしまっている部分は、
MarkDownで書いた見出し(## ???)の部分にアルファベット以外の文字を使用しているという共通点がある事はわかったのですが、
テストページ1 の "「en」 3" のように、アルファベット以外の文字を使用しているのに正しく動作している部分もあります。
これは、Jekyllが「アルファベット以外の文字」はサポートしていませんよという事なのでしょうか。
私は日本語しか話せないので、日本語でWebページを作りたいです。
アドバイスお願いします
回答2件
0
Leap Day theme のメニュー部分って js で生成してるんですが、実装を見ると
.replace(/[^\w-]+/g,'') っていう正規表現replaceで日本語を削ってますね。
飛び先が変な原因ですが、ヘッダー 1 と 「」 1 が両方とも日本語部分が削られ、
スペースがハイフンに置換されて -1 っていう文字列になるからです。
idおよびアンカーリンクとしてはどちらも #-1 になってしまい、
クリックしたときにどちらも（上の方にある）ヘッダー 1の方に飛ぶっていう挙動になってます。
やや荒業ですが、このreplaceを消したjsを自前で用意して上書きすると欲求は満たされます。
gh-page: https://set0gut1.github.io/heading-test/
repository: https://github.com/set0gut1/heading-test
（コード読んだ感じ、これしか方法なさそうに見えました。）
投稿2018/05/29 20:32
編集2018/05/29 20:53
総合スコア2413
0
自己解決
目的の機能を持った別テーマを探しましたが、なかなか見つからないので、
set0gut1さんの js による解決方法を検討し直してみました。
日本語文字を空文字に変更する部分を、以下のようにベタな文字コードに変換する事で対応できました。
■変更前
.replace(/[^\w-]+/g,'')
■変更後
.replace(/[^\w-]/g, function(match){return match.charCodeAt(0);})
汚いコーディングですが、とりあえずデグレなく動いているようなので、
これでいこうと思います。
set0gut1さん、アドバイスありがとうございました！
投稿2018/06/01 10:41
編集2018/06/01 11:14
総合スコア38
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/19 13:42 編集
2018/05/30 10:14
2018/05/30 10:26