From 73872e420d335fdeb46033cc56894e1084f05c15 Mon Sep 17 00:00:00 2001 From: kentnek Date: Tue, 23 Jun 2020 21:48:49 +0800 Subject: [PATCH 1/2] Add more social icons, and an easy way to configure them --- README.md | 36 ++++++++++++++----------- assets/scss/partials/_social-icons.scss | 13 +++------ exampleSite/config.toml | 18 ++++++++++--- layouts/partials/social-icons.html | 19 ++++++++----- static/icons/email.svg | 1 + static/icons/facebook.svg | 1 + static/icons/gitlab.svg | 1 + static/icons/instagram.svg | 1 + static/icons/linkedin.svg | 1 + static/icons/youtube.svg | 1 + 10 files changed, 57 insertions(+), 35 deletions(-) create mode 100644 static/icons/email.svg create mode 100644 static/icons/facebook.svg create mode 100644 static/icons/gitlab.svg create mode 100644 static/icons/instagram.svg create mode 100644 static/icons/linkedin.svg create mode 100644 static/icons/youtube.svg diff --git a/README.md b/README.md index 49bd99678..96dd4177f 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 2918b012b..9e621b689 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 b555c9479..436c7d5b0 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 672e3ed64..914e61329 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 000000000..2af169e83 --- /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 000000000..2570f56a0 --- /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 000000000..85d54a1ea --- /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 000000000..9fdb8e35d --- /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 000000000..395310945 --- /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 000000000..c48243850 --- /dev/null +++ b/static/icons/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file From 2651ba97470ac493bed99f009e5c9922154d0524 Mon Sep 17 00:00:00 2001 From: kentnek Date: Tue, 23 Jun 2020 21:51:36 +0800 Subject: [PATCH 2/2] fix readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 96dd4177f..800ea2b63 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,7 @@ You can also create additional social icons by: # ... reddit = "" - iconTitles = [ ..., "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",