Social network¶

Connect and engage with your audience through social networks.

Connect with visitors by including links to your social media profiles, making it easy for them to find and follow you on other platforms.

Source code¶

A link directs you to the repository where you can access the project’s source code. These links will be visible in both the website’s navbar and footer.

Important

The shibuya theme will only display one source code link.

GitHub¶

The GitHub icon will be displayed on the navbar and footer.

html_theme_options = {
  "github_url": "https://github.com/lepture/shibuya"
}

Gitlab¶

The Gitlab icon will be displayed on the navbar and footer.

html_theme_options = {
  "gitlab_url": "https://gitlab.com/gitlab-org/gitlab"
}

Bitbucket¶

The Bitbucket icon will be displayed on the navbar and footer.

html_theme_options = {
  "bitbucket_url": "https://bitbucket.org/sonarsource/sonarqube-scan"
}

Community¶

You can also provide links to various social platforms where you can interact with the documentation’s community, exchange ideas, and stay informed about the latest developments.

Discord¶

The Discord icon will be displayed on the navbar and footer.

html_theme_options = {
  "discord_url": "https://discord.gg/example/"
}

Slack¶

The Slack icon will be displayed on the navbar and footer.

html_theme_options = {
  "slack_url": "https://example.com/join/slack"
}

X (Twitter)¶

The X icon will be displayed only on the footer.

html_theme_options = {
  "twitter_url": "https://twitter.com/lepture"
}

The Shibuya theme also includes support for Twitter cards, allowing you to include additional Twitter information:

html_theme_options = {
  "twitter_site": "typlog",
  "twitter_creator": "lepture",
}

Mastodon¶

The Mastodon icon will be displayed only on the footer.

html_theme_options = {
  "mastodon_url": "https://mas.to/@trumpet"
}

YouTube¶

The YouTube icon will be displayed only on the footer.

html_theme_options = {
  "youtube_url": "https://youtube.com/@username"
}

Reddit¶

The Reddit icon will be displayed only on the footer.

html_theme_options = {
  "reddit_url": "https://www.reddit.com/r/flask/"
}

LinkedIn¶

The LinkedIn icon will be displayed only on the footer.

html_theme_options = {
  "linkedin_url": "https://www.linkedin.com/company/microsoft"
}

Custom networks¶

If you need to add social networks that Shibuya theme doesn’t contain, you can custom it with partials/nav-socials.html and partials/foot-socials.html:

_templates/partials/nav-socials.html¶

<div class="sy-head-socials">
  {%- include "components/nav-socials.html" -%}
  <a href="your-social-network-url" aria-label="Your Social network">
    <svg>...</svg>
  </a>
</div>

_templates/partials/foot-socials.html¶

<div class="sy-foot-socials">
  {%- include "components/foot-socials.html" -%}
  <a href="your-social-network-url" aria-label="Your Social network">
    <svg>...</svg>
  </a>
</div>