自作品の小説サイトを作った話

レジテジ作品集を作ったときの話です。

この情報は全部古くなっています

参考にしないでください。

そのうち書き直します

使用したもの

• Hexo
  静的サイトジェネレーター。pugとscssが使えるので使っています。
• Materialize
  CSSフレームワーク。モダンな見た目になるので大好き
• NovelViewerTemplate
  小説ビューワーテンプレート。実装が簡単で助かった。
• いいねボタン・改
• コイブミ
  いいねボタンと一言メッセージ送れるやつ。
• alice
  名前変換機能を実装するやつ。

作った時に苦労したこと

詳しい作り方は説明下手くそなのでやめて置くとして、躓いたところを書いていきます。

aliceについて

aliceの導入手順に同梱のscript.jsを読み込む、というのがあるのですが、script.jsの中身はJQueryとjquery.cookie.jsです。
　で、どちらもバージョンが古いのでscript.jsは使わず、それぞれを別々に取得して使用したほうがいいです。競合防止の効果もあります。

いいねボタンについて

いいねボタンを自動で生成して設置したい。その時の一例を載せておきます。

- var page_id = page.path 
- page_id = page_id.replace(/\//g,"")
  button(type="submit" class="newiine_btn" data-iinename= page_id + "like")

解説するとページのパスを取得して半角英数字と半角ハイフン以外消してidにする～～みたいな感じです。これで不具合は今のところ起きてません。

同意しないと見られないページ

元々ゲームにするための創作、という都合もあるので名前変換をしよう！　と思い立ちaliceを導入しました。
　それで、まぁ読んでみるとわかるんですけど結構グロテスクな表現が多い作品なんですよね。作者がそういうヘキなので。
　ということで、転載禁止とかの利用規約を読んだことをチェックするために名前変換のクッキーを利用しよう！　と思い立ち実装しました。
　実際アクセスするとわかると思うんですけどcookieが無いと作品表示されないようになってます。JQueryなるべくつかいたくないけどまぁ、あるので使いました。
　取得しているクッキーはyumeYZ1dです。これがあるか無いかで表示するか表示しないか判定してます。
　で、無い場合はモーダルを表示して利用規約に同意するように促し、同意したらページをリロード作品を表示、同意しなかった場合は無限にモーダルが表示されます。最初はトップページに飛ばそうかと思ったんですが、不親切だなぁ～～と思ったのでやめました。
　モーダル自体はMaterializeのコンポーネントを使ってます。それで、常にひらっきぱなしにするので詰まったのでメモ

var instance = M.Modal.getInstance(elem);
instance.open();

ドキュメントではelemって書いてあるんですが、これに何入れたらいいのかわかんなかったんですよね。答えはモーダルオブジェクト自体を渡せばよかったらしいです。
　つまり、id="modal1"のモーダルを表示するときはelemにmodal1を入れればよかったらしいです。へー。

ページネーション

materializeのページネーション使いたかったのですがHexoのページネーションはちょっと……使いづらいんですよね……
　なのでjavascriptで操作してええかんじにします。

{
    let element = document.querySelector(".page-number.active")
    if (element){
    let createElement = "<li class='active'><a> " + element.innerHTML + "</a></li>"
    element.insertAdjacentHTML('beforebegin', createElement);
    element.remove();
    }
};

{
    let elements = document.querySelectorAll("a.page-number")
    elements.forEach(function (element){
        let createElement = "<li><a href=" + element.href + ">" + element.innerHTML + "</a></li>"
        element.insertAdjacentHTML('beforebegin', createElement);
        element.remove();
    });
};

詳しくはわからないのであれです。適当です。

以上、終わり。
　みんなもHexoで小説サイトを作ろう！
　そのうち気が向いたらGithubに投げときます。