How it works（原理）

The ./public folder contains all of the themes assets including textures, fonts, CSS, etc.

该./public文件夹包含所有主题预设，包括 textures（纹理）、fonts、CSS 等…

The ./tailwind.config.cjs file uses the ./public folder to extend tailwinds classes into minecraft themed classes

该./tailwind.config.cjs文件使用./public将文件夹继承到 minecraft 主题内。

The ./src folder contains the structure of your website. It comes with some examples on how to use the Minecraft theme to create your own pages, layouts, and components. All examples use HTML with classes, zero JS and CSS

该./src文件夹包含您的网站结构。它提供了一些关于如何使用 Minecraft 主题创建自己的页面、布局和组件的示例。所有的例子都使用 HTML 和Classes，没有 JS 和 CSS。

Styles（风格）

In order to access classes and textures your page must include the following link tags on your page: 为了访问类和纹理，您的页面必须在页面上包含以下链接标签：

<link rel="stylesheet" href="/css/minecraft.css" />

CSS variables（CSS 变量）

--block-size:

Default: 48px
默认: 48px

The size of a block on your website, controls the sizing of all minecraft styling (UI, Blocks, Items, etc), every class is sized relative to this property to keep everything the same size. Its value should be a multiple of the 16px, the size of a block texture, to avoid image scaling issues

你网站上的 block(方块)的大小，控制所有 minecraft 样式（UI、Blocks、Items 等）的大小，每个 class 的大小都与此属性相关，以保持所有东西的大小相同。它的值应该是 Block 纹理大小 16px 的倍数，以避免图像缩放问题。

You can set the block size of an element using a class like: [--block-size:{number}]

可以使用 class 设置元素的 Block 大小，如：[--block-size:{number}]

--zoom:

This property allows you to zoom the UI classes in and out by increasing or decreasing the widths of border-images.

此属性允许您通过增加或减少边框图像的宽度来放大和缩小 UI 类。

Use the class [--zoom:{number}] to easily ‘zoom’ UI textures in and out

使用 clss[--zoom:{number}]可以轻松地放大和缩小 UI 纹理。

--{number}-block:

Varients: 1/16 / 1/8 / 1/4 / 1/2 / 1-32
变体: 1/16 / 1/8 / 1/4 / 1/2 / 1-32

CSS variables for sizing properties relative to --block-size

用于调整相对于属性 CSS 变量：--block-size。

EX: var(--1/2-block), var(--1-block), var(--32-block)

继任: var(--1/2-block), var(--1-block), var(--32-block)

--fluid-(0-9):

Responsive font sizes used for markdown

用于降低的响应字体大小

Tailwindcss Classes（Tailwind 类）

One of the main jobs of the tailwind config is to read all file names inside the ./public/imgs folder and assign each file a bg- class. This makes it easy to use the textures inside ./public/imgs by calling a class like bg-block-stone or bg-item-diamond

顺风配置的主要工作之一是读取./public/imgs的文件夹，并为每个文件分配一个bg-class。这样可以很容易地使用内部纹理./public/imgs通过调用类bg-block-stone和bg-item-diamond

Note: Use the ./public folder to lookup filenames in order to use these classes

注意: 使用该./public文件夹中查找文件名以便使用这些 Classes。

bg-{filename}:

All blocks in the ./public/imgs/block folder will create a block background class that look like: bg-block-{filename} Ex: bg-block-dirt bg-block-gold-block

这里的所有 black 中的 ./public/imgs/block文件夹将创建一个块背景 class，看起来像：bg-block-{filename} EX：bg-block-dirt bg-block-gold-block。

bg-item-{filename}:

All items in the ./public/imgs/items folder will create a item background class that look like: bg-item-{filename} Ex: bg-item-cake bg-item-diamond

这里的所有 tiems 中的 ./public/imgs/items文件夹将创建一个 item 背景 class，看起来像：bg-item-{filename} Ex: bg-item-cake bg-item-diamond。

bg-painting-{filename}:

All paintings in the ./public/imgs/paintings folder will create a painting background class that look like: bg-painting-{filename}Ex: bg-painting-skull bg-painting-kebab

这里的所有 paintings 中的 ./public/imgs/paintings 文件夹将创建一个 painting 背景 class，看起来就像：bg-painting-{filename}Ex: bg-painting-skull bg-painting-kebab。

{number}-block:

1/16 / 1/8 / 1/4 / 1/2 / (1-99)-block

This theme extends tailwinds spacing property to add block based spacing/sizes Ex: w-1-block p-1/2-block h-9-block

这个主题延伸顺风spacing特性添加基于块的间距/大小 Ex: w-1-block p-1/2-block h-9-block.

Classes（类）

Many of the minecraft styles and textures are hard to write as tailwindcss classes, these classes make it easy and simple to add minecraft styles to your elements without tailwindcss

许多 minecraft 样式和纹理很难作为 tailwindcss class 编写，这些 Class 使得在没有 tailwindcss 的情况下将 minecraft 风格添加到元素中变得简单明了。

link（链接）:

Styles links with the link color from minecrafts old website and adds underline on hover

使用 minecrafts 旧网站的链接颜色样式链接，并在悬停时添加下划线。

text-shadow（文本阴影）:

Varients: none / xs / sm / md / lg / xl

变体: none / xs / sm / md / lg / xl

Applys the classic black text shadow from minecraft to text, use larger text shadows text-shadow-xl on larger text sizes for a better minecraft look

将 minecraft 的经典黑色文本阴影应用于文本，在较大的文本尺寸上使用较大的文本阴影text-shadow-xl以获得更好的 minecraft 外观。

markdown:

Classless styling on all child elements, used to style html that is parsed from .md files, use on a parent that wraps your markdown html

所有子元素上的无类样式，用于对从.md 文件解析的 html 进行样式设置，用于包装 markdown html 的父元素。

bg-dark:

Varients: 75 / 50 / 25

变体: 75 / 50 / 25

Transparent black backgrounds, used to darken block backgrounds

透明黑色背景，用于使 block 背景变暗。

scrollbar（滚动条）:

Zoom: 24 (scrollbar-thumb)

缩放: 24 (scrollbar-thumb)

Minecraft styled scrollbar

Minecraft 风格的滚动条。

button（按钮）:

Zoom: 10

缩放: 10

Minecraft styled menu/option button

Minecraft 风格的菜单/选项按钮。

raised-slot-button（凸起按钮）:

Zoom: 24

缩放: 24

The raised slot UI element can be used an an interactable button

凸起的槽 UI 元素可以用作可交互按钮。

enchainting-slot-button（镶嵌槽按钮）:

Zoom: 24

缩放: 24

The enchanting slot UI element can be used an an interactable button

迷人的插槽 UI 元素可以用作可交互按钮。

transparent-panel（透明面板）:

Zoom: 10

缩放: 10

UI panel with a transparent background

具有透明背景的 UI 面板。

panel（面板）:

Zoom: 10

缩放: 10

UI panels that look like the background of an inventory or chest

看起来像库存或箱子背景的 UI 面板。

panel-dark（面板深色）:

Zoom: 10

缩放: 10

UI panel but dark

深色的面板 UI。

transparent-achievement-panel（透明成就组）:

Zoom: 10

缩放: 10

UI achievement panel with a transparent background

具有透明背景的 UI 成就面板。

achievement-panel（成就组）:

Zoom: 10

缩放: 10

UI panel that looks like an achievement notification

看起来像成就通知的 UI 面板。

transparent-slot（透明插槽）:

Zoom: 24

缩放: 24

Inventory/Chest item slot border

库存/箱子物品槽边框。

slot（位置）:

Zoom: 24

缩放: 24

Inventory/Chest item slot border with background

库存/胸脯物品槽边框（带背景）。

raised-slot（凸起的槽）:

Zoom: 24

缩放: 24

The raised slot UI element with a transparent background

具有透明背景的凸起槽 UI 元素。

raised-slot（凸起的槽）:

Zoom: 24

缩放: 24

The opposite of the slot UI element, looks like a raised area instead of a recessed one

插槽 UI 元素的反面，看起来像是凸起的区域，而不是凹陷的区域。

raised-slot-hover（选中槽悬停）:

Zoom: 24

缩放: 24

The raised slot button when on hover

悬停时升起的插槽按钮。

raised-slot-active（活动凸起槽位）:

Zoom: 24

缩放: 24

The raised slot button when active or focused

激活或聚焦时凸起的槽位按钮。

enchanting-slot（附魔槽位）:

Zoom: 24

缩放: 24

The slot UI element used in game when choosing an enchant

游戏中选择附魔时使用的插槽 UI 元素。

enchanting-slot-hover（悬停附魔槽位）:

Zoom: 24

缩放: 24

The enchanting slot button when on hover

悬停时的附魔槽位按钮。

enchanting-slot-active（附魔槽位活动）:

Zoom: 24

缩放: 24

The enchanting slot button when active or focused

激活或聚焦时的附魔槽位按钮。

anvil-textbox（铁砧文本框）:

Zoom: 16

缩放: 16

The textbox used in anvils

铁砧中使用的文本框

anvil-textbox-active（铁砧文本框激活）:

Zoom: 16

缩放: 16

Active version of anvil textbox

铁砧文本框活动

table（表）:

Styles table elements to look like in game inventories like chests

样式表元素在游戏库存中看起来像箱子

map（地图）:

Zoom: 4

缩放: 4

Styles the borders and background of an element to look like a minecraft map

将元素的边界和背景设置为类似 minecraft 地图的样式

book（书）:

Zoom: 4

缩放: 4

Styles the borders and background of an element to look like a minecraft book

将元素的边框和背景设置为类似 minecraft 书的样式

sign（告示牌）:

Styles the text and background of an element to look like a minecraft sign, mimics the way signs work by centering text and wrapping on new lines

将元素的文本和背景设置为 minecraft 标志的样式，通过将文本居中并换行来模仿标志的工作方式

Structure（结构）

This is a theme structure/asset overview explaining where all assetes are located and how they interact with the theme

这是一个主题结构/资产概述，解释了所有资产的位置以及它们如何与主题交互

Tailwind Config（tailwind 配置）

The tailwind configuration located at projects root ./tailwind.config.cjs reads texture files from the ./public/imgs folder and creates new bg- classes for every texture in the blocks, items, paintings, and icons folders. This allows you to easily add, remove, or modify textures and use them on your website with only a class. The config also generates block based spacings like 1-block and up to 99-block that can be used with other tailwind classes for sizing based on block size EX: p-1/16-block w-3-block h-5-block

位于项目根部的顺风配置./tailwind.config.cjs从中读取纹理文件./public/imgs文件夹并创建新的 bg- classes 对于blocks, items, paintings,还有icons文件夹。这使您可以轻松添加、删除或修改纹理，并只需一个 class 即可在网站上使用它们。配置还生成基于 block 的间距，如1-block最高可达99-block可与其他顺风等级一起使用，以根据块尺寸进行尺寸调整 EX: p-1/16-block w-3-block h-5-block。

Minecraft.css（关于 Minecraft 的 css 文件）

minecraft.css located in ./public/css uses assets from ./public/fonts and ./public/imgs to create easy to use minecraft styled classes and is the central location for all minecraft styles that are not generated using tailwindcss

minecraft.css位于./public/css 使用来自的资产 ./public/fonts 还有 ./public/imgs 创建易于使用的 minecraft 样式 class，并且是所有未使用 tailwindcss 生成的 minecraft style 的中心位置。

Textures（纹理）

Blocks（方块）

Blocks textures are stored in the ./public/imgs/blocks folder. All textures from this folder are parsed into classes like bg-block-{filename}, to add blocks to the theme just add a texture to the block folder

方块 block 纹理存储在 ./public/imgs/blocks 中的文件夹内. 该文件夹中的所有纹理都被解析为 classes，如 bg-block-{filename}, 要向主题中添加 block，只需向块文件夹中添加纹理即可。

Items（物品）

Items textures are stored in the ./public/imgs/items folder. All textures from this folder are parsed into classes like bg-item-{filename}, to add items to the theme just add a texture to the item folder

物品 Items 纹理存储在 ./public/imgs/items 中的文件夹内。该文件夹中的所有纹理都被解析为 class，如 bg-item-{filename}, 要向主题中添加 Items 物品，只需向项目文件夹中添加纹理即可。

Paintings（绘画）

Painting textures are stored in the ./public/imgs/paintings folder. All textures from this folder are parsed into classes like bg-painting-{filename}, to add paintings to the theme just add a texture to the painting folder

painting(绘画)纹理存储在./public/imgs/paintings文件夹。该文件夹中的所有纹理都被解析为 class，如bg-painting-{filename},要将 painting(绘画)添加到主题中，只需将纹理添加到 painting(绘画)文件夹中即可。

UI（用户界面）

UI textures are stored in the ./public/imgs/ui folder, these textures include buttons, scrollbar, panels, and more. Each of these textures have been assigned a class inside the ./public/css/minecraft.css file, a full list of all ui classes can be found here

UI 纹理存储在 ./public/imgs/ui 文件夹，这些纹理包括按钮、滚动条、面板等。这些纹理中的每一个都在./public/css/minecraft.css文件中，所有 UI calss 的完整列表可以在这里找到。

Icons（图标）

Icon textures are stored in the ./public/imgs/icons folder. All textures from this folder are parsed into classes like bg-icon-{filename}, this makes adding icons to the theme as easy as adding a texture to the icons folder

Icon（图标）纹理存储在./public/imgs/icons文件夹。该文件夹中的所有纹理都被解析为 class，如bg-icon-{filename}, 这使得向主题添加 Icon（图标）就像向图标文件夹添加纹理一样容易。

Fonts（字体）

The theme comes preloaded with 5 different community made fonts located in ./public/fonts and are imported into the project using ./public/css/minecraft.css, if you want to add your own fonts add your font files to ./public/fonts and define a @fontface rule inside the minecraft.css file

该主题预装了 5 种不同的社区制作 Fonts（字体），位于./public/fonts并使用“导入到项目中./public/css/minecraft.css,如果您想添加自己的字体，请将字体文件添加到./public/fonts并在minecraft.css文件中定义@fontface规则。

Project Logo（项目 Logo）

The logo located at ./public/imgs/project-logo.png was generated using textstudio

Project Logo（徽标）位于/public/imgs/project-logo.png是使用textstudio生成的。

This project used the following settings:

此项目使用了以下设置：

• Zoom: 36%
• 缩放: 36%
• Line Spacing: 10%
• 行间距: 10%
• Use default for character spacing and rotation
• 对字符间距和旋转使用默认值
• Use the Minecrafter Regular font
• 使用Minecrafter Regular字体
• Navigate to the background tab and uncheck Background or Transparent to make background transparent
• 导航到背景选项卡并取消选中Background or Transparent以使背景透明
• Navigate to the download tab and select Medium quality with fitted aspect ratio
• 导航到下载选项卡，选择Medium质量和fitted纵横比
• Crop image after downloading
• 下载后裁剪图像

Favicon（网站 Icon 图标）

The default favicon is a grass block, this can be replaced by converting a texture to a .ico file, renaming it to favicon.ico, then replacing the old favicon inside the ./public folder

默认的收藏夹是草块，可以通过将纹理转换为.ico文件，将其重命名为favicon.ico，然后替换./public中的旧收藏夹来替换/公用文件夹。