Skip to content

Commit

Permalink
Merge pull request #48 from Zebradil/master
Browse files Browse the repository at this point in the history
✨ Integrate hugo-easy-gallery and replace fancybox by photoswipe
  • Loading branch information
xianmin committed May 2, 2018
2 parents 9395455 + 4acec81 commit e346149
Show file tree
Hide file tree
Showing 27 changed files with 448 additions and 64 deletions.
3 changes: 2 additions & 1 deletion .gitignore
@@ -1,3 +1,4 @@
/node_modules/
/public/
/content/
/content/
env
4 changes: 1 addition & 3 deletions dev-config.toml
Expand Up @@ -132,7 +132,7 @@ defaultContentLanguage = "en" # Default language to use (if you setup multiling
# 一些全局开关,你也可以在每一篇内容的 front matter 中针对单篇内容关闭或开启某些功能,在 archetypes/default.md 查看更多信息。
# Some global options, you can also close or open something in front matter for a single post, see more information from `archetypes/default.md`.
toc = true # 是否开启目录
fancybox = true # see https://github.com/fancyapps/fancybox # 是否启用fancybox(图片可点击)
photoswipe = true # see https://github.com/dimsemenov/PhotoSwipe # 是否启用PhotoSwipe(图片可点击)
bootcdn = false # In china. @Deprecated: use [params.publicCDN] # 是否使用bootcdn(@Deprecated: 请使用[params.publicCDN])
mathjax = false # see https://www.mathjax.org/ # 是否使用mathjax(数学公式)

Expand All @@ -155,8 +155,6 @@ defaultContentLanguage = "en" # Default language to use (if you setup multiling
enable = false
jquery = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>'
slideout = '<script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>'
fancyboxJs = '<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>'
fancyboxCss = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">'

[params.reward] # 文章打赏
enable = false
Expand Down
4 changes: 1 addition & 3 deletions exampleSite/config.toml
Expand Up @@ -85,7 +85,7 @@ defaultContentLanguage = "en" # Default language to use
# 一些全局开关,你也可以在每一篇内容的 front matter 中针对单篇内容关闭或开启某些功能,在 archetypes/default.md 查看更多信息。
# Some global options, you can also close or open something in front matter for a single post, see more information from `archetypes/default.md`.
toc = true # 是否开启目录
fancybox = true # see https://github.com/fancyapps/fancybox # 是否启用fancybox(图片可点击)
photoswipe = true # see https://github.com/dimsemenov/PhotoSwipe # 是否启用PhotoSwipe(图片可点击)
bootcdn = false # In china. @Deprecated: use [params.publicCDN] # 是否使用bootcdn(@Deprecated: 请使用[params.publicCDN])
mathjax = false # see https://www.mathjax.org/ # 是否使用mathjax(数学公式)
contentCopyright = '<a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a>'
Expand All @@ -107,8 +107,6 @@ defaultContentLanguage = "en" # Default language to use
enable = false
jquery = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>'
slideout = '<script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>'
fancyboxJs = '<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>'
fancyboxCss = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">'
gitmentJS = '<script src="https://cdn.jsdelivr.net/npm/gitment@0.0.3/dist/gitment.browser.min.js" crossorigin="anonymous"></script>'
gitmentCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitment@0.0.3/style/default.min.css" crossorigin="anonymous">'

Expand Down
4 changes: 3 additions & 1 deletion layouts/_default/baseof.html
Expand Up @@ -12,7 +12,9 @@
</head>
<body>
{{ partial "slideout.html" . }}

{{ if or .Site.Params.photoswipe .Site.Params.fancybox }}
{{ partial "photoswipe.html" }}
{{ end }}
<header id="header" class="header container">
{{ partial "header.html" . }}
</header>
Expand Down
7 changes: 0 additions & 7 deletions layouts/partials/head.html
Expand Up @@ -74,13 +74,6 @@

<!-- Styles -->
<link href="{{ "dist/jane.min.css?v=2.7.0" | relURL }}" rel="stylesheet">
{{ if .Site.Params.bootcdn -}}
{{ if .Site.Params.fancybox }}<link href="https://cdn.bootcss.com/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet" crossorigin="anonymous">{{ end }}
{{- else if .Site.Params.publicCDN.enable -}}
{{ if .Site.Params.fancybox }}{{ .Site.Params.publicCDN.fancyboxCss | safeHTML }}{{ end }}
{{- else -}}
{{ if .Site.Params.fancybox }}<link href="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.css" | relURL }}" rel="stylesheet">{{ end }}
{{- end }}

<!-- custom css -->
{{ range .Site.Params.customCSS }}
Expand Down
75 changes: 75 additions & 0 deletions layouts/partials/photoswipe.html
@@ -0,0 +1,75 @@
<!--
Put this file in /layouts/shortcodes/load-photoswipe.html
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
-->

<!--
*** jQuery must be loaded before load-photoswipe.js ***
- If your template already loads jQuery in the header then you don't need to load it again here.
- If your template already loads jQuery in the footer, then you could load load-photoswipe.js from the footer instead
-->
<!-- these files are loaded in the theme footer
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="/js/load-photoswipe.js"></script>
-->

<!-- Photoswipe css/js libraries -->
{{ if .Site.Params.bootcdn }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />
{{ else }}
<link rel="stylesheet" href="{{ "/lib/photoswipe/photoswipe.min.css" | relURL }}" />
<link rel="stylesheet" href="{{ "/lib/photoswipe/default-skin/default-skin.min.css" | relURL }}" />
{{ end }}
<!-- these files are loaded in the theme footer
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
-->

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element, as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
18 changes: 15 additions & 3 deletions layouts/partials/scripts.html
Expand Up @@ -2,15 +2,12 @@
{{ if .Site.Params.bootcdn -}}
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/slideout/1.0.1/slideout.min.js" crossorigin="anonymous"></script>
{{ if .Site.Params.fancybox }}<script type="text/javascript" src="https://cdn.bootcss.com/fancybox/3.1.20/jquery.fancybox.min.js" crossorigin="anonymous"></script>{{ end }}
{{- else if .Site.Params.publicCDN.enable -}}
{{ .Site.Params.publicCDN.jquery | safeHTML }}
{{ .Site.Params.publicCDN.slideout | safeHTML }}
{{ if .Site.Params.fancybox }}{{ .Site.Params.publicCDN.fancyboxJs | safeHTML }}{{ end }}
{{- else -}}
<script type="text/javascript" src="{{ "lib/jquery/jquery-3.2.1.min.js" | relURL }}"></script>
<script type="text/javascript" src="{{ "lib/slideout/slideout-1.0.1.min.js" | relURL }}"></script>
{{ if .Site.Params.fancybox }}<script type="text/javascript" src="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.js" | relURL }}"></script>{{ end }}
{{- end }}
<script type="text/javascript" src="{{ "dist/jane.min.js?v=2.7.0" | relURL }}"></script>

Expand Down Expand Up @@ -69,6 +66,21 @@
</script>
{{- end }}

<!-- Load PhotoSwipe js if the load-photoswipe shortcode has been used -->
{{ if or .Site.Params.photoswipe .Site.Params.fancybox }}
{{ if .Site.Params.bootcdn }}
<script src="{{ " /js/load-photoswipe.js " | relURL }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk="
crossorigin="anonymous"></script>
{{ else }}
<script type="text/javascript" src="{{ "/js/load-photoswipe.js" | relURL }}"></script>
<script type="text/javascript" src="{{ "/lib/photoswipe/photoswipe.min.js" | relURL}}"></script>
<script type="text/javascript" src="{{ "/lib/photoswipe/photoswipe-ui-default.min.js" | relURL}}"></script>
{{ end }}
{{ end }}

<!-- custom js -->
{{ range .Site.Params.customJS }}
<script src="{{ "/js/" | relURL }}{{ . }}"></script>
Expand Down
29 changes: 29 additions & 0 deletions layouts/shortcodes/figure.html
@@ -0,0 +1,29 @@
<!--
Put this file in /layouts/shortcodes/figure.html
NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
-->
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="{{ "/css/hugo-easy-gallery.css" | relURL }}" />{{ end }}
{{- $.Page.Scratch.Add "figurecount" 1 -}}
<!-- use either src or link-thumb for thumbnail image -->
{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<div class="img"{{ if .Parent }} style="background-image: url('{{ print .Site.BaseURL $thumb }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
<img itemprop="thumbnail" src="{{ $thumb }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
</div>
{{ with .Get "link" | default (.Get "src") }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
<figcaption>
{{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
{{- if or (.Get "caption") (.Get "attr")}}
<p>
{{- .Get "caption" -}}
{{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
</p>
{{- end }}
</figcaption>
{{- end }}
</figure>
</div>
41 changes: 41 additions & 0 deletions layouts/shortcodes/gallery.html
@@ -0,0 +1,41 @@
<!--
Put this file in /layouts/shortcodes/gallery.html
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
-->
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />{{ end }}
{{- $.Page.Scratch.Add "figurecount" 1 }}
{{ $baseURL := .Site.BaseURL }}
<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
{{- with (.Get "dir") -}}
<!-- If a directory was specified, generate figures for all of the images in the directory -->
{{- $files := readDir (print "/static/" .) }}
{{- range $files -}}
<!-- skip files that aren't images, or that inlcude the thumb suffix in their name -->
{{- $thumbext := $.Get "thumb" | default "-thumb" }}
{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }}<!-- is the current file an image? -->
{{- if and $isimg (not $isthumb) }}
{{- $caption := .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
{{- $linkURL := print $baseURL ($.Get "dir") "/" .Name | absURL }}<!-- absolute URL to hi-res image -->
{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? -->
{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
<div class="box">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
<img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
</div>
<figcaption>
<p>{{ $caption }}</p>
</figcaption>
<a href="{{ $linkURL }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
</figure>
</div>
{{- end }}
{{- end }}
{{- else -}}
<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
{{ .Inner }}
{{- end }}
</div>
15 changes: 8 additions & 7 deletions src/css/_partial/_post/_content.scss
Expand Up @@ -35,10 +35,6 @@
&:hover {
border-bottom: $content-link-border;
}

&.fancybox {
border: 0;
}
}

blockquote {
Expand Down Expand Up @@ -73,9 +69,10 @@
}
}

img {
display: inline-block;
max-width: 100%;
iframe {
margin: 0 auto;
display: block;
width: 100%;
}

> table {
Expand Down Expand Up @@ -136,6 +133,10 @@
}

figure {
a:hover{
border: 0;
}

&.center {
text-align: center;
}
Expand Down
18 changes: 0 additions & 18 deletions src/js/fancybox.js

This file was deleted.

4 changes: 1 addition & 3 deletions src/js/main.js
Expand Up @@ -5,7 +5,6 @@ import mobileNavbar from './mobileNavbar';
import toc from './toc';
import headerAnchor from './headerAnchor';
import fnTooltip from './footnoteTooltip';
import fancybox from './fancybox';
import highlight from './highlight';


Expand All @@ -15,7 +14,6 @@ $(document).ready(function () {
toc();
headerAnchor();
fnTooltip();
fancybox();
})
});

highlight();

0 comments on commit e346149

Please sign in to comment.