Skip to content
Permalink
Browse files

config: add FontAwesome as alternative to iconfont

Some users may prefer FontAwesome to iconfont for providing logos and
icons.  FontAwesome can now be selected by adding a truthy value to the
fontAwesome parameter; iconfont remains the default for
backwards-compatibility.
  • Loading branch information...
samuelkarp committed Mar 17, 2019
1 parent ac11c7d commit 6c137098957c0252ba000fcf2652a4942d9286f5
@@ -101,6 +101,10 @@ The following social network icons are available:

You can choose someone to display, the recommend number is 7 icons.

Icons are provided by [iconfont](https://www.iconfont.cn/) by default, but you
can choose to use [FontAwesome](https://fontawesome.com/) instead by adding
`fontAwesome = true` to the `[params]` section.

**SEO**

The hugo-nuo theme support [Google](https://www.google.com/webmasters/), [Bing](https://www.bing.com/toolbox/webmaster/), [Baidu](https://zhanzhang.baidu.com/), [Sogou](http://zhanzhang.sogou.com/), [360](http://zhanzhang.so.com/) webmaster's meta verification tool, you can activate as required. The `seotitle` and `description` will show in search results and browser title.
@@ -22,9 +22,13 @@ var filesToCache = [
'https://fonts.googleapis.com/css?family=Lobster',
'https://fonts.gstatic.com/s/lobster/v20/neILzCirqoswsqX9zoKmM4MwWJU.woff2',

{{ with .Site.Params.fontAwesome }}
// FontAwesome
'https://use.fontawesome.com/releases/v5.7.2/css/all.css',
{{ else }}
// Iconfont
'https://at.alicdn.com/t/font_174169_qmgvd10zwbf.woff',

{{ end }}
// smooth-scroll
'https://cdn.jsdelivr.net/npm/smooth-scroll@15.0.0/dist/smooth-scroll.min.js',

@@ -1,6 +1,9 @@
@import 'partials/reset';
@import 'partials/variables';
{{- with .Site.Params.fontAwesome -}}
{{- else -}}
@import 'partials/icons';
{{- end -}}
@import 'partials/skeleton';
@import 'partials/header';
@import 'partials/summary';
@@ -20,15 +20,21 @@
</head>
<body>
{{ if ne .Kind "404" }}
{{- $upIcon := "icon icon-up" -}}
{{- $commentIcon := "icon icon-comment" -}}
{{- with .Site.Params.fontAwesome -}}
{{- $upIcon = "fas fa-caret-up" -}}
{{- $commentIcon = "fas fa-comment-dots" -}}
{{- end -}}
<div class="suspension">
<a role="button" aria-label="Go to top" title="Go to top" class="to-top is-hide"><span class="icon icon-up" aria-hidden="true"></span></a>
<a role="button" aria-label="Go to top" title="Go to top" class="to-top is-hide"><span class="{{ $upIcon }}" aria-hidden="true"></span></a>
{{ if and (eq .Type "post") (eq .Kind "page") }}
{{ if .Site.Params.changyan }}
<a role="button" aria-label="Go to comments" title="Go to comments" class="to-comment" href="#SOHUCS"><span class="icon icon-comment" aria-hidden="true"></span></a>
<a role="button" aria-label="Go to comments" title="Go to comments" class="to-comment" href="#SOHUCS"><span class="{{ $commentIcon }}" aria-hidden="true"></span></a>
{{ else if .Site.DisqusShortname }}
<a role="button" aria-label="Go to comments" title="Go to comments" class="to-comment" href="#disqus_thread"><span class="icon icon-comment" aria-hidden="true"></span></a>
<a role="button" aria-label="Go to comments" title="Go to comments" class="to-comment" href="#disqus_thread"><span class="{{ $commentIcon }}" aria-hidden="true"></span></a>
{{ else if .Site.Params.Gitment }}
<a role="button" aria-label="Go to comments" title="Go to comments" class="to-comment" href="#gitment-container"><span class="icon icon-comment" aria-hidden="true"></span></a>
<a role="button" aria-label="Go to comments" title="Go to comments" class="to-comment" href="#gitment-container"><span class="{{ $commentIcon }}" aria-hidden="true"></span></a>
{{ else }}{{ end }}
{{ end }}
</div>
@@ -12,10 +12,16 @@
{{- $avatar := resources.Get (.Site.Params.avatar | default "images/avatar.png") -}}
{{- $style := resources.Get "styles/main.scss" | resources.ExecuteAsTemplate "styles/main-rendered.scss" . | resources.ToCSS | resources.Minify -}}
{{- $customStyle := resources.Get (.Site.Params.customStyle | default "styles/custom.scss") | resources.ToCSS | resources.Minify -}}
{{- $fontAwesome := "https://use.fontawesome.com/releases/v5.8.1/css/all.css" -}}
{{- $fontAwesomeIntegrity := "sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" -}}
<!-- DNS Prefetch -->
<link href="//cdn.jsdelivr.net" rel="dns-prefetch">
<link href="//cdnjs.cloudflare.com" rel="dns-prefetch">
{{ with .Site.Params.fontAwesome }}
<link href="//use.fontawesome.com" rel="dns-prefetch">
{{ else }}
<link href="//at.alicdn.com" rel="dns-prefetch">
{{ end }}
<link href="//fonts.googleapis.com" rel="dns-prefetch">
<link href="//fonts.gstatic.com" rel="dns-prefetch">
{{ with .Site.DisqusShortname }}<link href="///disqus.com" rel="dns-prefetch">{{ end }}
@@ -116,6 +122,7 @@

<!-- Preload -->
<link rel="preload" href="{{ $style.RelPermalink }}" as="style">
<!-- FontAwesome is not preloaded because we use integrity and https://bugs.chromium.org/p/chromium/issues/detail?id=677022 -->
{{ with .Site.Params.customStyle }}<link rel="preload" href="{{ $customStyle.RelPermalink }}" as="style">{{ end }}
<link rel="preload" href="https://fonts.googleapis.com/css?family=Lobster" as="style">
<link rel="preload" href="{{ $avatar.RelPermalink }}" as="image">
@@ -128,6 +135,9 @@
}
</style>
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
{{ with .Site.Params.fontAwesome }}
<link rel="stylesheet" href="{{ $fontAwesome }}" {{ printf "integrity=%q" $fontAwesomeIntegrity | safeHTMLAttr }} crossorigin="anonymous">
{{ end }}
{{ with .Site.Params.customStyle }}<link rel="stylesheet" href="{{ $customStyle.RelPermalink }}">{{ end }}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">

@@ -32,210 +32,266 @@ <h2 class="offscreen">Main Menu</h2>
<nav class="social-menu collapsed">
<h2 class="offscreen">Social Networks</h2>
<ul class="social-list">
{{- $emailIcon := "icon icon-email" -}}
{{- $githubIcon := "icon icon-github" -}}
{{- $twitterIcon := "icon icon-twitter" -}}
{{- $facebookIcon := "icon icon-facebook" -}}
{{- $googleIcon := "icon icon-google" -}}
{{- $instagramIcon := "icon icon-instagram" -}}
{{- $youtubeIcon := "icon icon-youtube" -}}
{{- $vimeoIcon := "icon icon-vimeo" -}}
{{- $mediumIcon := "icon icon-medium" -}}
{{- $redditIcon := "icon icon-reddit" -}}
{{- $quoraIcon := "icon icon-quora" -}}
{{- $stackoverflowIcon := "icon icon-stackoverflow" -}}
{{- $npmIcon := "icon icon-npm" -}}
{{- $dribbbleIcon := "icon icon-dribbble" -}}
{{- $behanceIcon := "icon icon-behance" -}}
{{- $pinterestIcon := "icon icon-pinterest" -}}
{{- $jsfiddleIcon := "icon icon-jsfiddle" -}}
{{- $codepenIcon := "icon icon-codepen" -}}
{{- $codesandboxIcon := "icon icon-codesandbox" -}}
{{- $weiboIcon := "icon icon-weibo" -}}
{{- $wechatIcon := "icon icon-wechat" -}}
{{- $linkedinIcon := "icon icon-linkedin" -}}
{{- $zhihuIcon := "icon icon-zhihu" -}}
{{- $doubanIcon := "icon icon-douban" -}}
{{- $bilibiliIcon := "icon icon-bilibili" -}}
{{- $rssIcon := "icon icon-rss" -}}

{{- with .Site.Params.fontAwesome -}}
{{- $emailIcon = "fas fa-envelope" -}}
{{- $githubIcon = "fab fa-github" -}}
{{- $twitterIcon = "fab fa-twitter" -}}
{{- $facebookIcon = "fab fa-facebook" -}}
{{- $googleIcon = "fab fa-google-plus-g" -}}
{{- $instagramIcon = "fab fa-instagram" -}}
{{- $youtubeIcon = "fab fa-youtube" -}}
{{- $vimeoIcon = "fab fa-vimeo" -}}
{{- $mediumIcon = "fab fa-medium" -}}
{{- $redditIcon = "fab fa-reddit" -}}
{{- $quoraIcon = "fab fa-quora" -}}
{{- $stackoverflowIcon = "fab fa-stack-overflow" -}}
{{- $npmIcon = "fab fa-npm" -}}
{{- $dribbbleIcon = "fab fa-dribbble" -}}
{{- $behanceIcon = "fab fa-behance" -}}
{{- $pinterestIcon = "fab fa-pinterest" -}}
{{- $jsfiddleIcon = "fab fa-jsfiddle" -}}
{{- $codepenIcon = "fab fa-codepen" -}}
{{- $codesandboxIcon = "fas fa-code" -}}
{{- $weiboIcon = "fab fa-weibo" -}}
{{- $wechatIcon = "fab fa-weixin" -}}
{{- $linkedinIcon = "fab fa-linkedin" -}}
{{- $zhihuIcon = "fab fa-zhihu" -}}
{{- $doubanIcon = "fas fa-comment" -}}
{{- $bilibiliIcon = "fas fa-video" -}}
{{- $rssIcon = "fas fa-rss" -}}
{{- end -}}

{{- with .Site.Params.email -}}
<li class="social-item">
<a href="mailto:{{ . }}" title="Email" aria-label="Email">
<span class="icon icon-email" aria-hidden="true"></span>
<span class="{{ $emailIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.github -}}
<li class="social-item">
<a href="//github.com/{{ . }}" title="GitHub" aria-label="GitHub">
<span class="icon icon-github" aria-hidden="true"></span>
<span class="{{ $githubIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.twitter -}}
<li class="social-item">
<a href="//twitter.com/{{ . }}" title="Twitter" aria-label="Twitter">
<span class="icon icon-twitter" aria-hidden="true"></span>
<span class="{{ $twitterIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.facebook -}}
<li class="social-item">
<a href="//www.facebook.com/{{ . }}" title="Facebook" aria-label="Facebook">
<span class="icon icon-facebook" aria-hidden="true"></span>
<span class="{{ $facebookIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.google -}}
<li class="social-item">
<a href="//plus.google.com/{{ . }}" title="Google+" aria-label="Google+">
<span class="icon icon-google" aria-hidden="true"></span>
<span class="{{ $googleIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.instagram -}}
<li class="social-item">
<a href="//www.instagram.com/{{ . }}" title="Instagram" aria-label="Instagram">
<span class="icon icon-instagram" aria-hidden="true"></span>
<span class="{{ $instagramIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.youtube -}}
<li class="social-item">
<a href="//www.youtube.com/user/{{ . }}" title="YouTube" aria-label="YouTube">
<span class="icon icon-youtube" aria-hidden="true"></span>
<span class="{{ $youtubeIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.vimeo -}}
<li class="social-item">
<a href="//vimeo.com/{{ . }}" title="Vimeo" aria-label="Vimeo">
<span class="icon icon-vimeo" aria-hidden="true"></span>
<span class="{{ $vimeoIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.medium -}}
<li class="social-item">
<a href="//medium.com/@{{ . }}" title="Medium" aria-label="Medium">
<span class="icon icon-medium" aria-hidden="true"></span>
<span class="{{ $mediumIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.reddit -}}
<li class="social-item">
<a href="//www.reddit.com/user/{{ . }}" title="Reddit" aria-label="Reddit">
<span class="icon icon-reddit" aria-hidden="true"></span>
<span class="{{ $redditIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.quora -}}
<li class="social-item">
<a href="//www.quora.com/profile/{{ . }}" title="Quora" aria-label="Quora">
<span class="icon icon-quora" aria-hidden="true"></span>
<span class="{{ $quoraIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.stackoverflow -}}
<li class="social-item">
<a href="//stackoverflow.com/users/{{ . }}" title="stackOverflow" aria-label="stackOverflow">
<span class="icon icon-stackoverflow" aria-hidden="true"></span>
<span class="{{ $stackoverflowIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.npm -}}
<li class="social-item">
<a href="//www.npmjs.com/~{{ . }}" title="NPM" aria-label="NPM">
<span class="icon icon-npm" aria-hidden="true"></span>
<span class="{{ $npmIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.dribbble -}}
<li class="social-item">
<a href="//dribbble.com/{{ . }}" title="Dribbble" aria-label="Dribbble">
<span class="icon icon-dribbble" aria-hidden="true"></span>
<span class="{{ $dribbbleIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.behance -}}
<li class="social-item">
<a href="//www.behance.net/{{ . }}" title="Behance" aria-label="Behance">
<span class="icon icon-behance" aria-hidden="true"></span>
<span class="{{ $behanceIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.pinterest -}}
<li class="social-item">
<a href="//www.pinterest.com/{{ . }}" title="Pinterest" aria-label="Pinterest">
<span class="icon icon-pinterest" aria-hidden="true"></span>
<span class="{{ $pinterestIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.jsfiddle -}}
<li class="social-item">
<a href="//jsfiddle.net/user/{{ . }}" title="JSFiddle" aria-label="JSFiddle">
<span class="icon icon-jsfiddle" aria-hidden="true"></span>
<span class="{{ $jsfiddleIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.codepen -}}
<li class="social-item">
<a href="//codepen.io/{{ . }}" title="Codepen" aria-label="Codepen">
<span class="icon icon-codepen" aria-hidden="true"></span>
<span class="{{ $codepenIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.codesandbox -}}
<li class="social-item">
<a href="//codesandbox.io/u/{{ . }}" title="CodeSandbox" aria-label="CodeSandbox">
<span class="icon icon-codesandbox" aria-hidden="true"></span>
<span class="{{ $codesandboxIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.weibo -}}
<li class="social-item">
<a href="//weibo.com/{{ . }}" title="Weibo" aria-label="Weibo">
<span class="icon icon-weibo" aria-hidden="true"></span>
<span class="{{ $weiboIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.wechat -}}
<li class="social-item">
<a href="{{ $wechat.RelPermalink }}" title="Wechat" aria-label="Wechat">
<span class="icon icon-wechat" aria-hidden="true"></span>
<span class="{{ $wechatIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.linkedin -}}
<li class="social-item">
<a href="//www.linkedin.com/in/{{ . }}" title="Linkedin" aria-label="Linkedin">
<span class="icon icon-linkedin" aria-hidden="true"></span>
<span class="{{ $linkedinIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.zhihu -}}
<li class="social-item">
<a href="//www.zhihu.com/people/{{ . }}" title="Zhihu" aria-label="Zhihu">
<span class="icon icon-zhihu" aria-hidden="true"></span>
<span class="{{ $zhihuIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.douban -}}
<li class="social-item">
<a href="//www.douban.com/people/{{ . }}" title="Douban" aria-label="Douban">
<span class="icon icon-douban" aria-hidden="true"></span>
<span class="{{ $doubanIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.bilibili -}}
<li class="social-item">
<a href="//space.bilibili.com/{{ . }}" title="Bilibili" aria-label="Bilibili">
<span class="icon icon-bilibili" aria-hidden="true"></span>
<span class="{{ $bilibiliIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

{{- with .Site.Params.rss -}}
<li class="social-item">
<a rel="alternate" type="application/rss+xml" href="{{ . | relURL }}" title="RSS" aria-label="RSS">
<span class="icon icon-rss" aria-hidden="true"></span>
<span class="{{ $rssIcon }}" aria-hidden="true"></span>
</a>
</li>
{{- end -}}

0 comments on commit 6c13709

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