¶ Creating and Editing Pages
 |
|
|---|---|
| You Can | Use Me As An Example |
| For | How to |
| Create | A Wikipedia style table |
Or Whatever  |
|
| Check The | Markdown code! (by going to edit page) (you can also have mutli-line text lol) |
Let's create a page for something!
¶ Creating a Page
- From any page on the Wiki, click the "New Page" button on the top right:
You must be logged in to create a page. Right now, only Members of Fluffy Barrage can make and edit pages.
- In the pop-up, enter the name of the page you want to make and click "select":
You don't need to create folders. Enter the full path you want to create and folders will be created automatically. For example, enter
Universe/Planets/Earth-Pageto automatically create theUniverseandPlanetsfolders. Do not put a trailing slash. Please look at the general guidelines for more information about what folders and names you should use.
The path should contain no spaces. Use dashes instead!
- Next, choose the "Markdown" editor:
If you're creating a new member page, you can choose
"From Template..."here and select theNew Member Templatefrom theMembersfolder instead! Alternatively, select "Markdown" and just paste the text out of the New Member Template page (from the "Edit" button on that page) later.
- Enter a title for your page, a short description of what the page is about, and enter any tags for the page (like
Season 5,Competitor,Staff,Editor,Commentator, etc!) and hit "Ok".
¶ 📝 Editing Markdown
When editing a page's markdown, you'll see an example of the formatting in the pane on the right. You can use this to make sure you're changing the right stuff before saving the page (although some things won't show up right in the preview, like floating tables).
Markdown works exactly the same as it does in Discord (like using
*italic text*,**bold text**,_underlined text_,- bullet points, etc.) but with additional features!
Some common things you may want to put in your page's markdown, that aren't exactly the same or don't exist in Discord:
You cannot use Discord links for images - a recent change made by Discord means that after 24 hours the links become unusable!
You can upload smaller images directly to the wiki using the "Insert Assets" button on the left. Please upload larger images to another host, such as Tumblr or PostImages because wiki storage is not unlimited!
You can add an image as follows: 
- Alt Text is text that is displayed when the image could not be loaded.
- URL is the link to your image.
- Title is text that is displayed when someone hovers over the picture.
You can change an image's size as follows: 
-
To keep the image ratio, specify just one of the values use
=100x(just width) or=x50(just height) at the end. -
If you want the image to take a percentage of the available space instead of a static pixel size, you can use a
%sign like=100%x.
You can align an image on the page by adding a style after the image, like: {.align-right}
-
Align left:
{.align-left} -
Align center:
{.align-center} -
Align right:
{.align-right}
Example:
{.align-center}
Links are inserted either by just typing the URL directly into the text like: https://wiki.fluffybarrage.com
- Clickable text links are basically the same as embedding an image but without the leading
!, like:[Link Text](URL)
Example:
[PostImages](https://postimages.org)
Tables can look kind of scary, but let break it down a bit:
- Each row in a table starts on a new line. Each column starts and ends with a
|. - If you want a column to span multiple columns, start or end it with multiple
|'s. - Separate the table headers from the content by putting a single
-in each column in that row. - A column's text alignment can also be changed with the seperator column:
:-:will center, and-:will right align text. - Put
<br>where you want text to start on a new line in a column. - Put
{.float-right}after the table to make it like on Wikipedia (it wont look right in the preview, but it will be right on the page)! - Use the preview panel on the right to make sure your table is being created correctly!
Example:
| {.align-center} ||
| You Can | Use Me As An Example |
|:-:|-|
| For | How to |
| Create | A Wikipedia style table |
| **Or Whatever :)**{.float-right} ||
| Check The | Markdown code! (by going to edit page) <br> (you can also have mutli-line text lol) |
{.float-right}
Quotes are inserted by starting a line with a > and a space. You can change the style of the box by adding a style after the text:
- Make a blue info box by adding:
{.is-info} - Make a green success box by adding:
{.is-success} - Make an orange warning box by adding:
{.is-warning} - Make a red danger box by adding:
{.is-danger} - Make a default grey quote box by not adding any styles after the text.
Example:
> Let's create a page for something!
{.is-success}
You can create tabs out of a set of headers (inserted using #'s) by adding {.tabset} to the parent header.
-
The parent header will not be shown in the final result.
-
You can use any "level" of header (any number of
#'s) but the actual tab headers must be one level lower than the parent's (they must have 1 more#than the parent).
Example:
# Tabs {.tabset}
## First Tab
Any content here will go into the first tab...
## Second Tab
Any content here will go into the second tab...
## Third Tab
Any content here will go into the third tab...
You can add an expandable / collapsable segment to your code by surrounding your markdown with <details><summary>Your Collapsible Header Text Here</summary>, a new line, your markdown to be hidden, and ending with </details> on another new line.
The new lines are important! Markdown won't work inside a
<details>block without the space between lines.
Expandable content looks like this!
You found me 
Example:
<details><summary>Expandable content looks like this!</summary>
You found me :o
</details>
Sometimes there's just weird little formatting things that pop up that need to be corrected with a style! This is a list of all the custom styles we've added to change things and when / why they're used!
Getting really weird with your styles, or want to do something like center a small embed? You can add multiple styles by just putting a space between them like:
{.small-embed .center}
{.float-right} |
Makes something "float" to the right of the page above other items that come after it, like the wikipedia-style tables. |
{.center-table} |
Makes something (even if it isn't a table!) take 2/3rds of the page's width and be centered. Used when you want something like a table (or youtube embed) in the middle of the page as a central element. |
{.width50} |
Makes something take 50% of the available width. |
{.small-embed} |
Makes an embed specifically max out at 250px, and makes text in-line with it centered vertically. Used when you want to embed a youtube video but just as an aside / not a central element. |
{.gallery} |
Does a bunch of stuff, but mostly just makes a space for image to fill with scrollbars. Apply to the paragraph containing images to make it work. |
{.height100} |
Makes something take 100% of the available height (and keep its aspect ratio when resizing). Used for each of the images in a gallery to make sure they fill up the space and dont get squished when resizing the page or on mobile. |
{.icon-line} |
Centers everything in a line with each other and seperates them with a single space of width. Used after text that includes a picture in-line with text, to make it look more natural and center the text vertically with the image (generally a little icon or small image). |
{.take-space} |
Makes something take up the entirety of the width of a page and forces it to be bumped below things like floating tables. Used for headers to make sure that everything after it shows up under a floating table (if for example the stuff following a header is a wide table that gets bumped below a float-right table then the header will be left dangling up the page). |
{.center} |
Can you guess? Makes stuff & text centered on the page! |
{.no-wrap} |
Used to make sure text takes its full width without breaking. Used on this table so the text on the left doesn't get split, because normally the first column would be made as small as possible to favour the longer descriptions in the cells next to it! |
¶ General Guidelines
- Use dashes to replace spaces in page names, instead of underscores (just to keep things clean and consistent!)
- When creating a page for someone in Fluffy Barrage, please put it in the
Membersfolder (/Members/New-Page), regardless of their season.- Flippers has made a page that can be used as a simple template for members, please copy that as a starting point (or choose it to duplicate when creating a new page)!
- We will use tags to associate members with their season, as new viewers may be confused looking for a commentator from, say, Season 8 when that person is under the Season 2 folder. There are also some people in Fluffy Barrage that haven't competed in a season.
- When creating a page for Staff to reference (such as this page), please put it in the
Resourcesfolder (/Resources/New-Page)- Feel free to make a sub-folder for specific teams, such as
ArtorEditingif you'd like! - Pages can be restricted to only be viewable by certain users, just let
@AlastairVoxknow on Discord
- Feel free to make a sub-folder for specific teams, such as
- If you want to make a page but you don't like messing with formatting, just put down the text and links you want on a new page, and let
@AlastairVoxknow: I'll do the formatting for you! Just getting content down is the most important part!
Pages can be both a folder and a page! For example, making a page at
/Membersworks, and lets us have an overview page people can visit to see information about pages associated with that folder.
¶ Learn More
- Markdown formatting syntax: https://docs.requarks.io/editors/markdown
- Table formatting syntax: https://fletcher.github.io/MultiMarkdown-6/syntax/tables.html
- Click the edit page button to see how this page was made, and read the orange comments about the markdown!
If there's anything else that you want to know how to do on your page or the wiki in general, just ask @AlastairVox on discord and I'll help you figure out how to do it!
- Things like restricting a page to certain users (for staff-only or otherwise restricted/secret pages)
- Custom HTML elements and embedded iframes
- Renaming or moving pages
- Page redirects
- Changing the main custom navigation links
- If you just want some help or ideas