Archive of Our Own ^beta

简介

本教程将一步步指导您如何在Archive of Our Own – AO3（AO3作品库）创建一个作品界面。教程完成后，您将学会创建自己的作品界面，使用CCS来定义定制风格，并将作品界面应用到您的作品上。

如您满足以下条件，即可开始学习本教程：

• 您了解如何在AO3上发布作品。如您未曾在AO3上发布过作品，请参考发布和编辑常见问题或教程：发布作品的步骤。
• 您有CSS基础知识。如您需要简要了解CSS，可参考W3Schools CSS教程，免费学习基本教程。
• 您通过默认界面阅览网站（Archive 2.0）。如您使用的是自定义界面，请注意，网站布局可能会与本教程中的布局有出入。

如您不了解作品界面是什么，或希望使用现有界面来发布您的作品，请参考 界面和AO3界面常见问题。

如何前往"Create New Skin"（创建新界面）表格

第一步，进入"Skins"（界面）页面：

1. 登录账户，点击"Hi（您好），[您的用户名]！"，选择"My Dashboard"（我的个人中心），或点击头像前往个人中心。
2. 从PC设备页面侧边或移动设备上方菜单里选择"界面"。

页面将跳转至"My Site Skins"（我的AO3界面），此页列有您的自定义AO3界面，并提供快捷按钮，供您浏览自定义作品界面和公共界面。若您想进一步了解AO3界面和作品界面的区别，请参考 界面是什么？

本教程旨在指导用户创建一个新的作品界面，所以请选择"My Work Skins"（我的作品界面），然后点击"Create Work Skin"（创建作品界面），前往创建新界面表格。

设置新的作品界面

通过自定义CSS来创建新作品界面时，"Type"（类别）、"Title"（标题）和CSS项目为必选项，其他均为可选项。但此教程将对每个表格项目进行介绍。

您可以在提交表格后返回并编辑任何项目里的内容（请参考 编辑作品界面，获得指导）。

类别（必选项）

如您在界面页上点击"Create Work Skin"（创建作品界面），此项的默认选项应该是"Work Skin"（作品界面）。

标题（必选项）

为作品界面起一个说明性标题，将其与您之后创建的作品界面相区分。界面标题不得重复，因此建议在标题中纳入您的用户名（如"Homestuck界面 （用户名）"）。

描述

界面有哪些功能？是否有特别的主题？您可以参考AO3公共界面或作品公共界面页的界面描述。

上传预览

您可以在此上传CSS风格效果截图作为预览（可先开始使用界面，再回来上传预览。）

申请公开界面

此项功能已关闭。目前自定义界面无法被公开，勾选此项不会影响界面的隐私性。

CSS

您可以在创建新界面表格的最后一栏输入自定义CSS。以下几节将说明如何输入CSS，为作品创建新的显示界面。

您可能注意到，网页上方有一个名为"Use Wizard" （使用创建向导）的按钮。点击该按钮，即可进入"Site Skin Wizard"（网站界面创作向导）。但此功能只限于AO3界面的创建，无法用来创建作品界面。（什么是界面创建向导？）

但不用担心——有了这个教程，您也可以熟练创建作品界面啦！

使用CSS

出于网站安全考虑，AO3只支持有限的CSS属性和数值。点击保存后，不受网站支持的代码将被删除。

您可以点击CSS项目上方的蓝色问号，?了解AO3支持的CSS属性完整列单。您也可参考在自定义界面中，我可以使用哪些CSS属性和数值？来详细了解字体、颜色、网址等信息。

输入CSS

在此部分，您将输入CSS来设置可应用于作品的样式。您可随意添加自定义CSS，或参考以下范例。

如您发布了一份作品，其中包含以下HTML：

  
亲爱的Billy，
这是我写给你的一封信。希望它能给你留下非常深刻的印象
此致，
Adelaide

在未应用任何作品界面的情况下，以上文字会以AO3默认作品样式出现。

如希望其显示样式类似下方图片的手写书信，则需要通过CSS来创建一些自定义样式。

首先，我们来给文本添加黑色细边框，更改字体，并加大字号。为此，需要在作品界面的CSS栏添加以下代码：

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS"， cursive， sans-serif;
}

下一步，在CSS栏中设置落款（"Adelaide"）特殊样式。这需要输入以下CSS，加大字号，并让落款变成红色：

  
#workskin .signature {
font-size: 1.2em;
color: red;
}

最后，给突出强调的文字（"非常"）添加下划线。需要输入最后的CSS：

  
#workskin em {
border-bottom: 3px double;
}

至此，CSS栏内应包含与三种显示样式有关的CSS：

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
font-family: "Comic Sans MS"， cursive， sans-serif;
}
#workskin .signature {
font-size: 1.2em;
color: red;
}
#workskin em {
border-bottom: 3px double;
}

W3Schools CSS参考带有一份清单，其中列示了可用于作品的其他CSS属性，您可随时取阅。

也建议您参考公共作品界面内的样式范例

请注意，您需要将CSS选择器（比如.letter， .signature，和em 元素）嵌套在#workskin标签下。这样，只有选定的作品可显示为该样式（体现在作品页面的简介和"Top"（返回顶端） 按钮之间的内容上。如您忘记将CSS嵌套在#workskin标签下，我们会在您提交代码后自动为您添加。

保存新作品界面

CSS检查无误后，即可点击"Submit"（提交）按钮，保存新作品界面。若您未手动将显示样式添加至作品，该界面不会应用到任何作品（详情见应用作品界面）。

点击"Submit"后，我们将删除任何不受支持的代码，并确保所有选择器嵌套在一个#workskin标签下。

编辑作品界面

提交新作品界面后，随即便可检查代码并点击"Edit"（编辑） 按钮，进行任何更改。

应用作品界面

作品界面创建完成后，即可应用到您在AO3发布的任何作品上。请注意：

• 一个作品只能应用一个界面。.
• 一个界面可以应用于多个作品。
• 如您删除一个界面，使用该界面的作品均会失去显示样式。
• 如您与其他用户共同创作了一份作品，共同创作者也可将您的界面应用于共同作品。

确定好要为哪份作品应用作品界面后，请进入该作品的"Edit Work"（编辑作品） 页，进行操作。如您需要更多指导，请参考如何编辑作品？ 。

进入编辑作品页的"Associations"（关联信息）部分，从"Select Work Skin"（选择作品界面） 列表中选择要应用的作品界面标题。

如作品界面内的CSS选择器已与您作品的HTML有相应元素（例如

或

标签），您可以跳过下个部分，直接前往保存和预览您的作品。比如，您想给作品里所有斜体字填加双下划线，那么在应用带有以下CSS的作品界面后，所有带有

标签的文字都将自动画上双下划线：

  
#workskin em {
border-bottom: 3px double;
}

在作品的HTML里使用CSS选择器

如果CSS选择器暂且还不跟您作品的HTML相对应，您需要给作品添加

亲爱的Billy，
这是我写给你的一封信。我希望它给你留下非常深刻的印象.
此致，
Adelaide

保存和预览作品

您可以点击"Preview"（预览） 按钮，预览新设计的作品样式，或点击"Post Without Preview"（无需预览直接发布），直接保存更改。

恭喜，您的作品现在看起来非常漂亮！

如您从输入CSS到在作品的HTML里使用CSS选择器，全程按照本教程操作，那么作品外观现在应该就是手写书信的风格了。

如您希望将作品界面同时应用到不同的作品上，请参考如何同时编辑多份作品？请注意，如此前未设置，您还需要将界面的CSS选择器逐个插入每个作品的HTML中。

更多关于发布和编辑作品的信息，请参考 发布和编辑常见问题。您也可以参考教程：发布作品，获取更详细的指南。

如果我的问题在这里没有得到答案，我可以在哪里获取更多信息？

更多关于Archive of Our Own - AO3（AO3作品库）界面的信息，包括网站界面和公开界面，请参考界面和作品库界面常见问题。有些关于AO3的常见问题可以在更全面的AO3常见问题中找到答案。您可以在服务条款常见问题中找到关于我们的服务条款的问答。您也可以参考我们的已知问题。若您需要更多帮助，请联系支持团队。