图像轮播框

注意


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

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


评分: +7+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

这是什么

一个图像轮播组件,它能循环显示多张图像,而不只是单独一张。

使用方法

在你需要图像轮播框的地方,插入如下代码而不是标准插图方块。

确保你要使用的图像已经上传到了你的页面里。如果你选择无视这条睿智的忠告并在设置好轮播组件之后才上传图像,那么你的图像会无法显示,除非彻底刷新(Ctrl+Shift+R)页面。

[[include :scp-wiki-cn:component:carousel
| images=photograph.png,old-map.png,jumpscare.gif
| caption=一系列图片。
| interval=5
| wiki=scp-wiki-cn
| page=SCP-173
| width=300px
| height=240px
| position=right
| no-caption=false
| background=white
| options=yes
]]

使用图像轮播框会带来一些可访问性问题 - 对某些用户来说,连续的移动会非常分散注意力。强迫读者等待阅读文章的图片也不是一个很好的主意。这个组件也会因为在非交互的文本中强行添加交互性而惹恼你的读者。如有可能,我建议不要使用此组件。使用一系列标准插图方块作为代替。

每个选项都是什么

斜体字标注的均为可选项。其他则是必须要添加的。

如果你省略了可选项,则它将设置为其默认值。如果你省略了必选项,则轮播框无法正常工作。

images: 一系列图像,由半角逗号“,”分割。确保每张图像都上传到了页面里。你亦可以通过链接指定图像
这些图像会以你列举的顺序出现在轮播里。
links:
(可选)
一系列链接至每个图像的链接,由半角逗号“,”分割。若填写本参数,确保链接数量与图像数量一致。
caption:
(可选)
可选。出现在轮播框下方的说明文字。
如果没有说明文字,请确保将 no-caption 设置为 true。
默认值:“{$caption}”
interval:
(可选)
可选。如果你将它设置为非零的数字,那么轮播框会在相应秒数之后自动转至下一张图像。
如果用户点击箭头来手动换图,或者如果他们的鼠标正悬停在轮播框上,图像就不会轮换。
默认值:“0”
wiki: 你使用轮播框的页面所在维基的名称,举例而言,scp-wikiscp-wiki-cnscpsandboxcn
page: 你使用轮播框的页面名称。如果有页面分类的话,请将之包括在内。(“名称”指你在链接里看到的末端名称 - 比如,SCP-\̅\̅\̅\̅-J 的页面名称为 scp-botnik-j。)
width:
(可选)
轮播框里最宽的图像宽度。
默认值:“300px”
height:
(可选)
轮播框里最高的图像高度。
默认值取决于浏览器
position:
(可选)
轮播框在页面中的水平位置。“left”为左,“right”为右,“center”为中。
默认值:“right”
no-caption:
(可选)
如果你不想要说明文字,将之设置为“true”。不然,则留空,或者设置为“false”,或把这行整个去掉。
默认值:“false”
background:
(可选)
图像的背景颜色。
默认值:“transparent”(透明)
options: 你是否需要显示详细选项(播放/暂停键和一排小圆点)?如果不需要,设置为除了“yes”以外的任何东西。
默认值:“yes”

我想让轮播框横跨整个页面!
width 设置为“100%”,position 设置为“center”。

我将宽度/高度设置为最大图像的尺寸了,但这东西实在太大了!
用小一点的数字,或者把图像改小一点。



基础代码

轮播框的 HTML 结构

<html ng-app="carousel" ng-controller="CarouselController">
<head>
  <script src="https://fastly.jsdelivr.net/npm/angular@1.7.2/angular.min.js"></script>
  <script src="https://scp-wiki.wdfiles.com/local--code/component%3Acarousel/2"></script>
  <link href="https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/base/css/style.css" rel="stylesheet">
  <link href="https://sigma9.scpwikicn.com/cn/cn/sigma9_ch.min.css" rel="stylesheet">
  <link href="https://scp-wiki.wdfiles.com/local--code/component%3Acarousel/4" rel="stylesheet">
</head>
<body>
  <div class="wrapper" id="background">
    <div class="carousel">
      <div class="horsie" ng-repeat="image in images track by $index"
           ng-class="[index > $index ? 'past' : null,
                      index === $index ? 'present' : null,
                      index < $index ? 'future' : null]">
        <img ng-src="{{image}}" ng-if="!links[$index]">
        <a href="{{links[$index]}}" target="_blank" ng-if="links[$index]">
          <img ng-src="{{image}}">
        </a>
      </div>
    </div>
    <div class="arrow decrementor"
         ng-class="index === 0 ? 'inactive' : 'active'"
         ng-click="increment(-1)">
      <div class="image"></div>
    </div>
    <div class="arrow incrementor"
         ng-class="index === images.length-1 ? 'inactive' : 'active'"
         ng-click="increment(1)">
      <div class="image"></div>
    </div>
    <div class="bubble-holder" ng-class="[options === 'yes' ? null : 'invisible']">
      <div class="bubble" ng-repeat="image in images track by $index"
           ng-class="[index === $index ? 'present' : null]"
           ng-click="selectImage($index)">
      </div>
    </div>
    <div class="control play" ng-click="control('play')"
         ng-class="[state === 'play' ? 'active' : null,
                    options === 'yes' ? null : 'invisible']"></div>
    <div class="control pause" ng-click="control('pause')"
         ng-class="[state === 'pause' ? 'active' : null,
                    options === 'yes' ? null : 'invisible']"></div>
  </div>
</body>
</html>
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License