被放逐者的书架样版

注意

此页为于 SCP 维基内部使用的"组件"页。用于在其他页面中引用。

未经组件作者或工作人员允许,请勿修改此页的内容。

评分: +31

[フレーム]

著作信息

[フレーム]

关联组件

[フレーム]

评分: +31

:root{
 --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
 --body-width-on-desktop:45.75rem;
 }@mediaonlyscreenand (min-width: 56.25rem) {#content-wrap{display: flex;
 position: initial;
 flex-direction: row;
 flex-grow:2;
 width: calc(100vw - (100vw - 100%));
 max-width:inherit;
 height:auto;
 min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
 margin:0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
 }#main-content{position: initial;
 width: var(--body-width-on-desktop, 45.75rem);
 max-width: var(--body-width-on-desktop, 45.75rem);
 max-height:100%;
 margin:0auto;
 padding:2rem 1rem;
 }#page-content{max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
 }#side-bar{position: -webkit-sticky;
 position: sticky;
 top:0;
 left:0;
 grid-area: side-bar;
 width: var(--sidebar-width-on-desktop, 13.6rem) !important;
 min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
 max-height:100vh;
 padding-right:2.5rem;
 padding-left:0.5rem;
 overflow-y:scroll;
 transition:
 translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
 background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
 padding 300ms linear,
 margin 300ms linear;
 border:none;
 border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
 background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
 translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
 direction:rtl;
 scrollbar-width:thin;
 -ms-scroll-chaining:none;
 overscroll-behavior: contain;
 scrollbar-color: 
 rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
 rgba(var(--swatch-tertiary-color), 0.05); /*Track*/
 }#side-bar::-webkit-scrollbar-track{background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
 }#side-bar::-webkit-scrollbar,
 #side-bar::-webkit-scrollbar-thumb,
 #side-bar::-webkit-scrollbar-corner{width:0.5rem;
 border-right-width: calc(100vw + 100vh);
 border-right-style:inset;
 border-color:inherit;
 background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
 }#side-bar:is(:hover, :active, :focus-within) {margin-right:2.25rem;
 padding-right:0.25rem;
 overflow-x:hidden;
 overflow-y:auto;
 border-color: rgba(var(--swatch-primary-darker), 1);
 background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
 translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
 scrollbar-color: 
 rgba(170, 170, 170, 1) /* Thumb */
 rgba(252, 252, 252, 1); /*Track*/
 scrollbar-color: 
 rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
 rgb(var(--swatch-menubg-color, 252, 252, 252), 1); /*Track*/
 }#main-content::after{content: " ";
 display: flex;
 position:fixed;
 top:0;
 left:1rem;
 align-items:center;
 justify-content:center;
 width:1rem;
 height:100%;
 max-height:100%;
 transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1),
 background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
 opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
 background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
 background-attachment:fixed;
 background-repeat:no-repeat;
 background-position:centerleft1rem;
 background-size:1rem 12.875rem;
 pointer-events:none;
 }#side-bar:is(:hover, :active, :focus-within) + #main-content::after{left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
 width:0rem;
 transition:left300ms cubic-bezier(0.4, 0.0, 0.2, 1),
 background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
 opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
 opacity:0;
 background-position:centerleft calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
 font-size:0em;
 }#main-content::before{content: " ";
 position:absolute;
 z-index:9;
 top: var(--final-header-height-on-desktop, 0);
 left:0;
 width: var(--sidebar-width-on-desktop, 14.5rem);
 height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
 margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
 transition:
 translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
 opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
 opacity:0.5;
 background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
 pointer-events:none;
 translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
 }#side-bar:is(:hover, :active, :focus-within) + #main-content::before{translate:0;
 opacity:0;
 }#side-bar.side-block{margin-top:1em;
 padding-left:0.25em;
 border-right-width:0rem;
 border-left-width:0rem;
 border-radius:0;
 background-color: rgb(0, 0, 0, 0);
 direction:ltr;
 }#side-bar.scpnet-interwiki-wrapper{direction:ltr;
 }
 
 /*PrintFriendlyFormattingbyEstrella*/
 body.print-body{ 
 --sidebar-width-on-desktop:0; 
 }body.print-body#main-content::before,
 body.print-body#main-content::after{display:none; 
 }}

星海寰屿

归档员:Etinjat。
整理时间:01 Sep 2025 05:17。
评分:18,评语:4

岿阳诀 —— 碧游春

归档员:Etinjat。
整理时间:14 Feb 2025 16:24。
评分:37,评语:5

岿阳谶——鹿尘子伏龙还丹诀

归档员:Etinjat。
整理时间:14 Feb 2025 16:20。
评分:48,评语:5

被放逐者的护封主题版式

归档员:Etinjat。
整理时间:06 Feb 2025 01:54。
评分:26,评语:10

流浪者站主题版式

归档员:Etinjat。
整理时间:11 Jan 2025 03:55。
评分:8,评语:4

原颂——太初,又称,无上至真纯灵造物煮飞天面条创世雅歌

归档员:Etinjat。
整理时间:30 Oct 2024 17:31。
评分:221,评语:39

琅嬛福地藏书中心

归档员:Etinjat。
整理时间:04 Aug 2024 08:54。
评分:49,评语:9

幽鬼纪录主题版式

归档员:Etinjat。
整理时间:14 Jun 2024 08:44。
评分:5,评语:5

古法修研

归档员:Etinjat。
整理时间:10 Mar 2024 21:59。
评分:5,评语:13

page 1 of 712 3 ...6 7 next »

简述

只需引用一次:

[[include :scp-wiki-cn:component:bookshelf-source]]

可重复引用:

[[include :scp-wiki-cn:component:bookshelf-shelf-top
|trans= 决定书架在手机屏幕下是否横排,填yes或no
|list-shelf= 书架编号
|book-annotation= 决定书籍采取A类还是B类注释,填1或2,不填则无
]]

[[include :scp-wiki-cn:component:bookshelf-shelf-bottom]]

复制用

[[include :scp-wiki-cn:component:bookshelf-source]]

[[include :scp-wiki-cn:component:bookshelf-shelf-top
|trans=yes
|list-shelf=0
|book-annotation=1
]]

[[include :scp-wiki-cn:component:bookshelf-shelf-bottom]]

用法

引用源代码

封装书架

添加书籍

示例

示例一

示例二

示例三

评分: +31

引用源代码

封装书架

添加书籍

示例

示例一

示例二

示例三

Module相关

回到标题

跳至底部

介绍

{$sub-title}

该组件可模拟书架与其上书籍样式,适用于搭配图书馆版式或者营造相近的气氛,总之多多少少能令页面美观。不过不建议添加太多书籍,以免造成页面卡顿。

要使用该组件,请按下列步奏进行:

一:引用源代码

该代码在一个页面只需要添加一次。

[[include :scp-wiki-cn:component:bookshelf-source]]

二:封装书架

1. 添加以下代码

[[include :scp-wiki-cn:component:bookshelf-shelf-top
|trans=yes
|list-shelf=1
|book-annotation=1
]]

书籍添加处

[[include :scp-wiki-cn:component:bookshelf-shelf-bottom]]

2. 选择自定义内容

include组件代码块的起始,需完整地黏贴在开头 ↦

书架的编号,添加此可更好与其他书架区别 ↦

必填,书架是否会在手机屏幕下改为横排 ↦

书籍额外信息展示形式 ↦

是否使用自定义隔板样式 ↦

自定义隔板背景色 ↦

自定义隔板背景覆盖样式 ↦

自定义隔板滤镜 ↦

自定义隔板边框 ↦

自定义隔板边框裁角 ↦

结束引用块 ↦

[[include :scp-wiki-cn:component:bookshelf-shelf-top

|list-shelf= 1

|trans= yes / no

|book-annotation= 1 / 2 / 其他则无

|my-plank=yes

|plank-background=

|plank-background-size=

|plank-filter=

|plank-border=

|plank-border-radius=

]]

书籍在此。

[[include :scp-wiki-cn:component:bookshelf-shelf-bottom]]

附记:若要在书架外套外框以看起来更像书架(见下方示例一二),可如此:

[[div class="et-out-bookrack"]]
[[div class="et-inner-bookrack"]]

[[include :scp-wiki-cn:component:bookshelf-shelf-top
|trans=yes
|list-shelf=1
|book-annotation=1
]]

书籍在此

[[include :scp-wiki-cn:component:bookshelf-shelf-bottom]]

[[/div]]
[[/div]]

三:添加书籍

1. 复制以下基本代码:

封面颜色,预设值

red
gold
green
black
galaxy
purple
mix-2
mix-1
blue-2
blue
darkblue
blue-3
darkblack
white
darkgrey

链接颜色,预设值【按示例一二的顺序排列】

gold
red
white
black

样式效果见下方示例一二,点此跳转

2. 自定义选项:

注意,使用自定义选项会覆盖预设值,但没有启用对应的自定义选项的话,可以保留预设值相关选项,以避免样式缺省。

include组件代码块的起始,需完整地黏贴在开头 ↦

书本的编号,以区别其他自定义书籍样式 ↦

封面样式,预设值 ↦

链接颜色,预设值 ↦

链接地址 ↦

链接文本 ↦

补充信息 ↦

是否启用自定义样式,填true则继续填以下选项 ↦

自定义书籍描边,填色码 ↦

自定义书籍封面,填背景相关值 ↦

自定义书脊 ↦

自定义链接颜色 ↦

自定义A类注释文本颜色 ↦

自定义B类注释阴影 ↦

自定义B类注释背景 ↦

自定义B类注释边框 ↦

结束引用块 ↦

[[include :scp-wiki-cn:component:bookshelf-books

|list-book=0

|book-cover=

|link-color=gold

|book-link=#

|link-name=链接文本

|book-info=注释在此

|self-defining=true / false

|self-book-color=#162c44

|self-book-background=url("xxx")

|self-book-border=2px solid #320f79

|self-link-color=red

|self-description-color=

|self-info-shadow=rgba(9,9,9,0.5)

|self-info-background=rgba(9,9,9,0.5)

|self-info-border=5px inset #333

]]

效果见下方的示例三,点此跳转

示例一二

横排样式、书架样式、颜色样式、注释样式

Liber.jpg

示例一

手机时不横排,及在横栏上显示额外信息【A类注释】

注释在此

%E5%AE%9F%E7%B8%BE_%E3%81%B2%E3%81%A3%E3%81%B1%E3%82%8A%E3%81%A0%E3%81%93.png

示例二

手机时横排,及浮动小框显示额外信息【B类注释】

注释在此

[[div class="et-out-bookrack"]]
[[div class="et-inner-bookrack"]]

[[=]]
[[image http://scpsandboxcn.wdfiles.com/local--files/etinjat-2/Liber.jpg width="130px"]]
++ 被放逐者的书架
[[/=]]

[[include :scp-wiki-cn:component:bookshelf-shelf-top
|trans=yes
|list-shelf=1
|book-annotation=1
]]

@@[[include :scp-wiki-cn:component:bookshelf-shelf-bottom]]

------

@@[[include :scp-wiki-cn:component:bookshelf-shelf-top
|trans=yes
|list-shelf=2
|book-annotation=2
]]

[[include :scp-wiki-cn:component:bookshelf-shelf-bottom]]

[[/div]]
[[/div]]

示例三

自定义隔板样式、自定义书籍样式

注释在此

点击此处打开书籍

注释在此

史美尔斯说过一句富有哲理的话,书籍把我们引入最美好的社会,使我们认识各个时代的伟大智者。这句话语虽然很短,但令我浮想联翩。就我个人来说,没有人对我的意义,不能不说非常重大。生活中,若没有人出现了,我们就不得不考虑它出现了的事实。带着这些问题,我们来审视一下没有人。

我认为, 总结的来说, 这种事实对本人来说意义重大,相信对这个世界也是有一定意义的。没有人因何而发生? 既然如此, 问题的关键究竟为何? 一般来说, 每个人都不得不面对这些问题。在面对这种问题时, 所谓没有人,关键是没有人需要如何写。要想清楚,没有人,到底是一种怎么样的存在。从这个角度来看, 那么, 没有人因何而发生? 我们一般认为,抓住了问题的关键,其他一切则会迎刃而解。本人也是经过了深思熟虑,在每个日日夜夜思考这个问题。对我个人而言,没有人不仅仅是一个重大的事件,还可能会改变我的人生。毕竟最灵繁的人也看不见自己的背脊。雷锋说过一句富有哲理的话,自己活着,就是为了使别人过得更美好。我希望诸位也能好好地体会这句话。生活中,若没有人出现了,我们就不得不考虑它出现了的事实。

一般来讲,我们都必须务必慎重的考虑考虑。这种事实对本人来说意义重大,相信对这个世界也是有一定意义的。既然如何, 没有人的发生,到底需要如何做到,不没有人的发生,又会如何产生。每个人都不得不面对这些问题。在面对这种问题时, 一般来说, 一般来说, 在这种困难的抉择下,本人思来想去,寝食难安。所谓没有人,关键是没有人需要如何写。莫扎特曾经说过,谁和我一样用功,谁就会和我一样成功。我希望诸位也能好好地体会这句话。

附记:
该组件可以配合:target等代码使用,
建议搭配没有人做笔记样版使用,
比如现在可以点击一下题有"点击此处打开书籍"的书本。

[[include :scp-wiki-cn:component:bookshelf-shelf-bottom]]

Module相关

{$sub-title}

要想使用module于该主题,将以下代码替换原先的书籍代码,而对应参数参照常规module参数即可。另外,因为潜在的适应性问题,不大建议在此模板上使用module。使用效果如下所示:

星海寰屿

归档员:Etinjat。整理时间:01 Sep 2025 05:17。

岿阳诀 —— 碧游春

归档员:Etinjat。整理时间:14 Feb 2025 16:24。

岿阳谶——鹿尘子伏龙还丹诀

归档员:Etinjat。整理时间:14 Feb 2025 16:20。

被放逐者的护封主题版式

归档员:Etinjat。整理时间:06 Feb 2025 01:54。

流浪者站主题版式

归档员:Etinjat。整理时间:11 Jan 2025 03:55。

原颂——太初,又称,无上至真纯灵造物煮飞天面条创世雅歌

归档员:Etinjat。整理时间:30 Oct 2024 17:31。

琅嬛福地藏书中心

归档员:Etinjat。整理时间:04 Aug 2024 08:54。

幽鬼纪录主题版式

归档员:Etinjat。整理时间:14 Jun 2024 08:44。

古法修研

归档员:Etinjat。整理时间:10 Mar 2024 21:59。

page 1 of 712 3 ...6 7 next »

include组件代码块的起始,需完整地黏贴在开头 ↦

书本的编号,以区别其他自定义书籍样式,不需更改 ↦

封面样式,预设值 ↦

链接颜色,预设值 ↦

书籍信息

是否启用自定义样式,填true则启用,参数见上文 ↦

筛选创建者 ↦

筛选顺序 ↦

筛选分类 ↦

显示几个结果 ↦

最多显示几个结果 ↦

筛选标签 ↦

页面链接 ↦

结束引用块 ↦

[[include :scp-wiki-cn:component:bookshelf-module

|list-book=%%index%%

|book-cover=green

|link-color=gold

|book-info=

|self-defining=false

|module-created-by=etinjat

|module-order=updated_at desc

|module-category=*

|module-perpage=9

|module-limit=*

|module-tags=wanderers

|module-link=%%title_linked%%

]]

Footnotes

. 屏幕小于479px

. 参见下面的示例一和示例二。因为手机适应性问题,不建议使用。

. 不填则不用填写下面相应自定义样式

. 即模拟书本厚度的外框

. 比如色码和背景图片

. 即书本样式两边的竖线

. 注释显示在隔板上

. 注释显示在浮动框上

原创样版

页面版本: 37, 最后编辑于: 02 Apr 2021 01:53

讨论 (11)

SCP基金会

控制,收容,保护

著作信息

关联组件

简述

复制用

介绍

一:引用源代码

二:封装书架

1. 添加以下代码

2. 选择自定义内容

三:添加书籍

1. 复制以下基本代码:

封面颜色,预设值

链接颜色,预设值【按示例一二的顺序排列】

样式效果见下方示例一二,点此跳转

2. 自定义选项:

注意,使用自定义选项会覆盖预设值,但没有启用对应的自定义选项的话,可以保留预设值相关选项,以避免样式缺省。

效果见下方的示例三,点此跳转

示例一二

示例一

手机时不横排,及在横栏上显示额外信息【A类注释】

示例二

手机时横排,及浮动小框显示额外信息【B类注释】

示例三

Module相关