建站/WIKI功能/二次元老婆牆

出自Wired
跳至導覽 跳至搜尋
本文章为服务于Mediawiki的海报墙,现行的海报墙是html+css+js编写的,原favorites项目已存档至:IA(包括模板/模块的源代码页面),不久将关闭届时现有引链或失效。

第零步 前言

※ 使用模板、模塊與Cargo實現老婆牆

這篇文章既是一篇指南也是一個筆記,是我折騰過程記錄的再編輯。

如果您想從折騰的過程學習相關功能的用法、思路,您可以完整的閱讀本文:

  • 第一步為實現效果所依賴的擴展與功能;
  • 第二、三、四步都是所涉基礎知識與思路;
  • 第五、六 步是對lobba的列表牆的復刻,分別是條目所用的模板、老婆牆(匯總頁)及所涉的模板/模塊;
  • 第七步是在此基礎上根據需求的優化。

無需為技術擔憂,只要大腦不處於「一看到代碼就頭暈」的狀態,就能通過複製粘貼復刻老婆牆。

  • 諸如設定模板時,如果見有些內容或許不必要存在,可以先大概閱讀一遍文章,因為或許後面使用到了它們,捋一遍邏輯就非常好理解了。

但如果您想自定義功能(涉及修改實現邏輯而非單純改現有參數),則需要您有數據庫/lua等編程語言的基礎,那您可以直接參考源站:https://lobba.miraheze.org/

 

第一步 啟用必須功能

※ 如果您一點基礎沒有,請閱讀WIKI功能,以掌握拓展相關的的基礎知識。

本文以遵循 建站/MediaWiki 的流程建立的新站為例,您需要在此基礎上先安裝/啟用如下功能:

核心功能:

安裝Cargo

安裝PageForms#頁面表單)以使用其附加的解析器函數及通過圖表創建模板:

根據需求可選的

安裝CSS#CSS)拓展以給單頁面設定style:

安裝NoTitle以隱藏標題來美化頁面:

  • wfLoadExtension( 'NoTitle' );
  • $wgRestrictDisplayTitle = false;

這些是功能初始化設置時推薦了,但以防您有所遺漏

※ 舊版本不附帶、舊指南文章沒推薦或必不可卻的,如果已經啟用了,就不用管了。

啟用Scribunto(模塊)以開啟嵌入lua腳本功能:

啟用ParserFunctions(函數解析器):以使用內置的函數功能:

  • wfLoadExtension( 'ParserFunctions' );

啟用TemplateData(模板):以創建具有固定格式的內容框架:

  • wfLoadExtension( 'TemplateData' );

啟用Interwiki以自定義跨wiki連結,並授予sysop用戶組編輯權限:

  • wfLoadExtension( 'Interwiki' );
  • $wgGroupPermissions['sysop']['interwiki'] = true;
  • #調整附加文字 時使用。

 

第二步 模板的基礎應用

對於大量重複結構的內容(如各種主流百科的信息表格)模板不僅方便管理還有效減少數據庫資源佔用,但注意兩點:

  • 模板是快捷調用框架的工具,便捷點主要在於骨架(如UI/樣式、結構)而非內容;
  • 可視化編輯器雖然有搜索並使用模板的功能,但對於常用且參數多的模板使用效率較低;若在模板頁聲明好noinclude,直接原始碼模式下複製粘貼並填充參數更為便捷。

因此,模板的功能與文本創作關係不大,更傾向於項目、數據、條目管理,它複雜的是上限和特殊功能(需要一些編程知識了就),對於基礎的文字編輯不需要考慮甚多,我所有文章類創作沒有用到模板的,這些高級功能無非是圖個新鮮與玩個花樣,在一些非文章創作的項目上用。

表格的構成

一個表格長這樣:

姓名 原名 性別 出生點
紗路醬 桐間紗路 請問您需要來點兔子嗎?

它的wikitext原始碼是:

{| class="wikitable"
!姓名
!原名
!性别
!出生点
|-
|纱路酱
|桐间纱路
||请问您需要来点兔子吗?
|}

對於這種簡單表格,當然是可視化編輯器直接插入內容更簡單,但如果很多個這種表格,且具有更複雜的樣式呢?

 

模板的構成

例如,創建 模板:人物信息 頁面:

{| class="wikitable"
!姓名
!原名
!性别
!出生点
|-
|{{{姓名}}}
|{{{原名}}}
|{{{性别|}}}
|{{{出生点|}}}
|}

可按照自己需要構建一個框架,其中將需要手動填寫(自定義參數)的部分修改為: {{{x}}}

  • 可以為示例的文字,調用模板時需填寫「参数=值(見下節),將按參數指定的值渲染,無需從技術上考慮順序,但最好從維護角度上考慮排序;
  • 也可以填寫1,2,3數字,如此就可以忽略參數直接寫值,但調用模板時注意先後順序(有某項要為空可以不填內容但不要不寫管道符"|"),參數較多或難以維護;

也可以使用管道符設定默認值: {{{x|}}},管道符後便是默認值,實際應用場景大概分為以下幾種情況:

調用時 未添加管道符 添加了管道符
未設定默認值 設定了默認值
不填寫參數 留空 留空 留空
不填寫值 相應位置填充所設定的包括花括號的參數 留空 填充指定的內容

※ 指定的默認值並不會被存儲到Cargo表格中。

 

調用模板

調用模板的格式為:

{{模板名称|参数=|参数=|……}}

例如,想要在纱路酱的頁面使用這個模板,輸入以下內容:

{{人物信息|姓名=纱路酱|原名=桐间纱路|性别=|出生点=点兔}}

便可渲染出如下結果:

姓名 原名 性別 出生點
紗路醬 桐間紗路 點兔

在調用時可適當換行以增加可讀性:

{{人物信息
|姓名=纱路酱
|原名=桐间纱路
|性别=|出生点=点兔
}}

在可視化編輯器下,可以使用「插入」==>「模板」,並搜索模板,但模板填寫的信息(包括noinclude標記內的)不會顯示,只有側邊一列參數,還需要逐個啟用,並填寫參數,可視化編輯器的強勢點在於文字創作常用功能(markdown近親的wikitext語法)都具備,所見即所得,因此就算有一些微小bug也超過其他流行框架許多,而絕不是維護項目類wiki的利器,其作為博客用途的文章創作很方便,我幾乎用不到原始碼編輯器,但如果要涉及模板、更多功能還是要原始碼編輯器下舒適。

 

在模板頁面使用特殊標記

但調用時要一個個寫框架很麻煩,我們就可以藉助三種標記(普通頁面亦可生效,但通常用於模板)來增加便捷性:

  • <noinclude> 介绍信息 </noinclude>:在此標記內的文本會顯示在模板頁面,但不會被調用;
  • <includeonly> 模板内容 </includeonly>:此標記內的文本只會被調用,不會顯示在模板頁面;
  • 這兩種標記只是影響被標記內容的狀態,未被標記的內容即會被顯示也會被調用,但在描述時為了方便或許會用「includeonly標記的內容」泛指所有會被調用的字符串。

例如:

<noinclude>
调用方式:
<pre>
{{人物信息
|姓名=
|原名=
|性别=
|出生点=
}}</pre>
</noinclude>

<includeonly>
{| class="wikitable"
!姓名
!原名
!性别
!出生点
|-
|{{{姓名}}}
|{{{原名}}}
|{{{性别}}}
|{{{出生点}}}
|}
</includeonly>

在模板頁面會渲染出如下內容:

調用方式:

{{人物信息
|姓名=
|原名=
|性别=
|出生点=
}}

如此需要調用模板時,直接訪問該模板頁面並複製粘貼如上數據,填寫需要的參數即可。

注意事項:

  • <pre>標籤是為不讓其渲染(類<nowiki>),同時讓每一行換行都生效,並類似於引用的方式(預排格式)框起來文本,需要使用時直接複製粘貼其中的內容即可;
  • <includeonly>標籤包裹的內容雖然不顯示但會佔位(類別語句等也一樣),相關位置或會空出一行,如果想讓空行消失可以刪除開頭和結尾那些標記的換行,不影響解析,但或影響辨識度。

 

通過表單創建模板

以上是模板的簡單應用,它同mediawiki本身一樣,就是一些概念的實踐產物,因此下限很低、上限很高,但是若想實現一些非常華麗的功能需要css、js、lua等腳本/語言的知識,還需要搭配模塊、擴展等,我目前是不夠格的。

但也有一些便於創建模板的拓展——用它來創建模板除非學習它的函數,不然不如在普通頁面用可視化編輯器寫好內容、標記好需手動填寫的參數,再手動建立模板,但可以用它來了解模板的結構,比如PageForms(頁面表單),具體的功能可以在 特殊:特殊頁面#mw-specialpagesgroup-pf_group 查閱並試驗,這裏主要說創建模板:

  • 模板名称:模板的頁面名,無需掛命名空間前綴;
  • 模板定义的分类:模板頁面的類別歸屬,跟普通頁面的一樣;
  • 使用完整的wikitext而不是#template_display:這是該拓展帶的函數,勾選後可以更方便的解析顯示的數據,後面會給示例;
  • 模板字段:需要多少添加多少字段即可,可以拖動 左側矩形方陣 移動位置
    • 字段名称:用戶自定的參數,賦值用,如果後續要配合cargo表、lua/mysql語句來拓展使用場景,就建議用英文做參數,中文可能有新手無法解決的問題;
    • 显示标签:表格中會顯示的文本;
  • 输出格式:一般表格和側邊信息框用的多,表格就是示例的那般,側邊信息框就是一般的百科站詞條頁面右側的介紹框。

這是未勾選使用完整wikitext的產生的原始碼:利用附帶的倆函數實現的生成說明與模板(這個生成說明的函數挺好用)

<noinclude>
{{#template_params:name (label=名称)|original (label=原名)|sex (label=性别)|from (label=出生点)}}
</noinclude><includeonly>
{{#template_display:_format=table}}</includeonly>

這是勾選使用完整wikitext的產生的原始碼:不過我是沒看懂這東西怎麼用(為什麼這麼生成),因為填上數據解析出來沒有表格外框,但懂不懂不影響使用模板,後面可能就懂了,這裏只做示例用,下方渲染的是上面的代碼。

<noinclude>
这是“人物”模板。它应该以以下格式调用:
<pre>
{{人物
|name=
|original=
|sex=
|from=
}}
</pre>
编辑页面以查看模板文本。
</noinclude><includeonly>{{{name|}}}
{{{original|}}}
{{{sex|}}}
{{{from|}}}
</includeonly>

模板頁面的渲染結果:

這是「人物」模板。它應該以以下格式調用:

{{人物
|name=
|original=
|sex=
|from=
}}

編輯頁面以查看模板文本。

調用模板,填上數據後的渲染結果:

名稱 紗路醬
原名 桐間紗路
性別
出生點 點兔

 

第三步 Cargo的簡單應用

安裝Cargo多出的功能

Cargo是基於數據庫與模板的數據管理系統,會根據條件生成含相關數據的表格,並通過查詢語句按條件篩選內容。如此便可以用於數據統計(條目量/內容)與展示(通過規則篩選),本文章的應用場景就是弄一個老婆牆,相同的原理也可以弄海報牆、專輯牆。它是基於數據庫的拓展工具,一些高級功能與mysql語句類似,但我兩者都不熟悉,詳見mediawiki官網。

安裝好Cargo後會有如下變化:

  • 數據庫會出現一些以「Cargo_」起始的表(後續創建Cargo表也會自動建立新的數據庫表);
    • 默認是用mediawiki所使用的數據庫,如果要自定義按照官網指南填寫前六個參數即可。
  • 特殊頁面會增添其四個特殊頁:特殊:特殊頁面#mw-specialpagesgroup-cargo
  • 頁面表單的創建模板工具新增「使用Cargo扩展存储该模板的数据」與「模板定义的Cargo表格名称」兩個選項
    • 若需要用Cargo匯總數據必須勾選前者,不然不會創建Cargo表;
    • 選了前者後者必填,是Cargo表的名稱,該模板的數據就會存儲在設定名稱的表中。

 

簡單的Cargo表及結構

通過特殊:創建模板頁面新建模板:

相比於#通過表單創建模板多了幾個選項,上面兩個前面說過了

  • 字段中的类型表示字符串的類型,一般String(不超過300個字符的字符串)就足夠了,具體類型及含義見官網列舉的明細

顯示內容為:

這是「角色信息」模板。它應該以以下格式調用:

{{角色信息
|姓名=
|原名=
|性格=
}}

編輯頁面以查看模板文本。

此模板定義表格「二次元老婆」。 此表格尚未創建。

生成的原始碼為:

<noinclude>
{{#template_params:姓名|原名|性格}}
{{#cargo_declare:_table=二次元老婆|姓名=String|原名=String|性格=String}}
</noinclude><includeonly>{{#cargo_store:_table=二次元老婆}}
{{#template_display:_format=table}}</includeonly>

Cargo有三個主要的函數,它們不影響模板功能,算是一種標記:

  • #cargo_declare:放置於模板的「noinclude」標籤內,放置後有如下效果:
    • 啟用相關入口的權限,例如「创建数据表格(創建後才是建立了Cargo表),未定義的無法創建;
    • _table=xxx」對應「模板定义的Cargo表格名称」,後面的對應字段字段类型,這個只關乎將什麼字段存儲在Cargo表中,所以可據需要刪除字段。
  • #cargo_store:放置於「includeonly」標籤內,決定了將數據存儲到的Cargo表名;
  • 兩者指向的表名必須一致,否則數據不會被存儲(同一個模板可以創建多個Cargo表);相對於普通的模板,將數據存儲到Cargo表的模板就多了這兩個標記。
  • #cargo_query :查詢函數,可在其他有需求的頁面調用,用來根據規則查詢Cargo表內的數據。

按照正常的調用模板方式即可食用(別忘了在模板頁上方點擊:创建数据表格,此時就可以移步特殊:CargoTables查看現有數據:

雖然很多WIKI站點都是每個條目一個頁面,但我們個人WIKI往往沒有那麼多的內容,就可以考慮讓這些條目匯總到一個頁面中,來減少只有幾個字的頁面產生(別輕易採納這條意見,我就嘴碎一句)


在模板更新後可以點擊「重新创建数据」二次確認後稍加等待,這個更新會根據體量來,上千條那種或許要等很久,在此之前原表為只讀狀態,直至替換表格(新建的表格)成功建立並點擊替換原表後;內容有更新但是表格未跟進時也可以通過在模板/表格頁重建數據解決。

注意,對已有cargo表新增列的話,重建數據不會更新,需要刷新涉及的所有頁面的緩存建站/WIKI功能/站點維護#清除緩存

 

第四步 計劃需要實現的功能

  雖然看起來很麻煩,是也不是。是在於後面所用到的模塊涉及到了lua/mysql的編程/維護語句,沒有基礎確實是看不懂的,反正我就看不懂;不是在於往往只有模板或第一層模塊涉及到需要自定義的參數,而這些通常就是需要改一下字段名這種因站而異的參數(或許有一些個性化的變量,但不影響功能的實現),其它更多是在後端實現功能的工具,我們看不懂具體代碼,但總能知道要改哪些參數。如此一來在有借鑑源的情況下,也不是不能折騰。

  前三章的目的就是準備一下環境,並了解一下基礎的概念。有些東西的上限是高,但架不住前人夠多,我們可以複製粘貼,畢竟基礎邏輯並不難,掌握基礎邏輯就能知道什麼東西是幹什麼的,如此便能知道複製粘貼代碼後該修改哪些自定義參數,入了門以後的折騰也都是學習過程了。無非是最終成品的某些地方我們不理解原理、保留了一些無用內容這種數據冗餘、成品可能依賴於現有內容(不會美工)而非自定義而已。但學習/累積經驗只是附加獎勵,我們的目的本就是目的(老婆牆)本身。

本文是我建立自己的二次元老婆牆時記錄的筆記,身為技術萌新,為了減少日後維護的麻煩,自然是要弄清自己的需求,盡力弄一個可以滿足需求和易用的結構出來,並根據該章程弄模板、建立Cargo表、構建查詢/展示方式,最終打造舒適的背景牆。

请您注意,我也还没经验,并且更无设计意识可言,再加上我本就有重复推翻自己制定的章程的历史习惯,您只做个参考就好。

我的初始目的很簡單,仿照 https://lobba.miraheze.org/wiki/The_List 建立我自己的二次元老婆牆,為此要實現的功能及其可能設計的知識點:

  • 人物模板與用Cargo存儲模板數據(模板/Cargo函數);
  • 構建匯總數據的總表格:
    • 正文區域的背景色(style/css);
    • 正文開始的標題及信息統計框(Cargo查詢語句);
    • 正文表格的大類別、小類別(模板);
      • 並顯示圖片、點擊圖片跳轉人物頁面(模板與Cargo查詢語句)。
    • 初步考慮的優化點:
      • 圖片旁的文本就不需要了,我的老婆我都認識,而且中文太佔用空間了,寫出來也不會好看;
        • 圖片間少了文字做緩衝,中間加幾px間距或許會美觀一些;
        • 就算要文本,它給了倆連結,第一個設定的是跳轉到對應標題條目的維基百科,就算用也要改成自定義的萌娘百科url,具體看模板設定。
      • 圖片要放大一些;
      • 側邊類別標題用中文或許會遇到排版問題。

 

第五步 構造人物模板

計劃人物模板

File:紗路醬.jpg
桐間紗路(萌娘/維基等)
暱稱 紗路醬
出生點 請問您今天要來點兔子嗎?(萌娘/維基等)
地位 主角/配角/路人
家庭職位
室別 [[:分类:内室|内室]](按分類章程來並定位到分類)
職權 [[:分类:正室|正室]](示例就不讓其渲染了)
權重 1-999(方便後續排序)
信息 是否有除表格外的其他信息

首先我們要弄一個符合自己需求的表格,可以配合可視化編輯器、他人表格、excel等方式建立,然後再進入原始碼編輯器下將需要手動填寫的內容改成參數:

  • 可視化編輯器做不到的主要是修改表格樣式,示例表格用的是style="float:right; vertical-align:top; margin-left: 15px; width: 300px;",跟html語法是一致的。

表格模板只需要這些內容,其他內容(如碎碎念、相關資源)可以在角色主頁填寫。

編寫人物模板

於是我們根據自己的需求建立了表格,現在將其原始碼寫入模板中並用參數替換掉需要手動編寫的部分(最後一行是設定的分類):

{| 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}}}]]
  • 其中必要的字段:
    • WeightsName:用於後續cargo表的查詢、排序(暫時看不懂無所謂,因為有後面的知識點)。
      • 按作用說沒寫Weights它就按Name字段查詢或排序,最起碼只影響查詢,而且在測試的時候好像也沒事,但後面發現沒寫Weights它也不寫入cargo表中。
    • SubType:用於分組/類別,展示改組包含的角色。
  • 建議的字段:
    • NameWikiSeriesSeriesWiki:作品信息及指向的url;
    • Image:圖片文件,缺失會無法顯示海報;
  • 以上是海報牆所需要的全部信息,但添加以下內容會使體驗更好點:
    • Role:主角、主要、配角信息,用於在cargo表視圖內分析數據用;
    • Info:是否有補充信息,用於在cargo表內篩選數據,畢竟角色/創建的頁面很多,但有補充資源的只是少數,減少無用的訪問;
    • Nick_name:暱稱,其他稱謂。
    • Type:一級類別,可以根據需要是否選擇留用,反正決定展示的數據的是子類別,給子類別劃入大類別下就行了。

Cargo表格標記

noinclude標籤內 插入#cargo_declare函數 使模板數據存儲到Cargo表並根據需求設定包含的字段(我就把url_name刪掉了)字段類型

  • 圖片我是按照String存的,不然Cargo表中會顯示有框略縮圖,太占空間了;
  • url太長了所以我就按照URL類型存儲,在Cargo表中會顯示「URL」文本,url連結到了此文本上。
{{#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}}

includeonly標籤內 插入#cargo_declare函數 使模板數據存儲到指定的表中:

{{#cargo_store:_table=二次元老婆}}

優化代碼

使用頁面表單提供的#template_params函數生成調用模板的結構(noinclude標籤內),就不必自己寫說明了:

{{#template_params:Image|Name|NameWiki|Nick_name|Series|SeriesWiki|Role|Type|SubType|Weights|Info}}

但可以添加一些註釋來解釋用法,並組合這些數據。


可以根據需求添加管道符"|"以便於未填寫值時輸出空內容。最終我們得到以下成品模板:老婆(除非您明確的知道自己在做什麼,否則建議參數使用英文,以便減少不必要的麻煩)

<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>

※ 創建模板後記得創建數據表格

 

第六步 構造匯總列表模板

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

分析lobba的匯總頁

我就完全的按照lobba的匯總頁樣式來,但結構肯定是需要有所修改。它的原始碼可以分為幾部分:

1、隱藏頁面的標題(啟用NoTitle拓展即可,不再贅述,但建議放置於文末以防其佔用空行)

__NOTITLE__

2、css樣式(安裝css拓展可以直接用,不再贅述)

{{#css: .mw-body {background: #70547c;} }}

3、分佈在表格前與後的兩個 於伺服器端刷新緩存及上次清楚緩存的時間 的按鈕(使用到了模板:CacheTimestamp):

<div style="text-align:right; font-size:10px; font-family:'Franklin Gothic'">{{CacheTimestamp|#eeeeee50|cache last purged at }}</div>
<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>

4、剩下的就是表格的主體:

{| 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}}
|}

可以發現這個頁面並沒有直接引用具體內容,而是搭造了個框架/表格,並以嵌入模板的形式嵌入內容,也就是說具體的內容取決於所引用的模板設定的代碼,那我們就先將框架弄起來再根據需求搭建內容模板。

雖然內容很多,但我們只需要掌握了基礎的規則,再循着 標記/標籤 的起始和結尾就可以輕鬆的將代碼進行分割並得知其作用,即使有不了解的也可以將其複製粘貼到新頁面並預覽查看渲染結果,通過增刪相關代碼後頁面的變動來更直觀的分析:

這些模板共有四個,經過與lobba渲染出來的列表進行對比分析可以輕鬆的得知以下情報:

  • 模板:CountEntries:用於統計條目數量
  • 模板:TypeHeader:一級分類的樣式(橫向標題)
  • 模板:SubTypeHeader:二級分類的樣式(側邊豎排標題+右側圖庫/表格形式的羅列條目圖片,並使其索引到條目頁)
  • 模板:StandaloneTypeHeader:該大類別下有且僅有一個同名子分類時採用(將一二級標題的樣式組一塊弄了個模板)

他這個設計應該是為了方便統計有且僅有一個一級分類的信息,如果沒有需求就可以不用模板:StandaloneTypeHeader,畢竟它也只是兩個模板的合體版本。


到這裏我們就可以知道要做什麼:

  • 第一、二部分,在分析時就提及了無需過多關注。
  • 第三部分:刷新緩存與顯示時間的模板:CacheTimestamp;(章節:#刷新緩存與時間戳
  • 第四部分:

 

父子類別模板

父類別模板

模板:TypeHeader / 模板:老婆_父类别

<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>

該模板不涉及任何信息,只是統一的樣式+連結到參數(目標分類)而已,可以直接複製粘貼,您也可以根據自己的喜好調整字體、大小、顏色等參數,跟html語法一樣。

但我們可以看它的寫法。因為表格框架本身被匯總牆頁面寫好了,所以它只是要以內容的形式填充進去,但光有樣式除非讓其被includeonly標記,否則會很難看,而給其按照表格樣式寫個外框,並將不需要調用的內容用noinclude標記起來,這樣在模板頁顯示的也會更美觀與能彰顯其效果。

 

子類別模板

模板:SubTypeHeader / 模板:老婆_子类别

<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>

我們刪掉noinclude標記的內容以及已知作用的元素(樣式)部分就可以得到兩個未知項:

{{Vertical Header|va=middle|cellstyle=|[[:Category:{{{1}}}|{{{1}}}]]}}

{{#invoke:TheEternalList|list|"{{{1}}}"}}

他們分別是管理子標題樣式的 Template:Vertical_header 、管理內容的Module:TheEternalList,既然這個模板也沒有實質性的功能,那就可以先行建立該模板,等解決所需要的模板/模塊後,自然就能正常使用,注意若您後續自定義了這兩個模板/模塊的名稱(例如跟我一樣用了中文名),不要忘記返回此模板頁進行修改。

 

管理內容

我們先處理內容,讓這東西跑起來,給自己增添點士氣。管理內容的模塊是用lua寫的,我目前一點看不懂,但是我們要識別一些關鍵詞,譬如原主使用的cargo表名是loliinfo等,而我們使用的是「二次元老婆」,以及我們使用的字段不同,就要編輯相關區域——這就足夠了。

原作者編寫的Module:TheEternalList很長,但大家寫代碼時所用的變量名大都是通俗易懂的,我們在移植別人的內容時就可以採用增刪法:

  • 將代碼拆分,並不需要知道該語言的結構,因為其實語句、結束語句大都是有規律或特定排版可參考(重複的標記、end、各種括號起始、循環出現的相同框架的內容等)
  • 識別變量的含義與參數的作用/來源(往往都是字面意思或與其他已存在事物相關的,並不是閉門造車式的硬猜)

顯然第一行是導入外部文檔;local xxx 是代碼主體起始,而最後一行的 return p 是結束;中間的 function xxxend 各是一個整體。

我們的需求就是從子類別(SubType)中篩選信息,並按照權重(Weights)順序排列,然後 展示條目的圖片 並 連結至條目頁面,匯總頁及其所涉的模板與模塊就是為此而服務,且這幾個功能一看就是同一性質的,都是用來查詢&篩選Cargo表的,而我們需要查詢的內容很單一,那想必是有很多代碼是不必要的。

因為它(lobba)從Template:Character(角色的)模板開始就建立了三個Cargo表,我的需求與其不同,所以自己寫了個簡單的角色模板,也只有一個Cargo表,自然不可能每個都有用。

我採用的是增加法,保留大框架,選擇性增加function部分觀察其效果,我以為第一部分的listType有作用,保存之後,在老婆牆(匯總頁面)點擊編輯原始碼並點擊預覽查看最新效果,其提示「脚本错误:函数“list”不存在」。經過試驗,只添加function p.list()、除了它都添加上,最終確認是它實現了本頁的效果(其實在模板頁調用模塊的時候就寫了參數「list」),且無缺失功能,於是創建模块:老婆_子类别且複製粘貼(注意看註釋信息,修改你自己需要用到的Cargo表及字段名)

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

其他新增的頁面(連結到了lobba的原始頁面,創建同名頁面,並複製粘貼就行了):

渲染效果:

圖方便用的同一組數據(缺失圖片是不會展示在匯總頁內的),權重設定的分別是1,3,5,順序也確實受其影響,到這裏我們就可以愉快的玩耍了,畢竟剩下的都是小細節了,就算其他功能都無法實現,主體已經弄好了!

子標題樣式

現在我們要完善左側邊欄,Template:Vertical Header / 模板:垂直标头

<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>

去除noinclude標記的內容我們可以得知這也是一個調用了同名模塊的模板。我看了但是看不懂,考慮到體量較小,就不動它了。

於是複製粘貼以下模板/模塊即可(如果您也改了名字,記得將模板:垂直标头第3行調用的模塊、模块:垂直标头第37行調用的倆模板名改一下)

  • 模板:垂直标头Template:Vertical_Header) 側邊標題使用的樣式,但只是個框架,調用了同名模塊(如果您也用了中文名,記得改下調用的模塊名)
    • 模块:垂直标头Module:Vertical_header)如果您也用了中文名,記得修改第37行調用的模板名;第二個模板的參數是控制文本旋轉度數,對於中文來說沒用,輸入0就是沒旋轉,但可以留着備用;當調用的模板不存在時可能會報錯,忽略就行。
      • 	wikiText = wikiText .. " | <div style=\"" .. frame:preprocess("{{输入模块|v1}}{{变换旋转|0}}") .. "-ms-Transform: none \ ;padding-left:1px;text-align:"
        
      • 模板:输入模块Template:Writing-mode
      • 如果沒有旋轉文字的需求,以下兩個模板可以不要,但記得將模块:垂直标头第37行中的{{{变换旋转|0}}}刪掉:
      • 模板:变换旋转Template:Transform-rotate如果您也用了中文名,記得修改調用的模板名。

渲染效果:

 

統計條目數量

模板:CountEntries / 模板:条目计数器

{{#invoke:CountEntries|main}}

它只調用了同名模塊:Module:CountEntries / 模块:条目计数器

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

創建這兩個模板/模板頁面並複製粘貼:若您也用了中文名記得修改調用的模塊名、模塊中的Cargo表名記得修改為自己實際用的(name是字段,意思是在這個表查詢這個字段的值的數量)

 

刷新緩存與時間戳

模板/模塊部分:

創建 模板:CacheTimestamp / 模板:缓存与时间戳(記得按照你自己對時間戳模板的命名來修改)

<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>

對於清除頁面緩存:设定的域名前缀(記得修改為你的url) + 利用魔术字生成的页面名称 +固定字符串 拼接出來用於刷新伺服器端緩存的url;

對於清除頁面緩存的時間戳:調用了Module:Timestamp / 模块:时间戳,修改下其中的時間代碼以更符合國人習慣(示例為2024-12-31 23:59:59,代碼參考:Date/Time Format Codes

local p = {}
function p.timestamp()
    local time = os.date("%Y-%m-%d %k:%M:%S")
    mw.logObject(time)
    return time
end
return p

匯總頁部分:

在老婆牆(匯總頁)修改下原來的提示文本,(第一部分放置於表格前,第二部分放置於表格後):

<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>

※ span標籤標記的是一句url聲明,想留着的話改下url即可。

 

表頭內容修繕

#分析lobba的匯總頁 第四部分的起始就是這段文本信息,您可以根據自己的需求配合wikitext語法進行修改(主要就是文字信息、引鏈)

| 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>

 

匯總一處

我們已經修繕了所有能修繕的地方,到目前為止老婆牆已經初步成型了,這是老婆牆(匯總頁)的代碼

{{#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__

渲染結果:

※ 目前內容太少,寬度撐不起來,填充多了就好看了。

 

第七步 進一步優化細節

第四步的計劃還未徹底解決,目前還有:

  • 清除圖片旁的文本,或使文本連結至url(百科)字段;
  • 放大圖片,並視情況選擇是否增加圖片間距(默認就有約5px間距);

對於html樣式的修改,我們可以採用觀察法,查看頁面原始碼相關區域所使用的class屬性等關鍵信息結合代碼進行判斷,譬如圖片的尺寸:

在尋找這個元素的過程中可以通過審查區域左上角(查看器左側)的小工具點擊頁面元素,以便於快速定位。

在我們知道它的class屬性後就可以到決定它樣式的模板/模塊中尋找,最終可以在模块:Card第35行找到它,並在36行發現它的寬度設置部分:

width:' .. tonumber(params.cardHeight * 0.7) .. 'px;

其他的都不用管,我們只看能看得懂的部分,這看起來就像是一個運算規則,我們再搜索「cardHeight」,在第11行可以發現:

	cardHeight = 140;

此時就不難理解它們的作用了,cardHeight設定了圖片高度,而高度*0.7便是設定的寬度。

在尋找它的相關信息時也不難發現這個圖片是被完整加載了的,只是被一個外框給框住,壓縮至設定的高度,居中顯示,溢出至框外的寬度部分不顯示而已——這些信息或許沒什麼用,但這就是了解與學習的過程,且知道這些信息後或許會讓自己多留意些以免上傳大量高解像度尺寸的題圖影響海報牆的加載速度。


對於決定樣式的代碼,圖片及文本的展示是使用的模板:老婆_子类别,而其沒有作用只是調用了模块:老婆_子类别,但此模塊只是按照規則從Cargo表中篩選出數據,那就再深入其加載的模块:Card和其調用的其他模塊,這種邏輯形式的篩選與排查再配合一丟丟的對關鍵詞/變量的注意力就足夠應付框架內的樣式修改了,在這裏我們可以得出簡單的結但並未發現什麼與論:模块:Card是主要需要修改的代碼,其他頁面只是輔佐其實現功能的產物。


對於我們新手來說,不怕錯、不怕失誤,我們就可以多試,錯了再尋找線索便是,測試也不麻煩,我們可以在原始碼編輯器下用「預覽」功能,而不必刷新頁面緩存或修改內容再提交修改。

 

調整元素大小

修改圖片尺寸:按照本章引文所言,我們可以知道決定它尺寸的是模块:Card第11行,我修改為了200。

	cardHeight = 200;

修改文本區域寬度:當圖片尺寸增大時,會發現文本區域寬度也變大了,這就不好看了,於是我們尋找其區塊的calss屬性,發現起到作用的是:「card-rightSeries」、「card-rightName」的width參數;同時每個條目使用的「loliCard」決定了總寬度。我們在模块:Card,中索引這些關鍵詞可以發現其(有三處)寬度的值都是「tonumber((params.cardHeight / 2)+5)」,這看着就是運算規則,於是我用了tonumber((params.cardHeight / 2)-20)

 

調整附加文字

我們需要進行以下優化:

  • (可選)將 跳轉到維基百科 改為 跳轉到萌娘百科;
  • 修改顯示文本及引用的url。

修改引鏈:通過跨wiki链接實現,先按照跨WIKI連結設定萌娘百科的前綴,再修改模块:Card的第62行使其應用到老婆牆中:

    local wikiString = "[[moegirl:".. indSub .."|<span style='color:#eee'>".. commonReplacements(ind) .."</span>]]"

但這個功能非常雞肋,因為因為如果作品跨類別或小眾,萌百不一定有,且萌百的頁面名或我叫順口的作品名不一定標準,名字或作品名過長我不一定就想那麼使用等情況,就自己設定角色與作品的名字與url好了(這個要配合模板,我上面寫的模板已經考慮了該變故)


修改顯示文本及引用的url:我的需求是:

  • 圖片索引目標改為頁面(原設定是Name字段,但或許會有名稱與頁面名不一致的情況,於是採用表格自帶的 _pageName字段)
  • 修改顯示的文本信息:
    • 上方文本顯示老婆的名字(根據Name字段),連結至百科頁(根據NameWiki字段)
    • 下方文本顯示作品的名字(根據Series字段),連結至百科頁(根據SeriesWiki字段)

注意事項:

  • 均在模块:Card頁面修改;
  • 所涉及的字段在#管理內容創建相關模塊時就添加上了,若您需要用到的字段沒添加,記得加上;
  • 注意變量大小寫保持一致,原始碼就是rightXxxxxxxxLen,尤其是後面那個(保持大小寫一致即可,使其能對應上即可)

1、圖片索引目標改為頁面:

我們可以根據實際效果輔助判斷,比如分析html代碼,圖片在class屬性為「card-bottom」的div標籤內,在模塊頁索引此關鍵詞發現其在第35行,但並未發現有什麼地方控制了url,且搜索可能相關的參數「args.bottom」也沒有直接線索。 ——這就是一個無效的試驗,這也是在連皮毛都弄不清的情況下去折騰的最顯著的特徵,那就是時間被浪費到這種事情上,而如果但凡入了點門,知道它們的結構,也不至於如此,因此無基礎的折騰與學習基礎再折騰,是需要認真衡量的。雖然如果沒有特殊需求(如專門寫出來供提醒)也不太浪費精力,筆記我復刻它花了2天,寫這篇文章花了五天(雖然是把整個建站系列給維護了一下)。

我們索引「Image」關鍵詞(亦是存儲圖片的字段),發現第121行有一堆設定信息,其也是設定的bottom的屬性:

	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;", "") .. "]]"

看不懂沒關係,但我們知道原主是使用的「Name」字段做指向的url,這裏有兩處出現了「args.Name」,分別是「id」與「link」,前者雖然看起來人畜無害但不妨全都修改為「args._pageName

2、上方文本顯示老婆的名字並連結至百科頁

通過class屬性可知「card-rightSeries」控制着上方文本的區塊,「card-rightName」控制着下方文本的區塊。

  • 這裏有點繞,因為原上方文本是Series字段,url是用跨wiki連結實現;下方文本是Name字段,url是Name字段做標題的頁面;
  • 而我要實現的是:讓上方文本顯示Name字段,url用Namewiki字段;下方文本用Series字段,url是SeriesWiki字段。
  • 涉及到變動的內容與現有內容重複、url實現方式不同,我就直接貼總結吧。

將顯示文本調換(上方文本為Name字段,下方金文本為Series字段):

	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)

修改所引用的url(針對function metahtml:Card(args, style)區域):

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

渲染效果:

※ 這是沒添加<span class="plainlinks">前的渲染圖,現已寫入代碼中,作用就是取消圖中外鏈的跳轉圖表,懶得重新截圖了。

 

總結

到這裏也就實現了對了lobba列表的基本模仿,能復刻列表的最大原因是其涉及需要修改的只是參數的值、部分變量名,在先人所創框架內修改,而對於原本不支持的功能就無能為力了。這種折騰對我是毫無意義的,花很多時間不一定能折騰好,還肯定會非常頭大,而同樣的時間估計已經入門lua語法了(至少能知道其邏輯及結構)。

等我日後學會了相關技能或許會對其再編輯,但不是現在與可預見的未來,如果您有解決方案也歡迎與我聯繫幫我打造更理想的老婆牆。預期實現的功能:

  • 正文區域(圖片與文本)自定義展示形式:
    • 看了下似乎是通過Flex佈局 實現的,但根本不會改,否則對於較寬的圖片,用來索引內容還是很好用的,比如後續可以整的海報/專輯牆。

整套流程下來共新建20個頁面(不含圖片/文件):

老婆墙 (列表匯總頁面)

桐间纱路(具體的頁面)

頁面的打包:Wiki:永續系列站點#興趣列表(mediawiki)

 

擴展

懶加載:

  • 當圖片過多/體積過大時,可以考慮啟用:懶加載,減緩負載。

隱藏分類:

  • 當需要對頁面進行分類,但不喜歡突兀的分類元素時,可以:隱藏分類

其他海報牆:

  • 請訪問favorites項目,查看其他子項目的索引頁的提示信息。
本文创建于:2024-04-22