NexT

Theme for Hexo

Sidebar Setting

NexT User Docs – Theme Settings – Sidebar

By default sidebar only shows in posts (have a table of content), and is placed in left side. You can change it by editing values under sidebar setting in NexT config file.

Sidebar has several options, including position, width, display, padding and offset.

Set up sidebar position by changing the value of sidebar.position, which can be one of following:

  • left → Place at the left of the screen.
  • right → Place at the right of the screen.
NexT config file
sidebar:
  position: left
  #position: right

You can change sidebar width by specify sidebar.width setting in pixels, for example:

NexT config file
sidebar:
  width: 300

This option is commented out by default and values are:

  • For Muse | Mist schemes: 320
  • For Pisces | Gemini schemes: 240

Set up conditions under which sidebar will show by editing sidebar.display value, which can be one of following:

  • post → Show sidebar only in posts which have index.
  • always → Show sidebar in all pages.
  • hide → Hide it in all pages (but can be opened by user manually).
  • remove → Remove sidebar totally.
NexT config file
sidebar:
  display: post
  #display: always
  #display: hide
  #display: remove

Set up sidebar padding in pixels by changing the value of sidebar.padding:

NexT config file
sidebar:
  padding: 18

Set up sidebar offset from top menubar in pixels by changing the value of sidebar.offset:

NexT config file
sidebar:
  offset: 12

For now only Pisces / Gemini Schemes supports offset setting under 6.0.x version or later.

Configuring Avatar

By default NexT doesn't show avatar in sidebar. You can configure it by editing values under avatar setting in NexT config file.

For first test you can uncomment /images/avatar.gif value near the avatar.url setting to see default avatar:

NexT config file
avatar:
  url: /images/avatar.gif

Then you need to specify your own avatar. It can be done one of the ways below:

Put your avatar under site directory source/uploads/ (create directory if it doesn't exists).
And then change option to url: /uploads/avatar.png.

Put your avatar under theme directory source/images/.
And then change option to url: /images/avatar.png.

Current site uses avatar under theme directory from file located in next/source/images/apple-touch-icon-next.png with following config:

NexT config file
avatar:
  url: /images/apple-touch-icon-next.png

You can also specify any external URL with absolute path to image: http(s)://example.com/avatar.png

Set up rounded of avatar by changing the value of avatar.rounded:

  • true → Avatar will be rounded.
  • false → Avatar will be squared.
NexT config file
avatar:
  rounded: true

Set up rotated of avatar by changing the value of avatar.rotated:

  • true → Avatar will be rotate under the mouse hovering.
  • false → Avatar will not rotate under the mouse hovering.
NexT config file
avatar:
  rotated: true

By default NexT shows the categories and counts of Posts / Categories / Tags in sidebar. You can configure it by editing value site_state in NexT config file.

NexT config file
site_state: true

Social Links have similar structure as Menu Items, only target link there is difference: specified link must have full url path (permalink).

Edit the social section in NexT config file as following:

NexT config file
social:
  GitHub: https://github.com/yourname || fab fa-github
  E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  Weibo: https://weibo.com/yourname || fab fa-weibo
  Twitter: https://twitter.com/yourname || fab fa-twitter
  FB Page: https://www.facebook.com/yourname || fab fa-facebook
  StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  YouTube: https://youtube.com/yourname || fab fa-youtube
  Instagram: https://instagram.com/yourname || fab fa-instagram
  Skype: skype:yourname?call|chat || fab fa-skype

By default NexT shows the icons of social links in sidebar.

You can configure it by editing value enable in social_icons section in NexT config file.

NexT config file
social_icons:
  enable: true

Set the value icons_only to true to display social icons without description in social_icons section in NexT config file as following:

NexT config file
social_icons:
  icons_only: true

Set the value transition to true to display social icons with transition effects in social_icons section in NexT config file as following:

NexT config file
social_icons:
  transition: true

You can add blog rolls within sidebar in NexT.

By default NexT shows the globe icon before title. The name of icon can be found in Font Awesome site. You can configure it by editing value icon in links_settings section in NexT config file.

NexT config file
links_settings:
  icon: fa fa-globe

By default all blogrolls are displayed in block. You can configure it to inline by editing value layout in links_settings section in NexT config file.

NexT config file
links_settings:
  layout: block

Edit the links section in NexT config file and add your favorite links:

NexT config file
links:
  Title1: https://example1.com/
  Title2: https://example2.com/

By default NexT shows Table Of Contents (TOC) in the sidebar. You can disable it by setting toc.enable to false in NexT config file.

NexT config file
toc:
  enable: true

By default NexT adds list number to TOC automatically. You can disable it by setting toc.number to false in NexT config file.

NexT config file
toc:
  number: true

If the post header width longer than sidebar width, you can wrap the header words in next lines by setting toc.wrap to true in NexT config file.

NexT config file
toc:
  wrap: true

If you want all level of TOC in a post to be displayed, rather than the activated part of it, you can set toc.expand_all to true in NexT config file.

NexT config file
toc:
  expand_all: true

By default maximum heading depth of generated toc is 6. You can set it by setting toc.max_depth to another number in NexT config file.

NexT config file
toc:
  max_depth: 3
0%