內容簡介
e Side Matter 外掛可以將註腳轉換為側邊註記，讓每個註記在側邊欄中與其在正文的相應引用對齊。與超連結註腳不同，側邊註記無需跳轉頁面來跟進每個引用；取而代之的是，它們會謙遜地並且易於訪問地位於它們所參考的材料旁邊。
要使用，請在側邊欄中放置 Side Matter Widget，然後使用 [ref] 縮短碼包裹頁面或文章中的側邊註記文字，例如：
這裡是要註釋的文字。[ref]註記文字在這裡 [/ref]
要更改默認設置，請使用設置選項，該選項位於管理屏幕上的外觀菜單下面的 Side Matter 選項頁面中。
使用 CSS 為 Side Matter 客製化樣式，例如編輯您的註記字體或縮排，則需要使用 CSS。最簡單的方法是安裝一個自定義 CSS 外掛，即使 Side Matter 或您的佈景主題更新，它也能保留您的規則。（例如，Simple Custom CSS 是一個很好的選擇。）
Side Matter 帶有一組內置的選擇器。例如，使用 side-matter 一個 class，就可以一次選擇所有側邊註記和引用元素。以下 CSS 會將所有 Side Matter 元素呈現藍色襯線字體：
.side-matter {
color：blue;
font-family：serif;
}
使用元素特定的 class 選擇器可以更精確地格式化註記和圖表。例如，以下 CSS 將會以綠色呈現參考和列表編號，以黑色呈現側邊註記文字：
a.side-matter-ref，ol.side-matter-list {
color: green;
}
div.side-matter-text {
color: black;
}
以下是 Side Matter class 選擇器的完整清單及其用途：
- a.side-matter-ref 選擇包圍正文引用編號的連結元素。使用此類修改連結的顏色、下劃線等。
- sup.side-matter-sup 選擇圍繞正文引用編號的 sup （上標）元素。使用此類來修改數字的排版屬性，例如大小、偏移和字體。
- .widget_side_matter（注意底線）選擇 widget 容器元素，可以是 aside 或 div。
- ol.side-matter-list 選擇包圍側邊欄中的註記（包括列表編號）的ol（有序列表）元素。
- li.side-matter-note 選擇側邊註記 li（列表項目）元素，包括每個註記的編號。
- div.side-matter-text 選擇環繞側邊註記文本但不是側邊註記列表編號的 div 元素。使用此選擇器可將側邊註記文本與編號分開樣式設計。
請注意，每個註記內的段落都被進一步包裝在一個 p 標籤中。但由於這些 p 元素是在插件外部生成的，因此無法直接使用 side-matter 這個選擇器來選擇它們。請使用間接方式選擇它們，例如 div.side-matter-text > p。
Side Matter 在包含樣式表 side-matter.css 時會設置一些默認規則。在發生衝突的情況下，這些規則通常會優先使用佈景主題樣式表。第一個規則是刪除參考編號鏈接的下劃線。
外掛標籤
開發者團隊
原文外掛簡介
Side Matter turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text. Unlike hyperlinked footnotes, sidenotes don’t require jumping down the page to follow up on each reference; instead, they perch humbly and accessibly beside the material to which they refer.
To use, place the Side Matter widget in your sidebar, then enclose sidenote text in a page or post using the [ref] shortcode, like so:
Here's the text to annotate.[ref]Note text goes here.[/ref]
To change default settings, use the Side Matter options page linked under the Appearance menu on your admin screen.
Styling Side Matter with CSS
Changing the appearance of Side Matter elements—for example, editing your notes’ typeface or indentation—requires using CSS. The simplest way to go about this is to install a custom CSS plugin that will preserve your rules even when Side Matter or your theme is updated. (Simple Custom CSS is a good example.)
Side Matter comes with a set of built-in class selectors. As an example, all sidenote and reference elements may be styled at once using the class side-matter. The following CSS will render all Side Matter elements in blue serif text:
.side-matter {
color: blue;
font-family: serif;
}
Notes and figures may be formatted with greater precision using element-specific class selectors. For example, the following CSS will render reference and list numerals in green and sidenote text in black:
a.side-matter-ref, ol.side-matter-list {
color: green;
}
div.side-matter-text {
color: black;
}
List of Class Selectors
Here is a full list of Side Matter class selectors and their uses:
a.side-matter-ref selects the link elements that enclose in-text reference numerals. Use this class to modify the links’ colors, underline, etc.
sup.side-matter-sup selects the sup (superscript) elements that enclose in-text reference numerals. Use this class to modify the numerals’ typographic properties, such as size, offset, and font.
.widget_side_matter (note the underscores) selects the widget container element, which may be an aside or a div.
ol.side-matter-list selects the ol (ordered list) element that encloses notes in the sidebar, including list numerals.
li.side-matter-note selects sidenote li (list item) elements, including each note’s numeral.
div.side-matter-text selects the div elements that enclose sidenote text, but not sidenote list numerals. Use this to style sidenote text separately from numerals.
Each paragraph within a note is further wrapped in a p tag. However, as they’re generated outside the plugin, these p elements cannot be selected directly using the side-matter class. Instead, select them indirectly, e.g. div.side-matter-text > p.
Default CSS
Side Matter sets a few rules by default in the included stylesheet side-matter.css. These rules will generally defer to your theme stylesheet in the event of a conflict.
The first rule removes underlines from reference numeral links:
a.side-matter:link,
a.side-matter:visited,
a.side-matter:hover,
a.side-matter:active {
text-decoration: none;
}
The second rule specifies a consistent cross-browser, cross-theme format for superscript figures:
sup.side-matter-sup {
position: relative;
top: -0.5em;
vertical-align: baseline;
font-size: 0.75em;
line-height: 0;
}
