Preconnect
NexT supports adding preconnect resource hints to establish early connections to fonts and plugins origins.
You can enable it by setting preconnect: true
in NexT config file.
# Preconnect CDN for fonts and plugins. |
Text Align
NexT allows to customize the text alignment in posts / pages. The text-align
CSS property sets the horizontal alignment of a block element or table-cell box.
Values | Effect |
---|---|
start | The same as left if direction is left-to-right and right if direction is right-to-left. |
end | The same as right if direction is left-to-right and left if direction is right-to-left. |
left | The inline contents are aligned to the left edge of the line box. |
right | The inline contents are aligned to the right edge of the line box. |
center | The inline contents are centered within the line box. |
justify | The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line. |
justify-all | Same as justify , but also forces the last line to be justified. |
match-parent | Similar to inherit , but the values start and end are calculated according to the parent’s direction and are replaced by the appropriate left or right value. |
# Set the text alignment in the posts. |
Mobile Devices Adaptation
If you want to reduce padding/margin indents on devices with narrow width, you can enable it by setting value mobile_layout_economy
to true
in NexT config file.
mobile_layout_economy: true |
Theme Color
By default NexT uses black-deep (#222
) as the color of browser header panel (it’s supported by Safari 15 and Android Chrome). You can configure it by editing values with Hex color in theme_color
section in NexT config file.
theme_color: |
Body Scrollbar
# Override browsers' default behavior. |
Codeblock Style
NexT uses the Highlight.js and Prism package to support code highlight.
Please read Hexo’s documentation on Syntax Highlighting first, and set it up in Hexo config file.
You can preview all available Code Highlight themes here: NexT Highlight Theme Preview. Change the value of theme
and prism
to choose the highlight style you like.
codeblock: |
If Dark Mode is enabled, dark code highlighting themes will be available.
NexT supports the copy-and-paste functionality of codeblock.
You can enable it by setting value copy_button.enable
to true
in NexT config file. By default NexT shows copy result of the copy-and-paste functionality.
codeblock: |
With style
option, you can change your copy button style.
There are three style available currently: default
(Just leave it empty), flat
and mac
.
codeblock: |
Back To Top
back2top: |
Set the value back2top.enable
to true
to display Back to top
button.
back2top: |
Set the value back2top.sidebar
to true
to put the button in sidebar.
back2top: |
Set the value back2top.scrollpercent
to true
to display scroll percent label in Back to top
button.
Reading Progress
NexT supports the page scroll reading progress indicator.
You can enable it by setting value reading_progress.enable
to true
in NexT config file.
reading_progress: |
Bookmark
Bookmark is a plugin that allow the users save their reading progress. Users could just click the bookmark icon (like 🔖) in left-top of the page to save the scroll position. And when they visit your blog in the next time, they can resume the last scroll position of each page automatically.
You can enable it by setting value bookmark.enable
to true
in NexT config file.
bookmark: |
GitHub Banner
NexT provides Follow me on GitHub
banner in right-top corner.
# Follow me on GitHub banner in right-top corner. |
permalink
→ is the specified link must have full url path.
title
→ is the title and aria-label name.
You can set enable
to true
and add your own GitHub link.
Fonts Customization
NexT gives you 5 specific font settings, they are:
- Global Font: Font used in the whole site.
- Title Font: Font used by site title.
- Headlines Font: Font used by headings in articles (h1, h2, h3, h4, h5, h6).
- Article Font: Font used by articles.
- Code Font: Font used by code blocks in articles.
Each font will be used as the first font of this class, NexT will fallback to internal font settings if they are unavalible.
- Non-code Font: Fallback to
"PingFang SC", "Microsoft YaHei", sans-serif
- Code Font: Fallback to
consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace
Plus each section has a external
attribute, this controls whether to use the font library CDN.
Use this can help you to use fonts installed in system and reduce unnecessary requests.
To solve the unstable of Google Fonts API in some countries, NexT supports custom URL of fonts library by setting font.host
.
In addition, we noticed that for requests from certain websites, Google Fonts will return 403. At this time, it is necessary to use font.host
to set up a mirror site.
Relevant issues: #613, #1333
font: |
And you can apply multiple font families for each option. This is especially useful for those who often writes both Chinese and English.
font: |
According to the CSS Fonts Module Level 3 spec:
Font family names other than generic families must either be given quoted as strings, or unquoted as a sequence of one or more identifiers.
To avoid escaping mistakes, quote font family names if necessary.
If you still need more customization, following change will cover Fonts Customization function. Edit source/_data/variables.styl
in site root directory and add two varibles:
// Title Font, set it to font family you want. |
Then uncomment variable
under the custom_file_path
section in NexT config file.