index page

app.py

@@ -1,14 +1,18 @@
 from flask import Flask
 from flask import render_template, redirect, url_for
 
-from game_infos import game_infos
+from game_infos import game_infos, game_infos_with_cover
+import json
+
+number_to_show_on_index = 42
 
 app = Flask(__name__)
 
 
 @app.route('/')
 def index():
-    return render_template('index.html', games=game_infos['games'])
+    game_infos_to_show = game_infos_with_cover[:number_to_show_on_index - 1]
+    return render_template('index-imgs.html', game_infos=game_infos_to_show, game_count=len(game_infos['games']))
 
 
 @app.route('/about')

game_infos.py

@@ -7,3 +7,8 @@ root = os.path.dirname(os.path.abspath(inspect.getfile(inspect.currentframe())))
 with open(os.path.join(root, 'static', 'games', 'games.json'), encoding='utf8') as f:
     content = f.read()
     game_infos = json.loads(content)
+
+game_infos_with_cover = list()
+for identifier, game_info in game_infos['games'].items():
+    if 'coverFilename' in game_info.keys():
+        game_infos_with_cover.append(game_info)

templates/index-imgs.html

@@ -0,0 +1,45 @@
+{% extends 'base.html' %}
+
+{% block main %}
+    <div class="container mt-3 grid">
+        {% if game_infos %}
+            {% for game_info in game_infos %}
+                <div class="card grid-item mb-3 mr-3">
+                    <a href="{{ url_for('game', identifier=game_info.identifier) }}">
+                        <img class="card-img-top"
+                             src="{{ url_for('static', filename='games/img/{}/{}'.format(game_info.identifier, game_info.coverFilename)) }}"
+                             alt="{{ game_info['name']['zh-Hans'] }}">
+                    </a>
+                    <div class="card-body">
+                        <h5 class="card-title">{{ game_info['name']['zh-Hans'] }}</h5>
+                    </div>
+                </div>
+            {% endfor %}
+        {% endif %}
+                <div class="card grid-item mb-3 mr-3">
+                    <div class="card-body">
+                        <h5 class="card-title">更多游戏</h5>
+                        <h6 class="card-subtitle mb-2 text-muted">目前共有 {{ game_count }} 款游戏</h6>
+                            <a href="{{ url_for('games') }}" class="card-link">游戏列表</a>
+                    </div>
+                </div>
+        <div class="grid">
+        </div>
+    </div>
+{% endblock %}
+
+{% block footer %}
+    <script src="https://cdnjs.loli.net/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js" integrity="sha256-lqvxZrPLtfffUl2G/e7szqSvPBILGbwmsGE1MKlOi0Q=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.loli.net/ajax/libs/masonry/4.2.1/masonry.pkgd.min.js" integrity="sha256-D3o+8eRzMxa6mD+EDWrS5rMcEaAhISmCnRLdQ8kS2t4=" crossorigin="anonymous"></script>
+    <script>
+        $(document).ready(function () {
+            var $container = $(".grid");
+            $container.masonry();
+
+            $container.imagesLoaded()
+            .progress(function (instance, image) {
+                $container.masonry();
+            });
+        });
+    </script>
+{% endblock %}