Custom File Support
Pull Request #868 has adjusted the way of customizing the layout or style, canceling the custom files (such as _custom/custom.styl
) in the original theme directory, and only retaining the way of specifying the custom file in the NexT config file.
It is a good practice to separate the custom files from the theme files, so that you can add custom content without modifying the original source code of the theme, and avoid conflicts due to git merge
.
As with Data Files, you can place all custom layouts or styles in a specific location (for example: hexo/source/_data
). Add the custom file to hexo/source/_data
and uncomment the content under the custom_file_path
section in the NexT config file.
The file name and path must be the same in custom_file_path
.
custom_file_path: |
In addition to custom_file_path
, we also provide a more flexible way to customize, you can read the Theme Inject in documentation.
Examples of Modifying Layout
Live2d Widget
Create and edit source/_data/head.njk
in site root directory and add the following content:
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script> |
Then uncomment head
under the custom_file_path
section in NexT config file.
custom_file_path: |
Netlify Logo in Sidebar
Create and edit source/_data/sidebar.njk
in site root directory and add the following content:
<div class="cc-license animated" itemprop="sponsor"> |
Then uncomment sidebar
under the custom_file_path
section in NexT config file.
custom_file_path: |
Examples of Modifying Style
Tagcloud Color
Create and edit source/_data/variables.styl
in site root directory and add variables:
$tag-cloud-start = #aaa; |
Then uncomment variable
under the custom_file_path
section in NexT config file.
custom_file_path: |
How to Change Content Width
By default, the content width of NexT is controlled by the following variables:
$content-desktop
→ when screen width < 1200px.$content-desktop-large
→ when screen width >= 1200px.$content-desktop-largest
→ when screen width >= 1600px.- In mobile / tablet devices it will use responsive width.
You can override the default content width by editing source/_data/variables.styl
in site root directory.
Default variables for both Muse and Mist schemes are defined as:
$content-desktop = 700px |
For example, you may override these variables with percentage value to increase content width. Create and edit source/_data/variables.styl
in site root directory and add variables:
$content-desktop = 90% |
If values will in percents, during opening sidebar will dynamically decrease content width to defined by you percent.
But in standard behaviour, sidebar must displace content from yourself.
To around it, you can specify content width in em
:
$content-desktop = 50em |
Default variables for Pisces (and Gemini) scheme are defined as:
$content-desktop = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px') |
$content-desktop
value in this schemes is auto-responsive by default. It can be changed to any value too, but for better content visibility recommended to stay it as is.
In this schemes content width was defined on maximum and already balanced: if desktop width will be wider – content width will more narrowed for easier reading. But if you want to make more narrow content width in wider desktops, here is example. Create and edit source/_data/variables.styl
in site root directory and add variables:
$content-desktop-large = 65em |
In fact, Gemini scheme is just fork of Pisces scheme with some style improvements.
Therefore, almost all part of variables from Pisces scheme are imported to Gemini scheme too.
So, the changes of these variables or styles will be applied to both Pisces and Gemini schemes.
Then uncomment variable
under the custom_file_path
section in NexT config file.
custom_file_path: |
Hide Sidebar on Mobile
Create and edit source/_data/styles.styl
in site root directory and add styles:
+tablet-mobile() { |
Then uncomment style
under the custom_file_path
section in NexT config file.
custom_file_path: |
Hide "Keep on posting" in Archive Page
Create and edit source/_data/styles.styl
in site root directory and add styles:
.archive .collection-title { |
Then uncomment style
under the custom_file_path
section in NexT config file.
custom_file_path: |