附录：向网页中插入魔方动画

本文中的魔方动画使用了 Roofpig 这个 Javascript 库。网站 Ruwix 提供了一个 在线的 roofpig 预览页面，可以输入不同的参数来预览动画效果。

如同本文一样，向 Sphinx 站点中加入该动画的方法是：

  1. 从 Roofpig 仓库中下载 roofpig_and_three.min.js 文件，并放入 Sphinx 项目的路径中（如果在 conf.py 中定义了 html_static_path，请放在这个定义的路径中）。

  2. 在 conf.py 文件中，更新 html_js_files 变量：

    html_js_files = ['roofpig_and_three.min.js']

  3. 在 reStructuredText 文中添加 HTML 块，以支持魔方动画。例如：

    .. raw:: html

   <div class="roofpig" data-config="alg=M2 E2 S2 | flags=showalg"></div>

  4. 向网站添加对 roofpig 类的 CSS 样式支持。类似上文，可以添加一个新的 CSS 文件并更新 html_css_files 变量，或者直接在现有的 CSS 文件上添加样式。这部分可以参考下文的 CSS 支持这一小节。

  5. 编译 reST 文件为网页。可以在本地建立 HTTP 服务器来检查 Javascript 魔方动画是否正确。

上述代码的预期结果：

CSS 支持

如有需要，可以更新网站的 CSS（或单独写一个新的 CSS 文件），添加对 roofpig 的样式支持。

在此附上本文对 roofpig 库使用的 CSS：

 1/** roofpig: JS lib for Rubik animation **/
 2div.roofpig {
 3    width: 210px;
 4    max-width: 500px;
 5    margin: 5px auto;
 6    margin-bottom: 24px; /* Same as after-paragraph space */
 7    font-family: inherit !important;
 8    border: none !important;
 9    overflow: hidden;
10    text-align: center;
11}
12div.roofpig-algtext {
13    text-align: center;
14    height: min-content !important;
15    padding-left: 2pt;
16    padding-right: 2pt;
17}
18div.roofpig-count {
19    display: flex;
20    justify-content: center;
21    align-items: center;
22}
23p.roofpig-algo { font-weight: bold; }
24
25/** For same line roofpig**/
26div.roofpig.inline {
27    display: inline-block;
28    margin: 10px 15px 24px;  /* 15px between them horinzontally */
29    vertical-align: middle;
30}
31div.roofpig-inline-container {
32    margin: 5px auto;
33    text-align: center;
34}
35
36/** For recommended roofpig**/
37div.roofpig.recommend {
38    background-color: #C9F6C8;
39}
40
41/** For tables that display a lot roofpig**/
42table div.roofpig {
43    max-width: 180px; /* Smaller roofpig in tables*/
44    margin: 5px auto;
45}
46
47table.roofpig-table {
48    width: 100%;
49    margin: 20px auto;
50    border-collapse: collapse;
51}
52table.roofpig-table td {
53    vertical-align: middle;
54    text-align: center;
55    padding: 5px;
56}
57table.roofpig-table p {
58    margin-bottom: 5px;
59}
60
61/** Control table column widths**/
62.rftable_id_str, .rftable_name, .rftable_group {
63    width: 10%;
64}