hexoトピックにアルバムを追加する機能

ブログの移行先http://lwzhang.github.io.
基本的にすべてのhexoテーマのデフォルトはアルバム機能を実現していないが、一方でアルバム機能の需要は少ない.結局、hexoは主にブログを書くために使われている.一方、アルバム機能を実現するのは面倒です.例えば、

ピクチャはどこに置くか、sourceフォルダに置くには、静的ファイルに解析する必要があります.ピクチャが多ければ解析が非常に遅くなります.

はどのように大量にピクチャーurl(ファイル名)を取得して、ピクチャーはそんなに多くて、1つ1つの手動入力ピクチャーurl

はあり得ません

等

良い解決策を見つける必要があります
注意:このブログはyiliaテーマを使用しています.このテーマの作者littenはアルバム機能を実現していますが、彼はinstagramの画像を同期しています.私は異なる方法でアルバム機能を実現します.
新規ページhexo new page "photo"
上記のコマンドを実行すると、sourceフォルダにphotoフォルダが生成され、photoフォルダのindex.mdファイルが開きます.変更内容は以下の通りです.

    title:   
    noDate: 'true'
    ---
    <link type="text/css" href="/fancybox/jquery.fancybox.css" rel="stylesheet">
    <div class="instagram"><section class="archives album"><ul class="img-box-ul"></ul></section></div>

アルバムのスタイルはこのテーマの作者のアルバムのスタイルを使って、もしみんなが他のテーマを使うならば、スタイルは自分で実現することができます.
画像の位置
画像はsourceファイルに置くことができません.静的ファイルにコンパイルする必要があるので、とても遅いですが、どこに置けばいいですか.一般的には、ブログをgithubにバックアップし、異なるパソコンでブログを書くことができます.では、アルバムをgithubに一緒にアップロードすることもできます.だから、ブログのルートディレクトリの下に画像を置くフォルダphotosを建てて、これでもっと多くの画像をアップロードすることができます.
画像の取得
原生jsはファイルをうまく処理できないので、jsでは画像のファイル名を取得できません.jsではファイルの処理はできませんが、nodejsでいいでしょう.source\photoフォルダにtool.jsファイルを新規作成します.内容は次のとおりです.

    "use strict";
    const fs = require("fs");
    const path = "../../photos";

    fs.readdir(path, function (err, files) {
        if (err) {
            return;
        }
        let arr = [];
        (function iterator(index) {
            if (index == files.length) {
                fs.writeFile("output.json", JSON.stringify(arr, null, "\t"));
                return;
            }

            fs.stat(path + "/" + files[index], function (err, stats) {
                if (err) {
                    return;
                }
                if (stats.isFile()) {
                    arr.push(files[index]);
                }
                iterator(index + 1);
            })
        }(0));
    });

tool.jsの役割は、すべてのピクチャ名をjsonファイルに格納することです.node tool.jsを実行すると、source\photoの下にoutput.jsonファイルが作成されます.新しい画像を追加するたびに、node tool.jsを実行します.
このjsonファイルがあれば、jsを使用してhtmlコードを生成します.htmlコードの生成yourBlog\themes\yilia\source\js(yourBlogはあなたのブログのルートディレクトリで、yiliaをあなたの使用するトピックに置き換えます)フォルダの下にphoto.jsのフォルダを新規作成します.どうしてここに建てられたのですか.コンパイル後はpublic\jsフォルダに表示されるので、ブログで使用しているjsはすべてここにあります.photo.jsコードは次のとおりです.

    define([], function () {
        return {
            page: 1,
            offset: 20,
            init: function () {
                var that = this;
                $.getJSON("/photo/output.json", function (data) {
                    that.render(that.page, data);

                    that.scroll(data);
                });
            },

            render: function (page, data) {
                var begin = (page - 1) * this.offset;
                var end = page * this.offset;
                if (begin >= data.length) return;
                var html, li = "";
                for (var i = begin; i < end && i < data.length; i++) {
                    li += '<li><div class="img-box">' +
                        '<a class="img-bg" rel="example_group" href="https://github.com/lwzhang/blog/blob/master/photos/' + data[i] + '?raw=true"></a>' +
                        '<img lazy-src="https://github.com/lwzhang/blog/blob/master/photos/' + data[i] + '?raw=true" />' +
                        '</li>';
                }

                $(".img-box-ul").append(li);
                $(".img-box-ul").lazyload();
                $("a[rel=example_group]").fancybox();
            },

            scroll: function (data) {
                var that = this;
                $(window).scroll(function() {
                    var windowPageYOffset = window.pageYOffset;
                    var windowPageYOffsetAddHeight = windowPageYOffset + window.innerHeight;
                    var sensitivity = 0;

                    var offsetTop = $(".instagram").offset().top + $(".instagram").height();

                    if (offsetTop >= windowPageYOffset && offsetTop < windowPageYOffsetAddHeight + sensitivity) {
                        that.render(++that.page, data);
                    }
                })
            }
        }
    })

このうちhttps://github.com/lwzhang/blog/blob/master/photos/' + data[i] + '?raw=trueは、githubにアップロードされたピクチャリンクである.すべての画像を一度にページに挿入することはできないので、ページ分け機能をして、一度に20枚の画像をロードしました.photo.jsを導入する最も直接的な方法は、index.mdファイルに導入することです.

    title:   
    noDate: 'true'
    ---
    <link type="text/css" href="/fancybox/jquery.fancybox.css" rel="stylesheet">
    <div class="instagram"><section class="archives album"><ul class="img-box-ul"></ul></section></div>

    <script src="/js/photo.js"></script>

もし皆さんが私と同じテーマを使っていたら、yourBlog\themes\yilia\source\js\main.jsファイルの末尾に次のコードを追加します.

    if($(".instagram").length) {
        require(['/js/photo.js', '/fancybox/jquery.fancybox.js', '/js/jquery.lazyload.js'], function(obj) {
            obj.init();
        });
    }

そうでなければ、みんなが使っているテーマに何か制限があるか見てみましょう.
静的ファイルの生成
テーマのプロファイル_config.ymlのmenuの下にアルバムのメニューを追加することを忘れないでください.

    menu:
        : /
        : /archives
        : /tags/  
        : photo

最後にhexo gを実行して静的ファイルを生成します.githubのアルバム機能をローカルで表示またはアップロードすることができます.
アルバム機能が完成しました.
私のブログのアルバム機能を見てみましょう.http://lwzhang.github.io/photo/