These are the docs for Small Victories (built using the Document theme).

Multi-Page Sites

Small Victories supports multi-page websites. By using sub-folders within a site folder, you can create a homepage with links to multiple sub-pages.

Using different Themes, these pages can have different layouts and therefore serve different purposes.

Some terms

Before we get started, let’s just clarify a couple terms:

  • site folder – when you make a new website with SV, it creates a folder in Dropbox/Small Victories (if you have a lot of SV websites you’ll have a lot of site folders). You can also think about it as your site’s homepage.
  • sub-folder – a sub-folder is a folder that lives within your site folder
  • sub-page – a subpage is a page that lives on your website’s domain. For example, if your website’s URL is fruits.smvi.co then it may have a subpage fruits.smvi.co/banana.
  • theme – Small Victories uses themes to determin the layout of your webpage (e.g. Document, Slideshow, etc.)

Basic set-up

1—Create a new Small Victories website. You should see the new site in your Dropbox/Small Victories folder. This is your site folder / homepage / root URL.

2—In your new site folder, create a folder for each subpage you want your site to have.

The name of the folder will match the filepath. For example, if you make a folder called the banana, the URL for this page will be /the-banana. (We recommend using hyphens instead of spaces for folder names.)

3—In each sub-folder, create a new _sv_settings.txt file. At minimum, add:

Title:
Theme:

Title is the name of the page and theme is the theme you want to use. You can reference the settings file for the main site folder if you’re not sure how to set this up. You may also want to add a password, description, etc. Or, for some themes, you might need additional fields.

4—Add files to your site folders (and subfolders)!

Hidden folders

Any subfolders that start with an underscore (e.g. _hidden) will not appear on your website and cannot be accessed through the URL*. This folder does not need a settings file.

For example, you may want to create a folder of assets you’re using on your website (webfonts, images, etc.). You can access these assets from the pages of your website or from your CSS file.

You’d write these filepaths just like you would with any website:

.
├── site folder
│   └── _assets
│   │   └── font.woff
│   │   └── photo.jpeg
│   └── _sv_settings.txt
│   └── _sv_custom.css
│   └── presentation.md
.

For example: I have a presentation and I want to show an image for one of my slides. The path to the image would be:

_assets/photo.jpeg

I may also want to use custom webfonts. I would put the webfont files in my assets folder and my sv_custom.css file would include:

@font-face {
  font-family: "Font";
  src: url("_assets/font.woff") format("woff");
}

*Files that start with an underscore will also be ignored. This is useful for a _README.md, for example.

Custom styles and scripts

If your site folder includes custom styles or scripts (_sv_custom.js or _sv_custom.css), the subpages will inherit these styles.

If a subpage includes its own _sv_custom.js or _sv_custom.css files, it will not interhit the styles from the parent folder. Instead, it will use this stylesheet.

Themes add a class to the body based on the chosen theme, as well as a site ID. You can use these classes to scope your styles. For example, you could do something like:

/* homepage */
body { background-color: white; }

/* subpages set to document theme */
body.document { background-color: black; }

/* a subpage with a specific ID */
body.site-123 { background-color: red; }

Global navigation

This can be done using JavaScript and inserting a navigation into each page.

We are working on releasing a code-snippet for V1 themes that does this. V2 themes will have an easier solution for this.

Example

For example, let’s imagine you are making a portfolio website for yourself. On the homepage, you wish to have images of your projects. Each of these images will link to a page about the project. You’d also like to have an information page.

To achieve this structure, we might organize our folders this like this:

.
├── Dropbox
│   ├── Small Victories
│   │   └── My Portfolio (my-portfolio.smvi.co)
│   │   │   └── _sv_settings.txt (theme: feed)
│   │   │   └── _sv_custom.css
│   │   │   └── _sv_custom.js
│   │   │   └── project-1-img.jpg
│   │   │   └── project-2-img.jpg
│   │   │   │   └── Project-1 (my-portfolio.smvi.co/project-1)
│   │   │   │   │   └── _sv_settings.txt (theme: slideshow)
│   │   │   │   │   └── project-1-img-A.jpg
│   │   │   │   │   └── project-1-img-B.jpg
│   │   │   │   └── Project-2 (my-portfolio.smvi.co/project-2)
│   │   │   │   │   └── _sv_settings.txt (theme: slideshow)
│   │   │   │   │   └── project-2-img-A.jpg
│   │   │   │   │   └── project-2-img-B.jpg
│   │   │   │   └── Info (my-portfolio.smvi.co/info)
│   │   │   │   │   └── _sv_settings.txt (theme: document)
│   │   │   │   │   └── index.md
.   .   .   .   .

Your website will have the following URL structure:

Homepage: my-portfolio.smvi.co
Project 1: my-portfolio.smvi.co/project-1
Project 2: my-portfolio.smvi.co/project-2
Information: my-portfolio.smvi.co/info

Creating links

Remember that SV lets you easily create links by using .webloc files. In the above example, if you wanted to easily create links to your subpages, you could add the .webloc files for each of your subpages to your site folder and give them the same name as the image that you want to turn into a link.

.

│   └── My Portfolio (my-portfolio.smvi.co)
│   │   └── _sv_settings.txt (theme: feed)
│   │   └── _sv_custom.css
│   │   └── _sv_custom.js
│   │   └── project-1-img.jpg
│   │   └── project-1-img.webloc
│   │   └── project-2-img.jpg
│   │   └── project-2-img.webloc
.   .

This will automatically make a link for those images:

<a href="my-portfolio.smvi.co/project-1">
    <img src="project-1-img.jpg">
</a>
Small Victories