Markets

Break shows market quotes in two places:

• The top bar runs a short line of quotes, such as BTC 71,240 ▲, on every page. You choose the markets with the Ticker setting. The line is hidden on screens narrower than 992 pixels and on screens held upright.
• The Markets section on the front page shows one card per market, each with your latest story about it and its quote. You choose the markets with public tags whose slug starts with market-.

A /markets/ page can bring both together with your markets coverage.

Where the Quotes Come From#

The quotes are loaded in the reader's browser from two free public sources. No account or key is needed.

Quotes refresh every five minutes while the page is open in front. Currency rates are the ECB's daily reference rates, so they change once a working day, not by the minute.

Stock indices, commodities and other markets have no free source the theme can use. Their cards show a dash instead of a quote, unless you add a source of your own. The last part of this page shows how.

The Top Bar Quotes#

1. Navigate to ⛭ Settings → Design
2. Click Customize
3. Click Theme
4. Scroll to the Homepage section
5. Edit Ticker
6. Click Save

The default value is BTC, ETH, EUR/USD. List the markets separated by commas, in the order you want them shown.

Break knows the CoinGecko IDs of BTC, ETH, SOL, XRP, ADA, DOGE, LTC, BNB, DOT, AVAX, LINK, TON, TRX, MATIC, USDT and USDC. For any other coin, write the symbol, an equals sign and the coin's ID from its CoinGecko page, for example PEPE=pepe.

A currency pair can also be written without the slash, as EURUSD.

The quotes take turns with the clock and the breaking flash in the middle of the top bar. A market whose quote cannot be loaded is left out of the line. See Top Bar.

To remove the quotes from the top bar, clear the Ticker field, or add ticker to Disabled features. The Markets section on the front page keeps its own quotes either way. See Features.

The Markets Section#

The section shows one card per market, up to 12, in alphabetical order of their slugs. Each card shows:

• the market's symbol and the tag's name at the top
• your newest post with that tag: a thumbnail, the title, the date and the reading time
• the quote and its change at the foot, under the word Now

The foot of the section credits the sources: Crypto via CoinGecko, currencies via the ECB.

Setup#

Each market is a public tag whose slug starts with market-.

1. Navigate to ⛭ Settings → Tags
2. Click New tag
3. Enter the market's name, for example Bitcoin
4. Set the Slug to market- followed by the symbol, for example market-btc
5. Click Save
6. Add the tag to the stories about that market

The symbol is the part of the slug after market-. A hyphen between two currencies reads as a currency pair.

The tag's name is free text, so Bitcoin or EUR/USD both work. The slug decides the quote.

The Markets desk link#

The head of the section links to Markets desk. With a public tag whose slug is markets, the link opens that tag's archive. Without one, it opens /blog/.

Use the markets tag for your general markets coverage, alongside the market- tag of each single market.

The Markets Page#

Break builds a markets page from a page with the slug markets. It shows the page title and excerpt, the same market cards as the front page, then up to 24 posts tagged markets under the heading Markets desk.

1. Go to Pages and click New page
2. Enter a title, for example Markets
3. Open Page settings and change Page URL to markets
4. Optionally, write a short description in the Excerpt field
5. Click Publish

The page body is not shown, so it can stay empty. Add the page to your navigation in ⛭ Settings → Navigation.

Quotes From Your Own Source#

If you have a data service for indices, commodities or other markets, you can feed its quotes to the theme through Code Injection. Break asks your source first and fills whatever it leaves out from CoinGecko and the ECB.

1. Go to ⛭ Settings → Code injection
2. Paste a script like this one into Site Header
3. Click Save

<script>
  window.breakTheme = window.breakTheme || {};
  window.breakTheme.tickerProvider = async function (symbols) {
    // symbols is a list such as ["BTC", "EUR/USD", "SPX"]
    const response = await fetch('https://quotes.example.com/?symbols=' + symbols.join(','));
    const data = await response.json();

    // Return one entry per symbol you can quote:
    // the price, and the change in percent
    return {
      SPX: { value: data.spx.price, change: data.spx.changePercent },
    };
  };
</script>

The function receives the symbols as Break reads them, with crypto symbols in capitals and currency pairs written with a slash. It returns an object keyed by those symbols. Each entry has a value, which is the price, and a change, which is the change in percent, for example 0.84 or -1.2. Symbols it leaves out go to the built-in sources. The address and the shape of data above are placeholders for your own service.

Notes#

• Quotes are cached in the reader's browser for five minutes, so moving between pages does not load them again.
• The section and the page show up to 12 markets.