Xaes - Ghost Docs

Customization - Valkyrie

Customization - Valkyrie

Set Dual logos

Valkyrie supports logos. The recommended size is: 560 x 110px. You may need two different color version of your logo. Because Valkyrie has 2 main colors (dark / light), your logo might not be visible in one of them (Ex.: If your logo is white and you have set the light version of the theme, it would be impossible to see your logo, since the main navbar and your logo are the same color). The theme can handle two logos at a time and switch them accordly.

To use the logo switcher, follow these steps:

  • Copy your two PNG logo files on your valkyrie/assets/images directory.

  • Make sure to rename the dark version of your logo to logo-dark.png and the light one to logo-light.png.

  • Open the navigation.hbs file located at the valkyrie/partials/ directory.

  • Delete the entire line 7 and 10 of the doc. Then, comment the line 12:

valkyrie/partials/navbar.hbs
<a class="navbar-brand" href="{{@site.url}}">
<!-- DUAL LOGO SWITCHER
<img alt="{{@site.title}}" class="img-fluid lazy logo-dark" src="{{asset "images/logo-dark.png"}}" />
<img alt="{{@site.title}}" class="img-fluid lazy logo-light" src="{{asset "images/logo-light.png"}}" />
-->
<!-- SINGLE LOGO -->
<img alt="{{@site.title}}" class="img-fluid lazy" src="{{@site.logo}}" />
</a>
  • Save the file. This is how your code should look like after the proper changes:
valkyrie/partials/navbar.hbs
<a class="navbar-brand" href="{{@site.url}}">
<img alt="{{@site.title}}" class="img-fluid lazy logo-dark" src="{{asset"images/logo-dark.png"}}" />
<img alt="{{@site.title}}" class="img-fluid lazy logo-light" src="{{asset "images/logo-light.png"}}" />
<!-- SINGLE LOGO
<img alt="{{@site.title}}" class="img-fluid lazy" src="{{@site.logo}}" />
-->
</a>
  • In order to activate the logo support, go to your Ghost Admin Dashboard and upload any version of your logo (Valkyrie only needs to detect whether if you want to use a logo or not. So, it doesn't matters which one you upload from the dashboard, the theme will still use those images you copied and renamed on step 1 and 2).

  • Rezip the theme, and upload it again to your blog.

Add Disqus

If you want to display comments on your posts. Valkyrie has a Disqus partial ready to be activated.

  • Login into your Disqus account. Navigate to your Disqus's Admin Panel and create a site if you don't have any.

  • Select your existant Disqus site, and click on Installing Disqus.

  • In the administration panel of your Disqus's site, click on Edit Settings.

  • Look up for the Disqus shortname and copy it. Note: The shortname won't be the same as shown in the screenshot.

  • Open the content-cta.hbs file located at your valkyrie/partials directory. Paste the your Disqus site name in line 12 between the double quotes of shortname.

valkyrie/partials/content-cta.hbs
<article>
{{{content}}}
</article>
{{! Article Bottom - Go to partials/article-bottom.hbs to view this partial. }}
{{> "article-bottom"}}
{{! Next / Prev Post - Go to partials/nextprev.hbs to view this partial. }}
{{> "nextprev"}}
{{! Disqus - Go to partials/disqus.hbs to view this partial. Remove the "!" to activate this partial}}
{{> "disqus" shortname=""}}
  • Rezip the theme, and upload it again to your blog.

Enable Color Switcher

Valkyrie has a color selector disabled by default. To activate it, follow these steps:

  • Open the default.hbs file located at your valkyrie/ directory.

  • Go to line 45. Inside the double quotes of switcher attribute put true.

valkyrie/default.hbs
<body>
{{! Navbar - Go to partials/navbar.hbs to view this partial. }}
{{> navbar switcher=""}}
{{{body}}}
{{! Search - Go to partials/search.hbs to view this partial. }}
{{> "search"}}
{{! Footer - Go to partials/footer.hbs to view this partial. }}
{{> "footer"}}
{{! JS ASSETS }}
<script>
var ghosthunter_key = "";
var maxPages = parseInt('{{pagination.pages}}');
var endMessage = '{{t "No More Posts"}}';
var loadingMessage = '{{t "Loading..."}}';
var Message = '{{t "More posts"}}';
</script>
<script src="{{asset "built/js/extra.js"}}"></script>
{{{block "post-scripts"}}}
<script src="{{asset "built/js/main.js"}}"></script>
{{ghost_foot}}
</body>

Change default colors

This only will take effect if you have the Color Selector featured disabled in Valkyrie. There are 4 accent colors available and ready to use: green, blue, purple and red. Also, 2 base colors: dark and light. To change them, follow those steps:

  • Open the theme-colors.hbs file located at your valkyrie/partials/ directory.

  • Replace the color of line 2 by any other available (green, blue, purple and orange / dark and light). For example:

valkyrie/partials/theme-colors.hbs
{{! You can also use: brown, green, purple, red. And: dark, light. }}
brown dark
  • Rezip the theme, and upload it again to your blog.

Code Highlighting

If you are a developer and want to display your code in a nice way, Valkyrie comes with a code highlighter called Prism. It supports +150 languages (with +60 installed on the theme). To activate it, create a new HTML widget on your post and write these 2 lines of code:

<pre class="line-numbers">
<code class="language-xxxx">{your code}</code>
</pre>

Prism needs to know which languague you want to highlight. As last step you need to specify it as a class value on the code tag. In this case the x's on language-xxxx need to be replaced by the language name. For example, if you want to highlight CSS code, the class value would be: language-css. After that, write your code inside the code tag. For more information and know about supported languages lookup the Prism documentation here. Valkyrie has also installed the line enumeration plugin, you can activate it by adding the line-numbers class on the pre tag.

NodeJS Tasks

Note: This section is intended for people that want to further extend the theme and might require a little bit of development experience.

Valkyrie as pre-defined NodeJS tasks to help you with the development / extension process. To make use of them, please make sure to have Yarn (v. 1.22.10) and NodeJS (v. 14.17) installed. I recommend using NVM (Node Version Manager to install NodeJS in your system).

Task NameDescription
devWatches for any file change and them generates a new version of CSS and JS. The output directory is located at assets/built.
zipDoes the same as dev, but also autoprefixes, and uglifies CSS / JS files. At the end, it creates a ZIP file located at dist/ folder and ignores non-essential files (node_modules, etc.).
testTest the theme with GScan to check for Ghost Compatibility issues.

To run any of the tasks you can run the following command in a terminal inside the Valkyrie theme files: yarn <task name>. Ex: yarn dev.

Translations

Valkyrie already brings 2 languages by default: English and Spanish. If you want to switch between those two, follow these steps:

  1. Go to your Ghost Admin Panel.

  2. Navigate to "General" in "Settings" section at the sidebar. Expand the Publication Language tab and write en for English and es for Spanish.

If you want to add another language, follow these steps:

  1. Create a JSON file in your valkyrie/locales/ directory with the name of the language you want to use following the HTML ISO Language Code. (e.g.: es for Spanish, fr for French, zh for Chinese, ja for Japanese).

  2. Open the en.json file, copy the code and then, paste it on the new file you just created at step 1.

  3. On each line, replace the value after the colon with your translation, between the double quotes. Save the file.

  4. Go to your Ghost Admin Panel.

  5. Navigate to General in Settings section at the sidebar. Expand the Publication Language tab and write the name of the file you just wrote (HTML ISO Lang. Code).