Skip to content
Permalink
Browse files

Social Widget: add custom social items (#159)

* Add custom social link support
* Add custom social link guide in README

Fixes #151
  • Loading branch information
yuqingc authored and Vimux committed Dec 6, 2019
1 parent 650ed32 commit 277f9988d652d03d67243e64a2238d590515aa59
Showing with 42 additions and 0 deletions.
  1. +31 −0 README.md
  2. +11 −0 layouts/partials/widgets/social.html
@@ -115,6 +115,16 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
gitlab = "username"
bitbucket = "username"
email = "example@example.com"
# Custom social links
[[Params.widgets.social.custom]]
title = "Youtube"
url = "https://youtube.com/user/username"
icon = "youtube.svg" # Optional. Path relative to "layouts/partials"
[[Params.widgets.social.custom]]
title = "My Home Page"
url = "http://example.com"
```

A good idea is not to copy all these settings without understanding how it works. Use only those parameters that you
@@ -188,6 +198,27 @@ menu: ["main", "side", "footer"] # Add page to a main, side, and footer menu

**Note:** Please keep in mind that Mainroad menus don't support nested items i.e. submenus.

### Custom social link quick guide

**Mainroad** contains some built-in social link widgets. You can also set custom social links by adding `Params.widgets.social.custom` to your `config.toml`. Here is an example.

```toml
[[Params.widgets.social.custom]]
title = "Youtube"
url = "https://youtube.com/user/username"
icon = "youtube.svg"
```

**Note:** You need to put your icon file in `layouts/partials` directory under your project's root if you want to display an icon of your social link. The `icon` filed, which is optional, should be a path relative to `layouts/partials`.

**Note:** *Only* SVG files are supported to be used as custom social icons in the current version. If you use any files of another format, PNG for example, a compile error will be raised by Hugo.

**Note:** Not every SVG icon can be used. For better results, it should be one-color SVG file with a special class attribute `{{ with .class }}{{ . }} {{ end }}` and 24x24 size. At a minimum, custom SVG icon needs these attributes:

```html
<svg class="{{ with .class }}{{ . }} {{ end }} icon" width="24" height="24">...</svg>
```

## Contributing

Have you found a bug or got an idea for a new feature? Feel free to use the
@@ -74,6 +74,17 @@ <h4 class="widget-social__title widget__title">{{ T "social_title" }}</h4>
</a>
</div>
{{- end }}

{{ range .Site.Params.widgets.social.custom }}
<div class="widget-social__item widget__item">
<a class="widget-social__link widget__link btn" title="{{ .title }}" rel="noopener noreferrer" href="{{ .url }}" target="_blank">
{{- if .icon }}
{{ partial .icon (dict "class" "widget-social__link-icon") }}
{{- end }}
<span>{{ .title }}</span>
</a>
</div>
{{ end }}
</div>
</div>
{{- end }}

0 comments on commit 277f998

Please sign in to comment.
You can’t perform that action at this time.