IkeqIkeq

The whole problem with the world is that fools and fanatics are always so certain of themselves, but wiser people so full of doubts.

6Archives4Categories14Tags

Inside Theme — Sidebar

Jun 21, 2019

The sidebar is the left panel that slides in when you toggle it. It contains your profile, navigation links, and social media icons.

Profile

The profile section displays your avatar, name, and a short bio.

1
2
3
4
5
6
7
8
profile:
  # Used for Gravatar. Falls back to hexo.config.email if unset.
  email: ikeq@foxmail.com

  # Or set a direct avatar URL (overrides email/Gravatar)
  # avatar: https://example.com/avatar.jpg

  bio: Front-end engineer. Writes about Web, AI, and side projects.

Avatar is fetched from Gravatar using the email hash unless you provide an explicit avatar URL.

Define the links that appear in the sidebar below your profile:

1
2
3
4
5
6
7
8
9
menu:
  Home: /
  About: /about
  Archives: /archives
  Tags: /tags
  # Add any custom page:
  # Resume: /resume
  # Links: /links
  # GitHub: https://github.com/username

Each entry is Label: URL. URLs can be internal paths (/about) or external links (https://github.com/username).

Hexo auto-generates /archives, /tags, and /categories pages when you use the hexo new page command with the appropriate layout. See Content Configuration → for pagination settings.

Social Media Icons

Inside includes built-in icons for common platforms. Each entry renders as an icon button in the sidebar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
sns:
  # Built-in icon names: email, feed, github, twitter, facebook,
  # instagram, tumblr, dribbble, telegram, youtube, hangouts,
  # linkedin, pinterest, soundcloud, myspace, weibo, qq
  - icon: email
    title: Email
    url: ikeq@foxmail.com          # Leave blank to use profile.email

  - icon: github
    title: GitHub
    url: https://github.com/ikeq

  - icon: feed
    title: RSS Feed
    url:                           # Leave blank to auto-detect from hexo.config.feed

Custom Icon

For any platform without a built-in icon, provide your own HTML template:

1
2
3
4
5
6
7
8
sns:
  - title: My custom link
    url: https://example.com
    template: |
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
           fill="currentColor" width="18px" height="18px">
        <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 0"/>
      </svg>

The footer appears at the bottom of the sidebar. Control which elements are visible:

1
2
3
4
5
6
7
8
9
10
11
12
13
footer:
  # Copyright line. Set to false to hide.
  # Supports HTML: '&copy; 2024 Ikeq'
  copyright: '&copy; 2024 · <a href="/">Ikeq's Blog</a>'

  # "Powered by Hexo" link. Default: true
  powered: true

  # "Theme: Inside" link. Default: true
  theme: true

  # Custom text (overrides all above when set)
  # custom: 'Hosted on <a href="https://pages.github.com/">GitHub Pages</a>'

Complete Sidebar Configuration Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
profile:
  email: ikeq@foxmail.com
  bio: Front-end engineer. Obsessed with clean interfaces and well-crafted tools.

menu:
  Home: /
  About: /about
  Archives: /archives
  Tags: /tags
  Resume: /resume

sns:
  - icon: email
    title: Email
    url:
  - icon: github
    title: GitHub
    url: https://github.com/ikeq
  - icon: feed
    title: Feed
    url:

footer:
  copyright: '&copy; 2024 Ikeq'
  powered: true
  theme: true

Next Steps

Buy me a cup of milk 🥛.

支
Profile
Navigation Menu
Social Media Icons
Custom Icon
Footer
Complete Sidebar Configuration Example
Next Steps