Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Suggestion] Visible Tag Button #4

Open
Stanzilla opened this issue Apr 13, 2020 · 1 comment
Open

[Suggestion] Visible Tag Button #4

Stanzilla opened this issue Apr 13, 2020 · 1 comment
Labels
enhancement New feature or request

Comments

@Stanzilla
Copy link

Heya, I picked up your cool plugin for my docs and made a tag button for each page, since you seemed to be interested in doing that as well, here's my code as inspiration:

base.html

<!-- Tags-->
{% if not (page.is_homepage or page.meta.hide_tags) %}
	{% for tag in page.meta.tags %}
		<a href="{{ '/tags/' | url }}#{{ tag }}" title="{{ tag }}" class="md-tag">
			{% include ".icons/material/tag.svg" %}
			{{ tag }}
		</a>
	{% endfor %}
{% endif %}
// Tag
.md-tag {
  display: inline-block;
  margin: px2rem(9px) 0;
  padding-right: px2rem(10px);
  border-radius: px2rem(4px);
  background-color: lighten($manticore-black, 5%);
  font-size: ms(-1);
  list-style-type: none;
  cursor: pointer;
  overflow: hidden;
  color: $md-color-white !important;

  // Icon
  svg {
    display: inline-block;
    margin-right: px2rem(5px);
    padding: px2rem(2px) px2rem(8px);
    width: 38px;
    height: 38px;
    background-color: lighten($manticore-black, 15%);
    vertical-align: middle;
    fill: $md-color-white--light;
  }

  // Hovered tag
  &:hover {
    @include z-depth-focus;
    // background-color: lighten($manticore-black, 15%);

    // Icon
    svg {
      fill: var(--color-accent);
      background-color: lighten($manticore-black, 5%);
    }
  }
}
@jldiaz jldiaz added the enhancement New feature or request label Apr 13, 2020
@defenestration
Copy link

Mad, cuz' i just found this after doing the same thing.

Using markdown theme though I was able to integrate it to the bottom of the content section using this as an override. Ref https://www.mkdocs.org/user-guide/styling-your-docs/#overriding-template-blocks

{% extends "base.html" %}
{% block content %}
  {{ super() }}
  {% if page.meta.tags %}
  Tags: 
  {% for tag in page.meta.tags %}
  <a class="md-button md-button--primary" href="/tags.html#{{ tag }}">{{ tag }}</a>
  {% endfor %}
  {% endif %}
{% endblock %}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants