效果如图

PC版：

手机：

image.png

image.png

image.png

image.png

IMG_9885.jpeg

如何添加Work Skin

  1. 登陆AO3账号并选择User -> My Dashboard -> Skins， 选择My work Skins

  2. 点击 "Create Work Skin". Type: Work Skin

    Title: 声明（只是一个名字而已，叫什么都行）

将下面的CSS部分贴进CSS样式框内：

/* CSS 部分 */
.heads-up-container {
	background-color: #f8f9fa; /* Light gray background */
	border-left: 4px solid #ff4500; /* Orange accent border */
	padding: 10px 15px;
	margin-bottom: 50px;
	font-family: 'Arial', sans-serif;
	font-size: 14px; 
	color: #333;
}

.heads-up-container h3 {
	margin: 0 0 10px;
	font-size: 20px;  /* 标题字体大小 */
	color: #ff4500; /* Orange header color */
}

.heads-up-container p {
	margin: 0;
	font-size: 16px; /* 声明内容字体大小 */
}

划到最下方选择保存（submit)。

如果你有已经在使用的work skin，将以上的内容贴进现有的skin也是一样的，只需确认一下现在用的work skin里没有重名的tag heads-up-container 。

  1. 选择并修改你想要使用该皮肤的文章-> Select work skin -> 选择刚才添加的skin(声明)，并在文章正文最开头的部分加上如下段落（或自行修改内容，更多声明参考请最下方模板），注意work text的类型应该选择HTML:

image.png

/* HTML 部分 - 此行无需复制 */
<div class="heads-up-container">
  <h3>声明</h3>
	<p>本作品仅限非商业用途，作者与任何第三方平台、APP（包括但不限于所谓的“3AM”、“凹3”或“红白站”阅读器）不存在任何合作、授权或关联关系，也未授权任何平台或APP以本人的作品进行<strong>商业化使用或收费</strong>。</p>
	<p>若有任何第三方未经授权使用本作品进行商业牟利，责任由侵权方自行承担，作者保留追究其法律责任的权利。请各位读者谨慎辨别合法平台，避免上当受骗。</p>
	/* 如果您想帮助其他在AO3上看到您文章的作者添加类似声明，请包括最后这段 - 此行无需复制*/
	<p>
    <small>
      <a href="<https://www.notion.so/tiny-rr/Work-Skin-AO3-16a08fe8b51b802f873fcf204c997a08?pvs=4>" rel="nofollow">我该如何添加像这样的声明?</a>
    </small>
  </p>
  /* 如果您想帮助其他在AO3上看到您文章的作者添加类似声明，请包括以上这段 - 此行无需复制*/
</div>
  1. 点击更新
  2. 如果您选择帮助其他在AO3上看到您文章的作者添加类似声明(即添加模版最后一段），效果如图。最后一行将生成一段指向该教程的文字并附上链接。

image.png

其他声明模版

或者组合使用，每加一个<p></p> tag都可以单独添加，见范例

/* HTML 部分 - 此行无需复制 */
<div class= "heads-up-container">
<h3>声明</h3>
<p>如非必要请不要使用任何第三方<strong>镜像网站或 APP（包括但不限于3AM）</strong>访问AO3，或者阅读任何AO3上的文章，镜像网站及应用非法抓取AO3上的文章，并未获得来自作者本人的授权；且服务器大概率在国内，<strong>运营者可获得 ip 地址等敏感信息</strong>，对作者及读者来说都相当危险。ao3原站可使用 skin 调节字体大小及行间距（包括夜间模式），请多多利用！感谢！</p>
</div>