diff --git a/README.md b/README.md index 49bd9967..800ea2b6 100644 --- a/README.md +++ b/README.md @@ -52,32 +52,36 @@ If you would rather override the about page's layout with your own, you can do s ### Configuring Social Icons -Social Icons are optional. As of right now we support Twitter and GitHub, but more can be supported in the future. To show any of these icons, just provide the value in the `[params]` section of `config.toml`. +Social Icons are optional. To show any of these icons, just provide the value in the `[params]` section of `config.toml`. ```toml # config.toml [params] - twitter = "hugo-theme-codex" - github = "jakewies/hugo-theme-codex" + twitter = "https://twitter.com/GoHugoIO" + github = "https://github.com/jakewies/hugo-theme-codex" + # ... + + iconTitles = ["Twitter", "GitHub"] ``` -If either of these options are given, `hugo-theme-codex` will render the social icon in the footer. +If any of these options are given, `hugo-theme-codex` will render the social icon in the footer, using the order specified in `iconTitles`. See the contents of the [example site](https://github.com/jakewies/hugo-theme-codex/tree/master/exampleSite) for more details. -You can also create additional social icons by replicating the code in `partials/social-icons.html`. For example, to add an email social icon, you can add the follwing: - -```html - -``` -Note that you also need to add the following css in corresponding css files where social icons are displayed, i.e. `about.css` and `post.css`: - -```css -.social-icons__icon--email { - background-image: url("/icons/email.svg"); -} -``` +You can also create additional social icons by: +1. Add your own SVGs in `static/icons/`, for example `static/icons/reddit.svg`. +2. Modify your site's config as follows: + ```toml + [params] + # ... + reddit = "" + + iconTitles = [ "...", "Reddit"] + ``` + +Make sure that the icon title must match the icon's file name. If the title contains more than one word, say "My Awesome Site", +you can use dash "-" for the icon name: `my-awesome-site.svg`. ### Creating a blog post diff --git a/assets/scss/partials/_social-icons.scss b/assets/scss/partials/_social-icons.scss index 2918b012..9e621b68 100644 --- a/assets/scss/partials/_social-icons.scss +++ b/assets/scss/partials/_social-icons.scss @@ -8,13 +8,8 @@ height: 1.2rem; background-size: contain; background-repeat: no-repeat; -} - -.social-icons__icon--twitter { - background-image: url(/icons/twitter.svg); - margin-right: 2rem; -} - -.social-icons__icon--github { - background-image: url(/icons/github.svg); + + &:not(:last-child) { + margin-right: 2em; + } } diff --git a/exampleSite/config.toml b/exampleSite/config.toml index b555c947..436c7d5b 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -15,10 +15,20 @@ themesDir = "../../" # Optional params [params] - # Show Twitter icon linking to twitter.com/your-twitter-handle - twitter = "your-twitter-handle" # omit @ - # Show Github icon linking to github.com/your-github-handle - github = "your-github-handle" # omit @ + # Links to your social accounts, comment/uncomment as needed. Icons will be displayed for those specified. + twitter = "https://twitter.com/" + github = "https://github.com/" + # email = "mailto:" + # facebook = "https://facebook.com/" + # gitlab = "https://gitlab.com/" + # instagram = "https://instagram.com/" + # linkedin = "" + # youtube = "https://www.youtube.com/channel/" + + # Titles for your icons (shown as tooltips), and also their display order. + # Currently, these icons are supported: + # "Twitter", "GitHub", "Email", "Facebook", "GitLab", "Instagram", "LinkedIn", "YouTube" + iconTitles = ["Twitter", "GitHub"] # This disables Hugo's default syntax highlighting in favor # of prismjs. If you wish to use Hugo's default syntax highlighting diff --git a/layouts/partials/social-icons.html b/layouts/partials/social-icons.html index 672e3ed6..914e6132 100644 --- a/layouts/partials/social-icons.html +++ b/layouts/partials/social-icons.html @@ -1,8 +1,15 @@ +{{ $currentPage := . }} +{{ $icons := .Site.Params.iconOrder | default (slice "Twitter" "GitHub" "Email" "Facebook" "GitLab" "Instagram" "LinkedIn" "YouTube") }} + diff --git a/static/icons/email.svg b/static/icons/email.svg new file mode 100644 index 00000000..2af169e8 --- /dev/null +++ b/static/icons/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/facebook.svg b/static/icons/facebook.svg new file mode 100644 index 00000000..2570f56a --- /dev/null +++ b/static/icons/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/gitlab.svg b/static/icons/gitlab.svg new file mode 100644 index 00000000..85d54a1e --- /dev/null +++ b/static/icons/gitlab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/instagram.svg b/static/icons/instagram.svg new file mode 100644 index 00000000..9fdb8e35 --- /dev/null +++ b/static/icons/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/linkedin.svg b/static/icons/linkedin.svg new file mode 100644 index 00000000..39531094 --- /dev/null +++ b/static/icons/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/youtube.svg b/static/icons/youtube.svg new file mode 100644 index 00000000..c4824385 --- /dev/null +++ b/static/icons/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file