LoM-wiki Public Components

Tab Component

Tabs provides the following properties:

position: Set the position of the tab bar
- top Default: Set the tab bar at the top
- bottom: Set the tab bar at the bottom

Tab provides the following properties:

title Required: Set the text of the tab

Content of Tab 1

Source Code

markdown

<Tabs>
    <Tab title="Tab 1">
        Content of Tab 1
    </Tab>
    <Tab title="Tab 2">
        Content of Tab 2<br>
        I will break the line
    </Tab>
</Tabs>

Character Icon Component

Currently provides a few icons and syntax examples

<BadendIcon> link defaults to the Book of Life, can specify a number with :no.
Some will jump to detailed pages of the Book of Life as more pages are released,
BadendIcon will automatically link to more detailed pages.

Text 1 Text 2 Text 3 Book of Life 30 'Clearing the Door'

Source Code

markdown

<BadendIcon :size='`medium`'>Text 1</BadendIcon>
<BadendIcon :size='`small`'>Text 2</BadendIcon>
<BadendIcon>Text 3</BadendIcon>
<BadendIcon :no="30">Book of Life 30 'Clearing the Door'</BadendIcon>

<Girl[0-8]Icon> link defaults to the character biography page, see Dream Sweetheart for details

The small icon is 32 px _ 32 px,
the medium icon is 100 px _ 100 px.
Historical book sizes are an exception:
the small icon is 38 px _ 44 px,
the medium icon is 76 px _ 88 px.

Text 4 Text 5 Text 6

Source Code

markdown

<Girl0Icon :size='`medium`'>Text 4</Girl0Icon>
<Girl0Icon :size='`small`'>Text 5</Girl0Icon>
<Girl0Icon>Text 6</Girl0Icon>

Character Icon Component Usage Examples

Syntax	Result	Description
<BadendIcon :size="`medium`">Text</BadendIcon>	Text	Display medium-sized Icon
<BadendIcon :size="`small`">Text</BadendIcon>	Text	Display small-sized Icon
`<BadendIcon>Text</BadendIcon>`	Text	Default size, default is "`small`"
`<BadendIcon></BadendIcon>`		Display with default size, default is "`small`"
`<BadendIcon :no="30">Book of Life 30 'Clearing the Door'</BadendIcon>`	Book of Life 30 'Clearing the Door'	no is used to link to the Book of Life number, if not used, it will jump to the top of the Book of Life.

Available Property Syntax

Property Name	Value	Default
size	"`medium`" \| "`small`"	"`small`"
no	0 <= no <= 90	0

Currently Available Components

<BadendIcon> : Book of Life (Tea Lying), some default clicks will jump to the corresponding position on the Book of Life homepage, and some will jump to the detailed page.
<EndIcon> : Historical Book, no given, default click will jump to the Historical Book list.
<EndIcon no="49"> : Historical Book 49: The Dog of the Bereaved Family, adding no will jump to the specified Historical Book number.

The following character avatars will default to the character biography page:

<Girl0Icon> : Little Junior Sister Avatar
<Girl1Icon> : Rui Xing Avatar
<Girl2Icon> : Ye Yunshang Avatar
<Girl3Icon> : Yu Xiaomei Avatar
<Girl4Icon> : Shangguan Ying Avatar
<Girl5Icon> : Xiahou Lan Avatar
<Girl6Icon> : Yu Zhu Avatar
<Girl7Icon> : Wei Ju Avatar
<Girl8Icon> : Long Xiang Avatar

Item Icon Component

Currently provides a few icons and syntax examples, using BookItemIcon as an example,
can replace with any available component below, as long as no and item type correspond,
different from character icons in that it has a background,
also, this component uses images with corresponding specific placements.

<BookItemIcon> has a default link, clicking will jump to the corresponding information page,
the default icon size is small (100 px _ 100 px);
medium is medium-sized (200 px _ 200 px);
size can be set through :size.
When needLink = false, clicking the image will enable image zoom.
Only no is a required value.

Text

Text 1

Text 2

Source Code

markdown

<BookItemIcon :no="6001">Text</BookItemIcon>
<BookItemIcon :needLink="false" :no="6001">Text 1</BookItemIcon>
<BookItemIcon :size="`medium`" :no="6001">Text 2</BookItemIcon>

Available Property Syntax

Since type is already included in the component name, no additional settings are needed.

Property Name	Value	Default	Required
no	Different values for different items	-	✔
size	"`medium`" \| "`small`"	"`small`"	❌
needLink	true \| false	true	❌

Currently Available Components (each component represents a different item type):

<BookItemIcon> : Martial Arts Books (book),
<FoodItemIcon> : Food (food),
<NewspaperItemIcon> : Jianghu News (newspaper),
<SpecialItemIcon> : Special Items (special),
<TeaItemIcon> : Tea (tea),
<WineItemIcon> : Wine (wine),

Corresponding Placement Path Format

docs/public/images/items/${type}s/item_${type}_${no}.webp

Where ${type} is the item type, such as book, food, special, tea, wine;
${no} is the item number.

For example, Martial Arts Books (book) number 6001, the image path is docs/public/images/items/books/item_book_6001.webp,
Special Items (special) number 2003, the image path is docs/public/images/items/specials/item_special_2003.webp

⚠️警告

Before use, please ensure that the image file exists. If it does not exist, please upload it to the specified path.
If unsure about the item category, please use the original name of the image.

Mood Icon Component

Text Text 1 Text 2 Text 3 Text 4 Text 5 Text 6 Text 7

Source Code

markdown

<MoodIcon :mood="`high`">Text</MoodIcon>
<MoodIcon :mood="`good`">Text 1/MoodIcon>
<MoodIcon >Text 2</MoodIcon>
<MoodIcon :mood="`normal`">Text 3</MoodIcon>
<MoodIcon :mood="`low`">Text 4</MoodIcon>
<MoodIcon :mood="`bad`">Text 5</MoodIcon>
<MoodIcon :mood="`bad`" :size="`medium`">Text 6</MoodIcon>
<MoodIcon :mood="`bad`" :size="`small`">Text 7</MoodIcon>

Available Property Syntax

Property Name	Value	Default	Required
size	"`medium`" \| "`small`"	"`small`"	❌
mood	"`high`" \| "`good`" \| "`normal`" \| "`low`" \| "`bad`"	"`normal`"	❌

Markdown External Parsing Tool

Used to actively parse content wrapped in html
Except for line breaks, only <br> can be used, all other Markdown can be used

~~I am pure HTML format~~

Source Code

Markdown

<div>
    ~~I am pure HTML format~~
</div>
<div>
    <MarkdownWrapper>
        ~~I am in HTML, wrapped in MarkdownWrapper~~
    </MarkdownWrapper>
</div>
<div>
    <MarkdownWrapper>
        ||I also support spoiler text||
    </MarkdownWrapper>
</div>

BTable Sortable Table

Adds sorting effect to the table
Replace the outer <table> with <BTable>
The first row <td> serves as the title, can pass in string, Markdown, HTML
Other rows <td> serve as the table, can pass in string, Markdown, HTML, Component

BTable provides the following properties:

:horizontal: Convert the table to display horizontally
- true: Convert to horizontal
- false Default: Do not convert to horizontal
:unsearch: Control table search function
- true: Disable search
- false Default: Enable search
:tags: Set search tags (invalid when unsearch = true)
- text Required: Tag text
- icon: Tag icon
searchMode: Set the search type
- and Default: Intersection query
- or: Union query
:stickyHeader: Set the header to be sticky
- true: Enable sticky
- false Default: Disable sticky

The first row (title) td provides the following properties:

:unsortable: Control column sorting
- true: Disable sorting
- false Default: Enable sorting

🅰️ Shaw

Source Code

Markdown

<BTable :tags="[
  {
    text: '21',
  },
  {
    text: 'Shaw',
    icon: '🅰️'
  }
]">
  <tr>
    <td>age</td>
    <td>first_name</td>
    <td :unsortable=true>last_name</td> // This row is not sortable
  </tr>
  <tr>
    <td>40</td>
    <td>Dickerson</td>
    <td>Macdonald</td>
  </tr>
  <tr>
    <td>21</td>
    <td>Larsen</td>
    <td>Shaw</td>
  </tr>
  <tr>
    <td>89</td>
    <td>Geneva</td>
    <td>Shaw</td>
  </tr>
</BTable>

BTable preserves the attributes of <tr> <td> inside

Source Code

Markdown

<BTable :unsearch=true>
  <tr>
    <td>age</td>
    <td :unsortable=true>first_name</td> // This row is not sortable
    <td>last_name</td>
  </tr>
  <tr style='background-color: #f0f0f0; color: black;'> // Attributes can be set for tr other than the title
    <td>40</td>
    <td style='color: red;'>Dickerson</td> // td can also be set
    <td>Macdonald</td>
  </tr>
</BTable>

InfoList Detailed Data Component

Component that occupies a section of the sidebar,
usually used to add other text or components under <InfoList>, filling the remaining space in the same row

InfoList provides the following properties:

position: Set the component position
- left: Set the component on the left
- right Default: Set the component on the right
- none: Disable floating effect

Info provides the following properties:

title Required: Set the title text of the detailed content
:open: Default to expand

Fun fact:
When the floating element is too long and competes for space with full-screen objects,
you can use <div style="clear:both;"></div> to limit.

Biography 1

Biography 2

LoM-wiki Public Components

Source Code

markdown

[[LoM-wiki Public Components]]  
[[LoM-wiki Public Components|Custom Text]]  
[[LoM-wiki Public Components#wikilink|Specified Anchor]]  
[[LoM-wiki Public Components|You can write ~~Markdown syntax~~ and<span style='color: red;'>HTML syntax</span> in custom text]]

Ending Component

markdown

<EndBackground no=8 title="Cooked Dog">
Rabbit dies, dog is cooked, you useless lapdog. A piece of cake can easily deceive you, quite a bargain.<br>
<br>
<br>
<!-- Note: This line is for editors to indicate the presence of blank lines, please do not delete for formatting reasons -->
</EndBackground>

Cooked Dog

Rabbit dies, dog is cooked, you useless lapdog. A piece of cake can easily deceive you, quite a bargain.

Cooked Dog

Rabbit dies, dog is cooked, you useless lapdog. A piece of cake can easily deceive you, quite a bargain.

markdown

<EndBackground no=0 title="No Corresponding Image">
No corresponding image available<br>
No corresponding image available<br>
No corresponding image available<br>
<br>
</EndBackground>

No Corresponding Image

No corresponding image available
No corresponding image available
No corresponding image available

No Corresponding Image

No corresponding image available
No corresponding image available
No corresponding image available

Available Property Syntax

Property Name	Value	Default	Required
no	1~50	x	x
title	Text	x	x

Note:

The ending description should be directly placed within the tag, such as the text Rabbit dies, ... quite a bargain. in the example above.
Some endings may share images.
This section is automatically divided into mobile and regular versions. If there are any editing abnormalities, please provide feedback on Discord.
The layout has been adjusted, and in most cases, it should match the game's interface.
Only in a few cases, due to layout restrictions (or limitations of the game itself), there may be slight differences,
which should be within the margin of error and will be improved in the future.
If there are issues with text box dimensions, please add <br> line break symbols or 　 full-width spaces as needed.
Also, add a note at the end of the supplemented text .

Contributors

No contributors

Changelog

No recent changes

LoM-wiki Public Components ​

Tab Component ​

Character Icon Component ​

Character Icon Component Usage Examples ​

Available Property Syntax ​

Currently Available Components ​

Item Icon Component ​

Available Property Syntax ​

Currently Available Components (each component represents a different item type): ​

Corresponding Placement Path Format ​

Mood Icon Component ​

Available Property Syntax ​

Markdown External Parsing Tool ​

BTable Sortable Table ​

InfoList Detailed Data Component ​

Ending Component ​

Available Property Syntax ​

Contributors

Changelog

LoM-wiki Public Components

Tab Component

Character Icon Component

Character Icon Component Usage Examples

Available Property Syntax

Currently Available Components

Item Icon Component

Available Property Syntax

Currently Available Components (each component represents a different item type):

Corresponding Placement Path Format

Mood Icon Component

Available Property Syntax

Markdown External Parsing Tool

BTable Sortable Table

InfoList Detailed Data Component

Ending Component

Available Property Syntax