查看“︁建站/WIKI功能/二次元老婆墙”︁的源代码

 本文章为服务于Mediawiki的海报墙，现行的海报墙是html+css+js编写的，原favorites项目已存档至：[https://web.archive.org/web/20240907042455/https://scio.eu.org/project/favorites/index.php/特殊:所有页面?from=&to=&namespace=0 IA]（包括模板/模块的源代码页面），不久将关闭届时现有引链或失效。

== 第零步 前言 ==
<sup>※ 使用模板、模块与Cargo实现老婆墙</sup>

这篇文章既是一篇指南也是一个笔记，是我折腾过程记录的再编辑。

如果您想从折腾的过程学习相关功能的用法、思路，您可以完整的阅读本文：

* 第一步为实现效果所依赖的扩展与功能；
* 第二、三、四步都是所涉基础知识与思路；
* 第五、六 步是对lobba的列表墙的复刻，分别是条目所用的模板、老婆墙<sup>(汇总页)</sup>及所涉的模板/模块；
* 第七步是在此基础上根据需求的优化。
无需为技术担忧，只要大脑不处于“一看到代码就头晕”的状态，就能通过复制粘贴复刻老婆墙。

* 诸如设定模板时，如果见有些内容或许不必要存在，可以先大概阅读一遍文章，因为或许后面使用到了它们，捋一遍逻辑就非常好理解了。

但如果您想自定义功能(涉及修改实现逻辑而非单纯改现有参数)，则需要您有数据库/lua等编程语言的基础，那您可以直接参考源站：[https://lobba.miraheze.org/wiki/Main_Page https://lobba.miraheze.org/]

　

== 第一步 启用必须功能 ==
※ 如果您一点基础没有，请阅读[[建站/WIKI功能|WIKI功能]]，以掌握拓展相关的的基础知识。

本文以遵循 [[建站/MediaWiki]] 的流程建立的新站为例，您需要在此基础上先安装/启用如下功能：

'''核心功能：'''

安装[[mediawikiwiki:Extension:Cargo|Cargo]]：

* 添加：<code>wfLoadExtension( 'Cargo' );</code>
* 更新：<code>php ./maintenance/update.php</code><sup>（需要在网站根目录下运行）</sup>
** （会在数据库创建Cargo所需要的表，不更新会报错）
*[[特殊:特殊页面#mw-specialpagesgroup-cargo]]
安装[[mediawikiwiki:Extension:Page_Forms/Download_and_installation|PageForms]]（[[建站/WIKI功能/功能实现#页面表单|#页面表单]]）以使用其附加的解析器函数及通过图表创建模板：
* <code>wfLoadExtension( 'PageForms' );</code>
* <code>[[特殊:特殊页面#mw-specialpagesgroup-pf_group]]</code>
'''根据需求可选的'''

安装[[mediawikiwiki:Extension:CSS|CSS]]（[[建站/WIKI功能/功能实现#CSS|#CSS]]）拓展以给单页面设定style：

* <code>wfLoadExtension( 'CSS' );</code>
* 在[[#分析lobba的汇总页]]中使用

安装[[mediawikiwiki:Extension:NoTitle|NoTitle]]以隐藏标题来美化页面：

* <code>wfLoadExtension( 'NoTitle' );</code>
* <code>$wgRestrictDisplayTitle = false;</code>

* 在[[#分析lobba的汇总页]]中使用

'''这些是功能初始化设置时推荐了，但以防您有所遗漏'''：

<sup>※ 旧版本不附带、旧指南文章没推荐或必不可却的，如果已经启用了，就不用管了。</sup>

启用[[mediawikiwiki:Extension:Scribunto|Scribunto]]（模块）以开启嵌入lua脚本功能：

* 参考：[[建站/WIKI功能/功能实现#模块|模块]] 进行配置
启用<code>[[mediawikiwiki:Extension:ParserFunctions|ParserFunctions]]</code>（函数解析器）：以使用内置的函数功能：

* <code>wfLoadExtension( 'ParserFunctions' );</code>

启用<code>[[mediawikiwiki:Extension:TemplateData|TemplateData]]</code>（模板）：以创建具有固定格式的内容框架：

* <code>wfLoadExtension( 'TemplateData' );</code>
启用[[mediawikiwiki:Extension:Interwiki|Interwiki]]以自定义跨wiki链接，并授予sysop用户组编辑权限：
* <code>wfLoadExtension( 'Interwiki' );</code>
* <code>$wgGroupPermissions['sysop']['interwiki'] = true;</code>
* [[#调整附加文字]] 时使用。
　

== 第二步 模板的基础应用 ==
对于大量重复结构的内容（如各种主流百科的信息表格）模板不仅方便管理还有效减少数据库资源占用，但注意两点：

* 模板是快捷调用框架的工具，便捷点主要在于骨架（如UI/样式、结构）而非内容；
* 可视化编辑器虽然有搜索并使用模板的功能，但对于常用且参数多的模板使用效率较低；若在模板页声明好noinclude，直接源代码模式下复制粘贴并填充参数更为便捷。

因此，模板的功能与文本创作关系不大，更倾向于项目、数据、条目管理，它复杂的是上限和特殊功能(需要一些编程知识了就)，对于基础的文字编辑不需要考虑甚多，我所有文章类创作没有用到模板的，这些高级功能无非是图个新鲜与玩个花样，在一些非文章创作的项目上用。

=== 表格的构成 ===
一个表格长这样：
{| class="wikitable"
!姓名
!原名
!性别
!出生点
|-
|纱路酱
|桐间纱路
|女
|请问您需要来点兔子吗？
|}
它的wikitext源代码是：<syntaxhighlight lang="wikitext" line="1">
{| class="wikitable"
!姓名
!原名
!性别
!出生点
|-
|纱路酱
|桐间纱路
|女
|请问您需要来点兔子吗？
|}
</syntaxhighlight>对于这种简单表格，当然是可视化编辑器直接插入内容更简单，但如果很多个这种表格，且具有更复杂的样式呢？

　

=== 模板的构成 ===
例如，创建 <code>模板:人物信息</code> 页面：<syntaxhighlight lang="wikitext" line="1">
{| class="wikitable"
!姓名
!原名
!性别
!出生点
|-
|{{{姓名}}}
|{{{原名}}}
|{{{性别|女}}}
|{{{出生点|}}}
|}
</syntaxhighlight>可按照自己需要构建一个框架，其中将需要手动填写(自定义参数)的部分修改为： <code><nowiki>{{{x}}}</nowiki></code> 

* 可以为示例的文字，调用模板时需填写“<code>参数=值</code>”<sup>(见下节)</sup>，将按参数指定的值渲染，无需从技术上考虑顺序，但最好从维护角度上考虑排序；
* 也可以填写<code>1</code>,<code>2</code>,<code>3</code>数字，如此就可以忽略参数直接写值，但调用模板时注意先后顺序<sup>（有某项要为空可以不填内容但不要不写管道符"<code>|</code>"）</sup>，参数较多或难以维护；
也可以使用管道符设定默认值： <code><nowiki>{{{x</nowiki>'''|'''<nowiki>}}}</nowiki></code>，管道符后便是默认值，实际应用场景大概分为以下几种情况：
{| class="wikitable"
! rowspan="2" |调用时
! rowspan="2" |未添加管道符
! colspan="2" |添加了管道符
|-
!未设定默认值
!设定了默认值
|-
!不填写参数
|留空
|留空
|留空
|-
!不填写值
|相应位置填充所设定的包括花括号的参数
|留空
|填充指定的内容
|}
<sup>※ 指定的默认值并不会被存储到Cargo表格中。</sup>

　

=== 调用模板 ===
调用模板的格式为：<syntaxhighlight lang="wikitext" line="1">
{{模板名称|参数=值|参数=值|……}}
</syntaxhighlight>例如，想要在<code>纱路酱</code>的页面使用这个模板，输入以下内容：<syntaxhighlight lang="wikitext" line="1">
{{人物信息|姓名=纱路酱|原名=桐间纱路|性别=女|出生点=点兔}}
</syntaxhighlight>便可渲染出如下结果：
{| class="wikitable"
!姓名
!原名
!性别
!出生点
|-
|纱路酱
|桐间纱路
|女
|点兔
|}
在调用时可适当换行以增加可读性：<syntaxhighlight lang="wikitext" line="1">
{{人物信息
|姓名=纱路酱
|原名=桐间纱路
|性别=女
|出生点=点兔
}}
</syntaxhighlight>
----在可视化编辑器下，可以使用“<code>插入</code>”==>“<code>模板</code>”，并搜索模板，但模板填写的信息<sup>（包括noinclude标记内的）</sup>不会显示，只有侧边一列参数，还需要逐个启用，并填写参数，可视化编辑器的强势点在于文字创作常用功能<sup>(markdown近亲的wikitext语法)</sup>都具备，所见即所得，因此就算有一些微小bug也超过其他流行框架许多，而绝不是维护项目类wiki的利器，其作为博客用途的文章创作很方便，我几乎用不到源代码编辑器，但如果要涉及模板、更多功能还是要源代码编辑器下舒适。

　

=== 在模板页面使用特殊标记 ===
但调用时要一个个写框架很麻烦，我们就可以借助三种标记<sup>(普通页面亦可生效，但通常用于模板)</sup>来增加便捷性：

* <code><nowiki><noinclude> 介绍信息 </noinclude></nowiki></code>：在此标记内的文本会显示在模板页面，但不会被调用；
* <code><nowiki><includeonly> 模板内容 </includeonly></nowiki></code>：此标记内的文本只会被调用，不会显示在模板页面；
* 这两种标记只是影响被标记内容的状态，未被标记的内容即会被显示也会被调用，但在描述时为了方便或许会用“<code>includeonly</code>标记的内容”泛指所有会被调用的字符串。
例如：<syntaxhighlight lang="wikitext" line="1">
<noinclude>
调用方式：
<pre>
{{人物信息
|姓名=
|原名=
|性别=
|出生点=
}}</pre>
</noinclude>

<includeonly>
{| class="wikitable"
!姓名
!原名
!性别
!出生点
|-
|{{{姓名}}}
|{{{原名}}}
|{{{性别}}}
|{{{出生点}}}
|}
</includeonly>
</syntaxhighlight>在模板页面会渲染出如下内容：<blockquote>调用方式：
<pre>{{人物信息
|姓名=
|原名=
|性别=
|出生点=
}}</pre>
</blockquote>如此需要调用模板时，直接访问该模板页面并复制粘贴如上数据，填写需要的参数即可。

注意事项：

* <code><nowiki><pre></nowiki></code>标签是为不让其渲染(类<code>&lt;nowiki&gt;</code>)，同时让每一行换行都生效，并类似于引用的方式<sup>(预排格式)</sup>框起来文本，需要使用时直接复制粘贴其中的内容即可；
* 被<code><nowiki><includeonly></nowiki></code>标签包裹的内容虽然不显示但会占位<sup>(类别语句等也一样)</sup>，相关位置或会空出一行，如果想让空行消失可以删除开头和结尾那些标记的换行，不影响解析，但或影响辨识度。

　

=== 通过表单创建模板 ===
以上是模板的简单应用，它同mediawiki本身一样，就是一些概念的实践产物，因此下限很低、上限很高，但是若想实现一些非常华丽的功能需要css、js、lua等脚本/语言的知识，还需要搭配模块、扩展等，我目前是不够格的。

但也有一些便于创建模板的拓展——用它来创建模板除非学习它的函数，不然不如在普通页面用可视化编辑器写好内容、标记好需手动填写的参数，再手动建立模板，但可以用它来了解模板的结构，比如PageForms(页面表单)，具体的功能可以在 [[特殊:特殊页面#mw-specialpagesgroup-pf_group]] 查阅并试验，这里主要说创建模板：

<html><img loading="lazy" style="width: 700px;" src='https://scio.eu.org/WIKI/图片/建站相关/PageForms.avif' /></html>

* <code>模板名称</code>：模板的页面名，无需挂命名空间前缀；
* <code>模板定义的分类</code>：模板页面的类别归属，跟普通页面的一样；
* <code>使用完整的wikitext而不是#template_display</code>：这是该拓展带的函数，勾选后可以更方便的解析显示的数据，后面会给示例；

* <code>模板字段</code>：需要多少添加多少字段即可，可以拖动 左侧矩形方阵 移动位置
** <code>字段名称</code>：用户自定的参数，赋值用，如果后续要配合cargo表、lua/mysql语句来拓展使用场景，就建议用英文做参数，中文可能有新手无法解决的问题；
** <code>显示标签</code>：表格中会显示的文本；
*<code>输出格式</code>：一般表格和侧边信息框用的多，表格就是示例的那般，侧边信息框就是一般的百科站词条页面右侧的介绍框。
这是'''未勾选'''使用完整wikitext的产生的源代码：利用附带的俩函数实现的生成说明与模板（这个生成说明的函数挺好用）<syntaxhighlight lang="wikitext" line="1">
<noinclude>
{{#template_params:name (label=名称)|original (label=原名)|sex (label=性别)|from (label=出生点)}}
</noinclude><includeonly>
{{#template_display:_format=table}}</includeonly>
</syntaxhighlight>这是'''勾选'''使用完整wikitext的产生的源代码：不过我是没看懂这东西怎么用(为什么这么生成)，因为填上数据解析出来没有表格外框，但懂不懂不影响使用模板，后面可能就懂了，这里只做示例用，下方渲染的是上面的代码。<syntaxhighlight lang="wikitext" line="1">
<noinclude>
这是“人物”模板。它应该以以下格式调用：
<pre>
{{人物
|name=
|original=
|sex=
|from=
}}
</pre>
编辑页面以查看模板文本。
</noinclude><includeonly>{{{name|}}}
{{{original|}}}
{{{sex|}}}
{{{from|}}}
</includeonly>
</syntaxhighlight>模板页面的渲染结果：<blockquote>这是“人物”模板。它应该以以下格式调用：<pre>
{{人物
|name=
|original=
|sex=
|from=
}}
</pre>编辑页面以查看模板文本。</blockquote>调用模板，填上数据后的渲染结果：
{| class="wikitable"
!名称
|纱路酱
|-
!原名
|桐间纱路
|-
!性别
|女
|-
!出生点
|点兔
|}
　

== 第三步 Cargo的简单应用 ==

=== 安装Cargo多出的功能 ===
Cargo是基于数据库与模板的数据管理系统，会根据条件生成含相关数据的表格，并通过查询语句按条件筛选内容。如此便可以用于数据统计<sup>(条目量/内容)</sup>与展示<sup>(通过规则筛选)</sup>，本文章的应用场景就是弄一个老婆墙，相同的原理也可以弄海报墙、专辑墙。它是基于数据库的拓展工具，一些高级功能与mysql语句类似，但我两者都不熟悉，详见mediawiki官网。

安装好Cargo后会有如下变化：

* 数据库会出现一些以“Cargo_”起始的表（后续创建Cargo表也会自动建立新的数据库表）；
** 默认是用mediawiki所使用的数据库，如果要自定义按照[[mediawikiwiki:Extension:Cargo#Configuration|官网指南]]填写前六个参数即可。
* 特殊页面会增添其四个特殊页：[[特殊:特殊页面#mw-specialpagesgroup-cargo]]：
** 查询功能的前端：[[特殊:CargoQuery]]
** 现有Cargo表：[[特殊:CargoTables]]
** 表格所含字段信息：[[特殊:CargoTableDiagram]]
** 罗列选定表所有字段及其涉及的所有内容(列表形式的关系网)：[[特殊:Drilldown]]
* 页面表单的创建模板工具新增“<code>使用Cargo扩展存储该模板的数据</code>”与“<code>模板定义的Cargo表格名称</code>”两个选项
** 若需要用Cargo汇总数据必须勾选前者，不然不会创建Cargo表；
** 选了前者后者必填，是Cargo表的名称，该模板的数据就会存储在设定名称的表中。

　

=== 简单的Cargo表及结构 ===
通过[[特殊:创建模板]]页面新建模板：

<html><img loading="lazy" style="width: 700px;" src='https://scio.eu.org/WIKI/图片/建站相关/PageForms_Cargo.avif' /></html>

相比于[[#通过表单创建模板]]多了几个选项，上面两个前面说过了

* 字段中的<code>类型</code>表示字符串的类型，一般<code>String</code>(不超过300个字符的字符串)就足够了，具体类型及含义见[[mediawikiwiki:Extension:Cargo/Storing_data#Declaring_a_table|官网列举的明细]]。

显示内容为：
<blockquote>
这是“角色信息”模板。它应该以以下格式调用：<pre>
{{角色信息
|姓名=
|原名=
|性格=
}}
</pre>
编辑页面以查看模板文本。

此模板定义表格“二次元老婆”。 此表格尚未创建。</blockquote>生成的源代码为：<syntaxhighlight lang="wikitext" line="1">
<noinclude>
{{#template_params:姓名|原名|性格}}
{{#cargo_declare:_table=二次元老婆|姓名=String|原名=String|性格=String}}
</noinclude><includeonly>{{#cargo_store:_table=二次元老婆}}
{{#template_display:_format=table}}</includeonly>
</syntaxhighlight>
----Cargo有三个主要的函数，它们不影响模板功能，算是一种标记：

* <code>'''#cargo_declare'''</code>：放置于模板的“<code>noinclude</code>”标签内，放置后有如下效果：
** 启用相关入口的权限，例如“<code>'''创建数据表格'''</code>”<sup>(创建后才是建立了Cargo表)</sup>，未定义的无法创建；
** “<code>_table=xxx</code>”对应“<code>模板定义的Cargo表格名称</code>”，后面的对应<code>字段</code>及<code>字段类型</code>，这个只关乎将什么字段存储在Cargo表中，所以可据需要删除字段。
* <code>'''#cargo_store'''</code>：放置于“<code>includeonly</code>”标签内，决定了将数据存储到的Cargo表名；
* 两者指向的表名必须一致，否则数据不会被存储<sup>（同一个模板可以创建多个Cargo表）</sup>；相对于普通的模板，将数据存储到Cargo表的模板就多了这两个标记。
* <code>'''#cargo_query'''</code> ：查询函数，可在其他有需求的页面调用，用来根据[[mediawikiwiki:Extension:Cargo/Querying_data|规则]]查询Cargo表内的数据。
----按照正常的调用模板方式即可食用<sup>（别忘了在模板页上方点击：<code>创建数据表格</code>）</sup>，此时就可以移步[[特殊:CargoTables]]查看现有数据：

<html><img loading="lazy" style="width: 700px;" src='https://scio.eu.org/WIKI/图片/建站相关/CargoTables.avif' /></html>

<html><img loading="lazy" style="width: 400px;" src='https://scio.eu.org/WIKI/图片/建站相关/CargoTables_01.avif' /></html>

虽然很多WIKI站点都是每个条目一个页面，但我们个人WIKI往往没有那么多的内容，就可以考虑让这些条目汇总到一个页面中，来减少只有几个字的页面产生<sup>（别轻易采纳这条意见，我就嘴碎一句）</sup>。
----在模板更新后可以点击“<code>重新创建数据</code>”二次确认后稍加等待，这个更新会根据体量来，上千条那种或许要等很久，在此之前原表为只读状态，直至替换表格(新建的表格)成功建立并点击[[特殊:CargoTables|替换原表]]后；内容有更新但是表格未跟进时也可以通过在模板/表格页重建数据解决。

注意，对已有cargo表新增列的话，重建数据不会更新，需要刷新涉及的所有页面的缓存<sup>（[[建站/WIKI功能/站点维护#清除缓存]]）</sup>。

　

== 第四步 计划需要实现的功能 ==
<blockquote>
　　虽然看起来很麻烦，是也不是。是在于后面所用到的模块涉及到了lua/mysql的编程/维护语句，没有基础确实是看不懂的，反正我就看不懂；不是在于往往只有模板或第一层模块涉及到需要自定义的参数，而这些通常就是需要改一下字段名这种因站而异的参数<sup>（或许有一些个性化的变量，但不影响功能的实现）</sup>，其它更多是在后端实现功能的工具，我们看不懂具体代码，但总能知道要改哪些参数。如此一来在有借鉴源的情况下，也不是不能折腾。

　　前三章的目的就是准备一下环境，并了解一下基础的概念。有些东西的上限是高，但架不住前人够多，我们可以复制粘贴，毕竟基础逻辑并不难，掌握基础逻辑就能知道什么东西是干什么的，如此便能知道复制粘贴代码后该修改哪些自定义参数，入了门以后的折腾也都是学习过程了。无非是最终成品的某些地方我们不理解原理、保留了一些无用内容这种数据冗余、成品可能依赖于现有内容(不会美工)而非自定义而已。但学习/累积经验只是附加奖励，我们的目的本就是目的(老婆墙)本身。</blockquote>本文是我建立自己的二次元老婆墙时记录的笔记，身为技术萌新，为了减少日后维护的麻烦，自然是要弄清自己的需求，尽力弄一个可以满足需求和易用的结构出来，并根据该章程弄模板、建立Cargo表、构建查询/展示方式，最终打造舒适的背景墙。
 请您注意，我也还没经验，并且更无设计意识可言，再加上我本就有重复推翻自己制定的章程的历史习惯，您只做个参考就好。
我的初始目的很简单，仿照 https://lobba.miraheze.org/wiki/The_List 建立我自己的二次元老婆墙，为此要实现的功能及其可能设计的知识点：

* 人物模板与用Cargo存储模板数据（模板/Cargo函数）；
* 构建汇总数据的总表格：
** 正文区域的背景色（style/css）；
** 正文开始的标题及信息统计框（Cargo查询语句）；
** 正文表格的大类别、小类别（模板）；
*** 并显示图片、点击图片跳转人物页面（模板与Cargo查询语句）。
** 初步考虑的优化点：
*** 图片旁的文本就不需要了，我的老婆我都认识，而且中文太占用空间了，写出来也不会好看；
**** 图片间少了文字做缓冲，中间加几px间距或许会美观一些；
**** 就算要文本，它给了俩链接，第一个设定的是跳转到对应标题条目的维基百科，就算用也要改成自定义的萌娘百科url，具体看模板设定。
*** 图片要放大一些；
*** 侧边类别标题用中文或许会遇到排版问题。

　

== 第五步 构造人物模板 ==

=== 计划人物模板 ===
{| class="wikitable" style="float:right; vertical-align:top; margin-left: 15px; width: 300px;"
! colspan="2" |[[文件:纱路酱.jpg|居中|无框]]
|-
! colspan="2" |[https://zh.moegirl.org.cn/桐间纱路 桐间纱路]（萌娘/维基等）
|-
!昵称
|纱路酱
|-
!出生点
|[https://zh.moegirl.org.cn/请问您今天要来点兔子吗？ 请问您今天要来点兔子吗？]（萌娘/维基等）
|-
!地位
|主角/配角/路人
|-
! colspan="2" |家庭职位
|-
!室别
|<nowiki>[[:分类:内室|内室]]</nowiki>（按分类章程来并定位到分类）
|-
!职权
|<nowiki>[[:分类:正室|正室]</nowiki>]（示例就不让其渲染了）
|-
!权重
|1-999（方便后续排序）
|-
!信息
|是否有除表格外的其他信息
|}
首先我们要弄一个符合自己需求的表格，可以配合可视化编辑器、他人表格、[https://tableconvert.com/excel-to-mediawiki excel]等方式建立，然后再进入源代码编辑器下将需要手动填写的内容改成参数：

* 可视化编辑器做不到的主要是修改表格样式，示例表格用的是<code>style="float:right; vertical-align:top; margin-left: 15px; width: 300px;"</code>，跟html语法是一致的。

表格模板只需要这些内容，其他内容（如碎碎念、相关资源）可以在角色主页填写。

=== 编写人物模板 ===
于是我们根据自己的需求建立了表格，现在将其源代码写入模板中并用参数替换掉需要手动编写的部分（最后一行是设定的分类）：<syntaxhighlight lang="wikitext" line="1">
{| class="wikitable" style="float:right; vertical-align:top; margin-left: 15px; width: 300px;"
! colspan="2" |[[文件:{{{Image}}}|无框]]
|-
! colspan="2" |[{{{NameWiki}}} {{{Name}}}]
|-
!昵称
|{{{Nick_name}}}
|-
!出生点
|[{{{SeriesWiki}}} {{{Series}}}]
|-
!地位
|{{{Role}}}
|-
! colspan="2" |家庭职位
|-
!室别
|[[:分类:{{{Type}}}|{{{Type}}}]]
|-
!职权
|[[:分类:{{{SubType}}}|{{{SubType}}}]]
|-
!权重
|{{{Weights}}}
|-
!信息
|{{{Info}}}
|}[[分类:{{{Type}}}]][[分类:{{{SubType}}}]]
</syntaxhighlight>

* 其中必要的字段：
** <code>Weights</code>、<code>Name</code>：用于后续cargo表的查询、排序（暂时看不懂无所谓，因为有后面的知识点）。
*** 按作用说没写Weights它就按Name字段查询或排序，最起码只影响查询，而且在测试的时候好像也没事，但后面发现没写Weights它也不写入cargo表中。
** <code>SubType</code>：用于分组/类别，展示改组包含的角色。
* 建议的字段：
** <code>NameWiki</code>、<code>Series</code>、<code>SeriesWiki</code>：作品信息及指向的url；
** <code>Image</code>：图片文件，缺失会无法显示海报；
* 以上是海报墙所需要的全部信息，但添加以下内容会使体验更好点：
** <code>Role</code>：主角、主要、配角信息，用于在cargo表视图内分析数据用；
** <code>Info</code>：是否有补充信息，用于在cargo表内筛选数据，毕竟角色/创建的页面很多，但有补充资源的只是少数，减少无用的访问；
** <code>Nick_name</code>：昵称，其他称谓。
** <code>Type</code>：一级类别，可以根据需要是否选择留用，反正决定展示的数据的是子类别，给子类别划入大类别下就行了。

=== Cargo表格标记 ===

'''noinclude标签内''' 插入<code>#cargo_declare</code>函数 使模板数据存储到Cargo表并根据需求设定包含的字段<sup>(我就把url_name删掉了)</sup>和[[mediawikiwiki:Extension:Cargo/Storing_data#Declaring_a_table|字段类型]]：
* 图片我是按照String存的，不然Cargo表中会显示有框略缩图，太占空间了；
* url太长了所以我就按照URL类型存储，在Cargo表中会显示“URL”文本，url链接到了此文本上。
<syntaxhighlight lang="wikitext" line="1">
{{#cargo_declare:_table=二次元老婆|Image=String|Name=String|NameWiki=URL|Nick_name=String|Series=String|SeriesWiki=URL|Role=String|Type=String|SubType=String|Weights=Integer|Info=String}}
</syntaxhighlight>'''includeonly标签内''' 插入<code>#cargo_declare</code>函数 使模板数据存储到指定的表中：<syntaxhighlight lang="wikitext" line="1">
{{#cargo_store:_table=二次元老婆}}
</syntaxhighlight>

=== 优化代码 ===
使用页面表单提供的<code>#template_params</code>函数生成调用模板的结构（noinclude标签内），就不必自己写说明了：<syntaxhighlight lang="wikitext" line="1">
{{#template_params:Image|Name|NameWiki|Nick_name|Series|SeriesWiki|Role|Type|SubType|Weights|Info}}
</syntaxhighlight>但可以添加一些注释来解释用法，并组合这些数据。
----可以根据需求添加管道符"|"以便于未填写值时输出空内容。最终我们得到以下成品'''<u>模板:老婆</u>'''<sup>（除非您明确的知道自己在做什么，否则建议参数使用英文，以便减少不必要的麻烦）</sup>：<syntaxhighlight lang="wikitext" line="1">
<noinclude>
{{#cargo_declare:_table=二次元老婆|Image=String|Name=String|NameWiki=URL|Nick_name=String|Series=String|SeriesWiki=URL|Role=String|Type=String|SubType=String|Weights=Integer|Info=String}}
{{#template_params:Image|Name|NameWiki|Nick_name|Series|SeriesWiki|Role|Type|SubType|Weights|Info}}
注意事项：
* Image：输入图片的完整名称，例如“纱路酱.jpg”，无需输入“file:”前缀；
* NameWiki/SeriesWiki：对应百科/介绍的链接；
* Weights：权重，填写1-999的数字，便于排序（默认1最大）
* Info：是否有更多的信息（如同人资源、相关站点、资讯等）
</noinclude>
<includeonly>{{#cargo_store:_table=二次元老婆}}
{| class="wikitable" style="float:right; vertical-align:top; margin-left: 15px; width: 300px;"
! colspan="2" |[[文件:{{{Image|暂未上传.jpg}}}|无框]]
|-
! colspan="2" |[{{{NameWiki|}}} {{{Name|}}}]
|-
!昵称
|{{{Nick_name|}}}
|-
!出生点
|[{{{SeriesWiki|}}} {{{Series|}}}]
|-
!地位
|{{{Role|}}}
|-
! colspan="2" |家庭职位
|-
!室别
|[[:分类:{{{Type}}}|{{{Type}}}]]
|-
!职权
|[[:分类:{{{SubType}}}|{{{SubType}}}]]
|-
!权重
|{{{Weights|}}}
|-
!信息
|{{{Info|无}}}
|}[[分类:{{{Type}}}]][[分类:{{{SubType}}}]]</includeonly>
</syntaxhighlight>※ 创建模板后记得'''创建数据表格'''。

　
== 第六步 构造汇总列表模板 ==
 一中一英出现的模板/模块名，通常英文名称引用了源站链接，中文名称是我复刻时自定义的，我陈设源代码时相关区域<sup>(调用模板/模块)</sup>也用的修改后的中文名，请注意甄别，如果我们用的不一样，请在调用它们的页面修改所调用模板/模块的名称，正文中不再赘述。

=== 分析lobba的汇总页 ===
我就完全的按照[https://lobba.miraheze.org/wiki/The_List lobba]的汇总页样式来，但结构肯定是需要有所修改。它的源代码可以分为几部分：

1、隐藏页面的标题<sup>（启用NoTitle拓展即可，不再赘述，但建议放置于文末以防其占用空行）</sup>：<syntaxhighlight lang="wikitext" line="1">
__NOTITLE__
</syntaxhighlight>
2、css样式<sup>（安装css拓展可以直接用，不再赘述）</sup>：<syntaxhighlight lang="wikitext" line="1">
{{#css: .mw-body {background: #70547c;} }}
</syntaxhighlight>3、分布在表格前与后的两个 于服务器端刷新缓存及上次清楚缓存的时间 的按钮（<code>使用到了模板:CacheTimestamp</code>）：<syntaxhighlight lang="wikitext" line="1">
<div style="text-align:right; font-size:10px; font-family:'Franklin Gothic'">{{CacheTimestamp|#eeeeee50|cache last purged at }}</div>
</syntaxhighlight><syntaxhighlight lang="wikitext" line="1">
<div style="line-height: 95%; text-align:right; font-size:10px; font-family:'Franklin Gothic'">{{CacheTimestamp|#eeeeee50|cache last purged at }}<br><span class="plainlinks">[https://lobba.miraheze.org <span style="color:#eeeeee50">lobba.miraheze.org</span>]</span></div>
</syntaxhighlight>4、剩下的就是表格的主体：<syntaxhighlight lang="wikitext" line="1">
{| class="wikitable" <!-- style="width:1225px;margin:auto;" -->
| style="line-height:75%;height:150px;background:#17111b;text-align:center;color:#eee;font-weight:bold;font-size:31px;font-family:'Franklin Gothic';border: 2px solid #70547c" colspan=2 | Eternal Loli List<br><span style="font-size:15px">Currently containing [[:Category:Character|<span style="color:#eee">{{countEntries}} entries</span>]]</span>
<div style="top:0px"><span style="font-size:10px">[[Main Page/Create Page|<span style="color:#eee">Create Page</span>]]  |  [[Main Page|<span style="font-size:12px;color:#eee">Main Page</span>]]  |  [[Help:Guidelines|<span style="color:#eee">Guidelines</span>]]</span></div>
|-
! {{StandaloneTypeHeader|Alien}}
|-
……引用的若干模板
|-
! {{StandaloneTypeHeader|Unknown}}
|}
</syntaxhighlight>可以发现这个页面并没有直接引用具体内容，而是搭造了个框架/表格，并以嵌入模板的形式嵌入内容，也就是说具体的内容取决于所引用的模板设定的代码，那我们就先将框架弄起来再根据需求搭建内容模板。

虽然内容很多，但我们只需要掌握了基础的规则，再循着 标记/标签 的起始和结尾就可以轻松的将代码进行分割并得知其作用，即使有不了解的也可以将其复制粘贴到新页面并预览查看渲染结果，通过增删相关代码后页面的变动来更直观的分析：

<html><img loading="lazy" style="width: 600px;" src='https://scio.eu.org/WIKI/图片/建站相关/wife_list.avif' /></html>

这些模板共有四个，经过与[https://lobba.miraheze.org/wiki/The_List lobba渲染出来的列表]进行对比分析可以轻松的得知以下情报：

<html><img loading="lazy" style="width: 600px;" src='https://scio.eu.org/WIKI/图片/建站相关/wife_list_template.avif' /></html>

* <code>模板:CountEntries</code>：用于统计条目数量
* <code>模板:TypeHeader</code>：一级分类的样式（横向标题）
* <code>模板:SubTypeHeader</code>：二级分类的样式（侧边竖排标题+右侧图库/表格形式的罗列条目图片，并使其索引到条目页）
* <code>模板:StandaloneTypeHeader</code>：该大类别下有且仅有一个同名子分类时采用（将一二级标题的样式组一块弄了个模板）

他这个设计应该是为了方便统计有且仅有一个一级分类的信息，如果没有需求就可以不用<code>模板:StandaloneTypeHeader</code>，毕竟它也只是两个模板的合体版本。
----到这里我们就可以知道要做什么：

* 第一、二部分，在分析时就提及了无需过多关注。
* 第三部分：刷新缓存与显示时间的<code>模板:CacheTimestamp</code>；（章节：[[#刷新缓存与时间戳]]）
* 第四部分：
** 目前来看最主要的是承载数据的部分：<code>模板:TypeHeader</code>、<code>模板:SubTypeHeader</code>；（章节：[[#父子类别模板]]）
** 其次是以此为基础的统计条目数量：<code>模板:CountEntries</code>；（章节：[[#统计条目数量]]）
** 显示的文本内容（[[#表头内容修缮]]）；

　

=== 父子类别模板 ===
==== 父类别模板 ====
<code>[https://lobba.miraheze.org/wiki/Template:TypeHeader 模板:TypeHeader]</code> / <code>模板:老婆_父类别</code>：<syntaxhighlight lang="wikitext" line="1">
<noinclude>{| class="wikitable sortable"
|</noinclude> style="height:12px;background:#70547c;border: 2px solid #70547c" colspan=2 | 
|-
| style="background:#17111b;text-align:center;color:#eee;font-weight:bold;font-size:25px;font-family:'Franklin Gothic';border: 2px solid #70547c; box-shadow: 0 2px 0px -1px #70547c inset, 0 -2px 0px -1px #70547c inset;" colspan=2 | <div id="{{{1}}}"></div> [[:Category:{{{1}}}|<span style="color:#eee">{{{1}}}</span>]]<noinclude>
|-
|}
</noinclude>
</syntaxhighlight>该模板不涉及任何信息，只是统一的样式+链接到参数<sup>(目标分类)</sup>而已，'''<u>可以直接复制粘贴，</u>'''您也可以根据自己的喜好调整字体、大小、颜色等参数，跟html语法一样。

但我们可以看它的写法。因为表格框架本身被汇总墙页面写好了，所以它只是要以内容的形式填充进去，但光有样式除非让其被<code>includeonly</code>标记，否则会很难看，而给其按照表格样式写个外框，并将不需要调用的内容用<code>noinclude</code>标记起来，这样在模板页显示的也会更美观与能彰显其效果。

　

==== 子类别模板 ====
<code>[https://lobba.miraheze.org/wiki/Template:SubTypeHeader 模板:SubTypeHeader]</code> / <code>模板:老婆_子类别</code>：<syntaxhighlight lang="wikitext" line="1">
<noinclude>{| class="wikitable sortable"
! </noinclude>{{Vertical Header|va=middle|cellstyle=font-family:'Franklin Gothic';font-size:16px;color:#eee;background-color:#17111b;border:#70547c 2px solid; box-shadow: 0 2px 0px -1px #70547c inset, 0 -2px 0px -1px #70547c inset;|[[:Category:{{{1}}}|<span style="color:#eee">{{{1}}}</span>]]}}
| style="background:#70547c;border: #70547c 2px solid" | <div id="{{{1}}}"></div>{{#invoke:TheEternalList|list|"{{{1}}}"}}<noinclude>
|-
|}
</noinclude>
</syntaxhighlight>
我们删掉<code>noinclude</code>标记的内容以及已知作用的元素<sup>(样式)</sup>部分就可以得到两个未知项：<syntaxhighlight lang="wikitext" line="1">
{{Vertical Header|va=middle|cellstyle=|[[:Category:{{{1}}}|{{{1}}}]]}}

{{#invoke:TheEternalList|list|"{{{1}}}"}}
</syntaxhighlight>他们分别是管理子标题样式的 <code>Template:Vertical_header</code> 、管理内容的<code>Module:TheEternalList</code>，既然这个模板也没有实质性的功能，<u>'''那就可以先行建立该模板，等解决所需要的模板/模块后，自然就能正常使用'''</u>，注意若您后续自定义了这两个模板/模块的名称(例如跟我一样用了中文名)，不要忘记返回此模板页进行修改。

　

===== 管理内容 =====
我们先处理内容，让这东西跑起来，给自己增添点士气。管理内容的模块是用lua写的，我目前一点看不懂，但是我们要识别一些关键词，譬如原主使用的cargo表名是loliinfo等，而我们使用的是“二次元老婆”，以及我们使用的字段不同，就要编辑相关区域——这就足够了。

原作者编写的[https://lobba.miraheze.org/wiki/Module:TheEternalList Module:TheEternalList]很长，但大家写代码时所用的变量名大都是通俗易懂的，我们在移植别人的内容时就可以采用增删法：

* 将代码拆分，并不需要知道该语言的结构，因为其实语句、结束语句大都是有规律或特定排版可参考<sup>（重复的标记、end、各种括号起始、循环出现的相同框架的内容等）</sup>；
* 识别变量的含义与参数的作用/来源<sup>（往往都是字面意思或与其他已存在事物相关的，并不是闭门造车式的硬猜）</sup>。

显然第一行是导入外部文档；<code>local xxx</code> 是代码主体起始，而最后一行的 <code>return p</code> 是结束；中间的 <code>function xxx</code> 至 <code>end</code> 各是一个整体。

我们的需求就是从子类别<sup>(SubType)</sup>中筛选信息，并按照权重<sup>(Weights)</sup>顺序排列，然后 展示条目的图片 并 链接至条目页面，汇总页及其所涉的模板与模块就是为此而服务，且这几个功能一看就是同一性质的，都是用来查询&筛选Cargo表的，而我们需要查询的内容很单一，那想必是有很多代码是不必要的。

因为它(lobba)从<code>Template:Character</code>(角色的)模板开始就建立了三个Cargo表，我的需求与其不同，所以自己写了个简单的角色模板，也只有一个Cargo表，自然不可能每个都有用。

我采用的是''<u>增加法</u>''，保留大框架，选择性增加function部分观察其效果，我以为第一部分的listType有作用，保存之后，在老婆墙<sup>(汇总页面)</sup>点击编辑源代码并点击预览查看最新效果，其提示“<code>脚本错误：函数“list”不存在</code>”。经过试验，只添加<code>function p.list()</code>、除了它都添加上，最终确认是它实现了本页的效果<sup>（其实在模板页调用模块的时候就写了参数“list”）</sup>，且无缺失功能，于是'''<u>创建<code>模块:老婆_子类别</code>且复制粘贴</u>'''<sup>（注意看注释信息，修改你自己需要用到的Cargo表及字段名）</sup>：<syntaxhighlight lang="lua" line="1">
require('Module:Card')

local p = {}
local cargo = mw.ext.cargo
--https://help.gamepedia.com/Extension:Cargo
--https://www.mediawiki.org/wiki/Extension:Cargo

function p.list()
    local args = mw.getCurrentFrame().args[1]
    local qFields = "Name, NameWiki, Image, Type, SubType, Series, SeriesWiki, Weights, _pageName" -- Cargo标所含的字段名称，但不需要写全，似乎是先导入的意思(查询源)
    local qArgs = {
        where = 'SubType = ' ..  tostring(args) , -- 在 字段：SubType(子类别) 查询
        orderBy = "Weights, Name", -- 查询结果的排序所依据的字段（1-->9, a-->z）
        limit = 2000,
        --groupBy = "Type"
    }
    local lolis = cargo.query("二次元老婆",qFields, qArgs) -- 查询所使用的表格，前面的自定义变量“lolis”改不改都无所谓，但改了下面的也都要改
    --mw.logObject(lolis)
    local root = mw.html.create('div')
        :cssText('display:flex; flex-flow:row wrap; hyphens:Auto;')

    for i,loli in ipairs(lolis) do
        --mw.logObject(i)
        --mw.logObject(loli)
        root:Card(loli)
    end

    return root
end

return p
</syntaxhighlight>'''<u>其他新增的页面</u>'''（链接到了lobba的原始页面，创建同名页面，并复制粘贴就行了）：

* <code>[https://lobba.miraheze.org/wiki/Module:Card 模块:Card]</code>
** <code>[https://lobba.miraheze.org/wiki/Module:WikiLink 模块:WikiLink]</code>
*** <code>[https://lobba.miraheze.org/wiki/Module:StrSplit 模块:StrSplit]</code>
** <code>[https://lobba.miraheze.org/wiki/Module:CommonReplacements 模块:CommonReplacements]</code>
** <code>[https://lobba.miraheze.org/wiki/Module:StrManip 模块:StrManip]</code>
渲染效果：

<html><img loading="lazy" style="width: 600px;" src='https://scio.eu.org/WIKI/图片/建站相关/wife_list_SubType.avif' /></html>

图方便用的同一组数据<sup>（缺失图片是不会展示在汇总页内的）</sup>，权重设定的分别是1,3,5，顺序也确实受其影响，到这里我们就可以愉快的玩耍了，毕竟剩下的都是小细节了，就算其他功能都无法实现，主体已经弄好了！

===== 子标题样式 =====

现在我们要完善左侧边栏，<code>Template:Vertical Header</code> / <code>模板:垂直标头</code>：<syntaxhighlight lang="wikitext" line="1">
<noinclude>
{|class="wikitable sortable"
! </noinclude>{{#invoke:Vertical header|cell|text={{{1|<noinclude>Sample text</noinclude>}}}|sortPadding={{{stp|}}}|vertAlign={{{va|bottom}}}|maxWidth={{{mw|}}}|noBold={{{nb|}}}|style={{{style|}}}|cellstyle={{{cellstyle|}}}}}<noinclude>
|}
</noinclude>
</syntaxhighlight>去除noinclude标记的内容我们可以得知这也是一个调用了同名模块的模板。我看了但是看不懂，考虑到体量较小，就不动它了。

于是'''<u>复制粘贴以下模板/模块即可</u>'''<sup>（如果您也改了名字，记得将<code>模板:垂直标头</code>第3行调用的模块、<code>模块:垂直标头</code>第37行调用的俩模板名改一下）</sup>：

* <code>模板:垂直标头</code>（[https://lobba.miraheze.org/wiki/Template:Vertical_Header Template:Vertical_Header]） 侧边标题使用的样式，但只是个框架，调用了同名模块<sup>（如果您也用了中文名，记得改下调用的模块名）</sup>
** <code>模块:垂直标头</code>（[https://lobba.miraheze.org/wiki/Module:Vertical_header Module:Vertical_header]）如果您也用了中文名，记得修改第37行调用的模板名；第二个模板的参数是控制文本旋转度数，对于中文来说没用，输入0就是没旋转，但可以留着备用；当调用的模板不存在时可能会报错，忽略就行。
*** <syntaxhighlight lang="wikitext" line="1" start="37">
	wikiText = wikiText .. " | <div style=\"" .. frame:preprocess("{{输入模块|v1}}{{变换旋转|0}}") .. "-ms-Transform: none \ ;padding-left:1px;text-align:"
</syntaxhighlight>
*** <code>模板:输入模块</code>（[https://lobba.miraheze.org/wiki/Template:Writing-mode Template:Writing-mode]）
*** 如果没有旋转文字的需求，以下两个模板可以不要，但记得将<code>模块:垂直标头</code>第37行中的<code><nowiki>{{{变换旋转|0}}}</nowiki></code>删掉：
*** <code>模板:变换旋转</code>（[https://lobba.miraheze.org/wiki/Template:Transform-rotate Template:Transform-rotate]）<sup>如果您也用了中文名，记得修改调用的模板名。</sup>
**** <code>模板:转换</code>（[https://lobba.miraheze.org/wiki/Template:Transform Template:Transform]）

渲染效果：

<html><img loading="lazy" style="width: 600px;" src='https://scio.eu.org/WIKI/图片/建站相关/wife_list_SubType_tittle.avif' /></html>

　

=== 统计条目数量 ===
<code>[https://lobba.miraheze.org/wiki/Template:CountEntries 模板:CountEntries]</code> / <code>模板:条目计数器</code>：<syntaxhighlight lang="wikitext" line="1">
{{#invoke:CountEntries|main}}
</syntaxhighlight>
它只调用了同名模块：[https://lobba.miraheze.org/wiki/Module:CountEntries <code>Module:CountEntries</code>] / <code>模块:条目计数器</code>：<syntaxhighlight lang="lua" line="1">
local p = {}
local cargo = mw.ext.cargo

function p.main()
    local qArgs = {
    where = "NOT Type= 'Test'",
    orderBy = "Name",
    limit = 5000,
    }
    local lolis = cargo.query("二次元老婆","Name",qArgs) --修改为自己用的表名
    local total = 0
    for i,loli in ipairs(lolis) do
        total = total + 1
    end
    --mw.logObject(lolis)
    --mw.log(total)
    return total

end
return p
</syntaxhighlight>
'''<u>创建这两个模板/模板页面并复制粘贴</u>'''：若您也用了中文名记得修改调用的模块名、模块中的Cargo表名记得修改为自己实际用的<sup>（name是字段，意思是在这个表查询这个字段的值的数量）</sup>。

　

=== 刷新缓存与时间戳 ===

==== 模板/模块部分： ====
'''<u>创建</u>''' [https://lobba.miraheze.org/wiki/Template:CacheTimestamp <code>模板:CacheTimestamp</code>] / <code>'''<u>模板:缓存与时间戳</u>'''</code><sup>（记得按照你自己对时间戳模板的命名来修改）</sup>：<syntaxhighlight lang="wikitext" line="1">
<span class="plainlinks">[https://localhost/test/index.php?title={{PAGENAMEE:{{FULLPAGENAME}}}}&action=purge <span style="color:{{{1|#000}}}">{{{2|}}}{{#invoke:时间戳|timestamp}} UTC+8</span>]</span>
</syntaxhighlight>
对于清除页面缓存：<code>设定的域名前缀</code><sup>（记得修改为你的url）</sup> + <code>利用魔术字生成的页面名称</code> +<code>固定字符串</code> 拼接出来用于刷新服务器端缓存的url；

对于清除页面缓存的时间戳：调用了[https://lobba.miraheze.org/wiki/Module:Timestamp <code>Module:Timestamp</code>] / <code>'''<u>模块:时间戳</u>'''</code>，修改下其中的时间代码以更符合国人习惯<sup>（示例为2024-12-31 23:59:59，代码参考：[https://help.gnome.org/users/gthumb/stable/gthumb-date-formats.html.en Date/Time Format Codes]）</sup>：<syntaxhighlight lang="lua" line="1">
local p = {}
function p.timestamp()
    local time = os.date("%Y-%m-%d %k:%M:%S")
    mw.logObject(time)
    return time
end
return p
</syntaxhighlight>

==== 汇总页部分： ====
在老婆墙<sup>(汇总页)</sup>修改下原来的提示文本，（第一部分放置于表格前，第二部分放置于表格后）：<syntaxhighlight lang="html" line="1">
<div style="text-align:right; font-size:10px; font-family:'Franklin Gothic'">{{缓存与时间戳|#eeeeee50|上次更新于 }}</div>

<div style="line-height: 95%; text-align:right; font-size:10px; font-family:'Franklin Gothic'">{{缓存与时间戳|#eeeeee50|上次更新于 }}<br><span class="plainlinks">[https://localhost <span style="color:#eeeeee50">localhost</span>]</span></div>
</syntaxhighlight><sup>※ span标签标记的是一句url声明，想留着的话改下url即可。</sup>

　

=== 表头内容修缮 ===
[[#分析lobba的汇总页]] 第四部分的起始就是这段文本信息，您可以根据自己的需求配合wikitext语法进行修改<sup>（主要就是文字信息、引链）</sup>：<syntaxhighlight lang="wikitext" line="1">
| style="line-height:75%;height:150px;background:#17111b;text-align:center;color:#eee;font-weight:bold;font-size:31px;font-family:'Franklin Gothic';border: 2px solid #70547c" colspan=2 | 我和我的二次元老婆们<br><span style="font-size:15px">我骄傲的拥有 [[特殊:CargoTables/二次元老婆|<span style="color:#eee">{{条目计数器}} 个挚爱</span>]]</span>
<div style="top:0px"><span style="font-size:10px">[[scio:建站/框架/WIKI功能/二次元老婆墙|<span style="color:#eee">复刻二次元老婆墙</span>]]  |  [[我和我的二次元老婆们|<span style="font-size:12px;color:#eee">主页</span>]]  |  [[挠头帝国二次元老婆结婚条例|<span style="color:#eee">二次元老婆结婚条例</span>]]</span></div>
</syntaxhighlight>　

=== 汇总一处 ===
我们已经修缮了所有能修缮的地方，到目前为止老婆墙已经初步成型了，'''<u>这是老婆墙<sup>(汇总页)</sup>的代码</u>'''：<syntaxhighlight lang="wikitext" line="1">
{{#css: .mw-body {background: #70547c;} }}
<div style="text-align:right; font-size:10px; font-family:'Franklin Gothic'">{{缓存与时间戳|#eeeeee50|上次更新于 }}</div>
{| class="wikitable" <!-- style="width:1225px;margin:auto;" -->
| style="line-height:75%;height:150px;background:#17111b;text-align:center;color:#eee;font-weight:bold;font-size:31px;font-family:'Franklin Gothic';border: 2px solid #70547c" colspan=2 | 我和我的二次元老婆们<br><span style="font-size:15px">我骄傲的拥有 [[特殊:CargoTables/二次元老婆|<span style="color:#eee">{{条目计数器}} 个挚爱</span>]]</span>
<div style="top:0px"><span style="font-size:10px">[[scio:建站/框架/WIKI功能/二次元老婆墙|<span style="color:#eee">复刻二次元老婆墙</span>]]  |  [[我和我的二次元老婆们|<span style="font-size:12px;color:#eee">主页</span>]]  |  [[挠头帝国二次元老婆结婚条例|<span style="color:#eee">二次元老婆结婚条例</span>]]</span></div>
|-
! {{老婆_父类别|内室}}
|-
! {{老婆_子类别|正室}}
|-
! {{老婆_子类别|副室}}
|-
! {{老婆_子类别|侧室}}
|-
| {{老婆_父类别|外室}}
|-
! {{老婆_子类别|偏室}}
|-
! {{老婆_子类别|外交}}
|-
! {{老婆_子类别|教育}}
|-
| {{老婆_父类别|预备役}}
|-
! {{老婆_子类别|知己}}
|-
! {{老婆_子类别|共鸣}}
|-
! {{老婆_子类别|涩涩}}
|}<div style="line-height: 95%; text-align:right; font-size:10px; font-family:'Franklin Gothic'">{{缓存与时间戳|#eeeeee50|上次更新于 }}<br><span class="plainlinks">[https://localhost <span style="color:#eeeeee50">localhost</span>]</span></div>

__NOTITLE__
</syntaxhighlight>渲染结果：

<html><img loading="lazy" style="width: 800px;" src='https://scio.eu.org/WIKI/图片/建站相关/wife_list_01.avif' /></html>

※ 目前内容太少，宽度撑不起来，填充多了就好看了。

　

== 第七步 进一步优化细节 ==
第四步的计划还未彻底解决，目前还有：

* 清除图片旁的文本，或使文本链接至url(百科)字段；

* 放大图片，并视情况选择是否增加图片间距(默认就有约5px间距)；
----对于html样式的修改，我们可以采用观察法，查看页面源代码相关区域所使用的class属性等关键信息结合代码进行判断，譬如图片的尺寸：

<html><img loading="lazy" style="width: 800px;" src='https://scio.eu.org/WIKI/图片/建站相关/wife_list_card-bottom.avif' /></html>

在寻找这个元素的过程中可以通过审查区域左上角(查看器左侧)的小工具点击页面元素，以便于快速定位。

在我们知道它的class属性后就可以到决定它样式的模板/模块中寻找，最终可以在<code>模块:Card</code>第35行找到它，并在36行发现它的宽度设置部分：<syntaxhighlight lang="text" line="1" start="36">
width:' .. tonumber(params.cardHeight * 0.7) .. 'px;
</syntaxhighlight>其他的都不用管，我们只看能看得懂的部分，这看起来就像是一个运算规则，我们再搜索“<code>cardHeight</code>”，在第11行可以发现：<syntaxhighlight lang="text" line="1" start="11">
	cardHeight = 140;
</syntaxhighlight>此时就不难理解它们的作用了，<code>cardHeight</code>设定了图片高度，而高度*0.7便是设定的宽度。

在寻找它的相关信息时也不难发现这个图片是被完整加载了的，只是被一个外框给框住，压缩至设定的高度，居中显示，溢出至框外的宽度部分不显示而已——这些信息或许没什么用，但这就是了解与学习的过程，且知道这些信息后或许会让自己多留意些以免上传大量高分辨率尺寸的题图影响海报墙的加载速度。
----对于决定样式的代码，图片及文本的展示是使用的<code>模板:老婆_子类别</code>，而其没有作用只是调用了<code>模块:老婆_子类别</code>，但此模块只是按照规则从Cargo表中筛选出数据，那就再深入其加载的<code>模块:Card</code>和其调用的其他模块，这种逻辑形式的筛选与排查再配合一丢丢的对关键词/变量的注意力就足够应付框架内的样式修改了，在这里我们可以得出简单的结但并未发现什么与论：<code>'''模块:Card'''</code>是主要需要修改的代码，其他页面只是辅佐其实现功能的产物。
----对于我们新手来说，不怕错、不怕失误，我们就可以多试，错了再寻找线索便是，测试也不麻烦，我们可以在源代码编辑器下用“预览”功能，而不必刷新页面缓存或修改内容再提交修改。

　

=== 调整元素大小 ===
'''修改图片尺寸'''：按照本章引文所言，我们可以知道决定它尺寸的是<code>'''模块:Card'''</code>第11行，我修改为了200。<syntaxhighlight lang="lua" start="11" line="1">
	cardHeight = 200;
</syntaxhighlight>'''修改文本区域宽度'''：当图片尺寸增大时，会发现文本区域宽度也变大了，这就不好看了，于是我们寻找其区块的calss属性，发现起到作用的是：“<code>card-rightSeries</code>”、“<code>card-rightName</code>”的<code>width</code>参数；同时每个条目使用的“<code>loliCard</code>”决定了总宽度。我们在<code>'''模块:Card'''</code>，中索引这些关键词可以发现其<sup>(有三处)</sup>宽度的值都是“<code>tonumber((params.cardHeight / 2)+5)</code>”，这看着就是运算规则，于是我用了<code>tonumber((params.cardHeight / 2)-20)</code>。

　

=== 调整附加文字 ===
我们需要进行以下优化：

* （可选）将 跳转到维基百科 改为 跳转到萌娘百科；
* 修改显示文本及引用的url。
----'''修改引链'''：通过<code>跨wiki链接</code>实现，先按照[[建站/WIKI功能/功能实现#跨WIKI链接|跨WIKI链接]]设定萌娘百科的前缀，再修改<code>'''模块:Card'''</code>的第62行使其应用到老婆墙中：<syntaxhighlight lang="lua" line="1" start="62">
    local wikiString = "[[moegirl:".. indSub .."|<span style='color:#eee'>".. commonReplacements(ind) .."</span>]]"
</syntaxhighlight>但这个功能非常鸡肋，因为因为如果作品跨类别或小众，萌百不一定有，且萌百的页面名或我叫顺口的作品名不一定标准，名字或作品名过长我不一定就想那么使用等情况，就自己设定角色与作品的名字与url好了<sup>（这个要配合模板，我上面写的模板已经考虑了该变故）</sup>。
----'''修改显示文本及引用的url'''：我的需求是：

* 图片索引目标改为页面<sup>（原设定是<code>Name</code>字段，但或许会有名称与页面名不一致的情况，于是采用表格自带的 <code>_pageName</code>字段）</sup>
* 修改显示的文本信息：
** 上方文本显示老婆的名字<sup>（根据<code>Name</code>字段）</sup>，链接至百科页<sup>（根据<code>NameWiki</code>字段）</sup>
** 下方文本显示作品的名字<sup>（根据<code>Series</code>字段）</sup>，链接至百科页<sup>（根据<code>SeriesWiki</code>字段）</sup>
注意事项：

* 均在<code>'''模块:Card'''</code>页面修改；
* 所涉及的字段在[[#管理内容]]创建相关模块时就添加上了，若您需要用到的字段没添加，记得加上；
* 注意变量大小写保持一致，源代码就是<code>right'''X'''xxx</code>、<code>'''x'''xxxLen</code>，尤其是后面那个<sup>（保持大小写一致即可，使其能对应上即可）</sup>。
'''1、图片索引目标改为页面：'''<blockquote>
我们可以根据实际效果辅助判断，比如分析html代码，图片在class属性为“<code>card-bottom</code>”的div标签内，在模块页索引此关键词发现其在第35行，但并未发现有什么地方控制了url，且搜索可能相关的参数“<code>args.bottom</code>”也没有直接线索。 ——这就是一个无效的试验，这也是在连皮毛都弄不清的情况下去折腾的最显著的特征，那就是时间被浪费到这种事情上，而如果但凡入了点门，知道它们的结构，也不至于如此，因此无基础的折腾与学习基础再折腾，是需要认真衡量的。虽然如果没有特殊需求(如专门写出来供提醒)也不太浪费精力，笔记我复刻它花了2天，写这篇文章花了五天(虽然是把整个建站系列给维护了一下)。</blockquote>
我们索引“<code>Image</code>”关键词<sup>（亦是存储图片的字段）</sup>，发现第121行有一堆设定信息，其也是设定的bottom的属性：<syntaxhighlight lang="lua" line="1" start="121">
	arg2.bottom = args.Image~='' and "<div style='position: relative; bottom:".. tonumber(params.cardHeight / 2) .."px;' id='"..args.Name.."'></div>[[File:" .. args.Image .. "|frameless|x" .. params.cardHeight .. "px|link=" .. args._pageName:gsub(" ", "_"):gsub("&#8203;", ""):gsub("&shy;", "") .. "]]" or "[[File:Test.png|frameless|x" .. params.cardHeight .. "px|link=" .. args._pageName:gsub(" ", "_"):gsub("&#8203;", ""):gsub("&shy;", "") .. "]]"
</syntaxhighlight>
看不懂没关系，但我们知道原主是使用的“<code>Name</code>”字段做指向的url，这里有两处出现了“<code>args.Name</code>”，分别是“id”与“link”，前者虽然看起来人畜无害但不妨全都'''修改为“<code>args._pageName</code>”'''。

'''2、上方文本显示老婆的名字并链接至百科页'''

通过class属性可知“<code>card-rightSeries</code>”控制着上方文本的区块，“<code>card-rightName</code>”控制着下方文本的区块。

* 这里有点绕，因为原上方文本是<code>Series</code>字段，url是用跨wiki链接实现；下方文本是<code>Name</code>字段，url是<code>Name</code>字段做标题的页面；
* 而我要实现的是：让上方文本显示<code>Name</code>字段，url用<code>Namewiki</code>字段；下方文本用<code>Series</code>字段，url是<code>SeriesWiki</code>字段。
* 涉及到变动的内容与现有内容重复、url实现方式不同，我就直接贴总结吧。

将显示文本调换（上方文本为<code>Name</code>字段，下方金文本为<code>Series</code>字段）：<syntaxhighlight lang="lua" line="1" start="26">
	box:tag('div'):addClass('card-rightName')
		:cssText(args.nameLen .. 'box-sizing:border-box;padding: 0px 2px 0px 2px;display:flex;flex-direction:column;overflow:hidden;outline:2px solid' .. params.colBorder .. ';position:absolute;top:0%;right:0%;width:' .. tonumber((params.cardHeight / 2)-20) ..'px;height:50%; align-items:center;justify-content:center; text-align:center;background:' .. params.colBack .. ';color:#eee;hyphens:manual;')
		:wikitext(args.rightName)

	box:tag('div'):addClass('card-rightSeries')
		:cssText(args.seriesLen .. 'display:flex;overflow:hidden;outline:2px solid' .. params.colBorder .. ';position:absolute;top:50%;right:0%;width:' .. tonumber((params.cardHeight / 2)-20) ..'px;height:50%;align-items:center;justify-content:center;text-align:center;background:' .. params.colBack .. ';color:#eee;hyphens:manual;')
		:wikitext(args.rightSeries)
</syntaxhighlight>
修改所引用的url（针对<code>function metahtml:Card(args, style)</code>区域）：<syntaxhighlight lang="lua" line="1">
function metahtml:Card(args, style)
	local arg2 = {}
	style = style or {}
	arg2.size = style.Size or '144px'

-- 上方文本显示为Name字段，链接至NameWiki字段。
	arg2.rightName = '<span class="plainlinks">['..args.NameWiki:gsub("&#8203;", ""):gsub("&shy;", "")..' <span style="color:#eee">'.. args.Name:gsub(" ?%(.*%) ?","") ..'</span>]</span>'
	arg2.nameLen = fontAdj(strSplit(args.Name,",\n")[1])
-- 下方文本显示为Series字段，链接至SeriesWiki字段。
	arg2.rightSeries = '<span class="plainlinks">['..args.SeriesWiki:gsub("&#8203;", ""):gsub("&shy;", "")..' <span style="color:#eee">'.. args.Series:gsub(" ?%(.*%) ?","") ..'</span>]</span>'
	arg2.seriesLen = fontAdj(strSplit(args.Name,",\n")[1])

	arg2.right = args.Right~='' and args.Right or nil
	arg2.bottom = args.Image~='' and "<div style='position: relative; bottom:".. tonumber(params.cardHeight / 2) .."px;' id='"..args.Name.."'></div>[[File:" .. args.Image .. "|frameless|x" .. params.cardHeight .. "px|link=" .. args._pageName:gsub(" ", "_"):gsub("&#8203;", ""):gsub("&shy;", "") .. "]]" or "[[File:Test.png|frameless|x" .. params.cardHeight .. "px|link=" .. args._pageName:gsub(" ", "_"):gsub("&#8203;", ""):gsub("&shy;", "") .. "]]"
	return self:_card(arg2)
end
</syntaxhighlight>
渲染效果：

<html><img loading="lazy" style="width: 800px;" src='https://scio.eu.org/WIKI/图片/建站相关/wife_list_diy_text_url.avif' /></html>

<sup>※ 这是没添加<code><nowiki><span class="plainlinks"></nowiki></code>前的渲染图，现已写入代码中，作用就是取消图中外链的跳转图表，懒得重新截图了。</sup>

　

== 总结 ==
到这里也就实现了对了lobba列表的基本模仿，能复刻列表的最大原因是其涉及需要修改的只是参数的值、部分变量名，在先人所创框架内修改，而对于原本不支持的功能就无能为力了。这种折腾对我是毫无意义的，花很多时间不一定能折腾好，还肯定会非常头大，而同样的时间估计已经入门lua语法了(至少能知道其逻辑及结构)。

等我日后学会了相关技能或许会对其再编辑，但不是现在与可预见的未来，如果您有解决方案也欢迎与我联系帮我打造更理想的老婆墙。预期实现的功能：

* 正文区域<sup>（图片与文本）</sup>自定义展示形式：
** 看了下似乎是通过''Flex布局'' 实现的，但根本不会改，否则对于较宽的图片，用来索引内容还是很好用的，比如后续可以整的海报/专辑墙。

----整套流程下来共新建20个页面（不含图片/文件）：

'''<code>[[Favorites:老婆墙|老婆墙]]</code>''' （列表汇总页面）

* '''<code>[[Favorites:模板:老婆 父类别|模板:老婆_父类别]]</code>'''（正文区域一级分类标题，纯样式）
* '''<code>[[Favorites:模板:老婆 子类别|模板:老婆_子类别]]</code>'''（正文区域二级分类标题，分为两部分：侧边栏、正文区域的图片和文本，后者通过调用同名模块实现）
** 卡片与文本：
*** '''<code>[[Favorites:模块:老婆 子类别|模块:老婆_子类别]]</code>'''（从Cargo表中查询并筛选出需要的内容）
**** '''<code>[[Favorites:模块:Card|模块:Card]]</code>'''（管理正文区域的卡片与文本样式）
***** '''<code>[[Favorites:模块:WikiLink|模块:WikiLink]]</code>'''（应当是Card模板中的WikiLink实现功能的基础）
****** '''<code>[[Favorites:模块:StrSplit|模块:StrSplit]]</code>'''（看命名当是两个文本间的分割线样式）
***** '''<code>[[Favorites:模块:CommonReplacements|模块:CommonReplacements]]</code>'''（应当是一些文本包含特殊字符，便建立一个映射表，会将其替换为指定的内容）
***** '''<code>[[Favorites:模块:StrManip|模块:StrManip]]</code>'''（看不懂的东西）
** 侧边栏：
*** '''<code>[[Favorites:模板:垂直标头|模板:垂直标头]]</code>'''（通过调用同名模板实现）
**** '''<code>[[Favorites:模块:垂直标头|模块:垂直标头]]</code>'''（侧边标题的样式，同时调用如下两个模板实现翻转文本，对中文估计没啥用，但不敢轻易动框架就留下了）
***** '''<code>[[Favorites:模板:输入模块|模板:输入模块]]</code>'''（看不懂的样式）
***** '''<code>[[Favorites:模板:变换旋转|模板:变换旋转]]</code>'''（调用模板来控制是否旋转文本）
****** '''<code>[[Favorites:模板:转换|模板:转换]]</code>'''（看不懂的实现方式）
* '''<code>[[Favorites:模板:条目计数器|模板:条目计数器]]</code>'''（正文区域表格题头的汇总，调用同名模块实现）
** '''<code>[[Favorites:模块:条目计数器|模块:条目计数器]]</code>'''（查询指定Cargo表中的条目数量）
* '''<code>[[Favorites:模板:缓存与时间戳|模板:缓存与时间戳]]</code>'''（页面右侧的顶部和底部的刷新缓存按钮与时间戳，前者是通过模板拼接url实现，后者通过调用模块实现）
** '''<code>[[Favorites:模块:时间戳|模块:时间戳]]</code>'''（获取当前的时间戳，采用[https://help.gnome.org/users/gthumb/stable/gthumb-date-formats.html.en Date/Time Format Codes]）

'''<code>[[Favorites:桐间纱路|桐间纱路]]</code>'''（具体的页面）

* '''<code>[[Favorites:模板:老婆|模板:老婆]]</code>'''（右侧信息表格样式的模板）
页面的打包：[[Wiki:永续系列站点#兴趣列表(mediawiki)]]

　

== 扩展 ==
'''懒加载：'''

* 当图片过多/体积过大时，可以考虑启用：[[建站/WIKI功能/站点维护#懒加载|懒加载]]，减缓负载。
'''隐藏分类：'''

* 当需要对页面进行分类，但不喜欢突兀的分类元素时，可以：[[建站/WIKI功能/样式优化#隐藏分类|隐藏分类]]。
'''其他海报墙：'''

* 请访问[https://favorites.scio.icu favorites]项目，查看其他子项目的索引页的提示信息。

 本文创建于：2024-04-22
[[Category:建站]]