diff --git a/README.md b/README.md index 15a59a8..14dd7da 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -

Hugo 主题 Moments | Demo

+

Hugo 主题 Moments | Demo


-Moments是一款专门为短博文设计的Hugo主题（插入链接）。开发初衷是在微信朋友圈之外做一个纯粹写给自己的，独立的短文/动态空间，去记录生活点滴，个人思绪，发现与想法。后面发现Moments的使用对象不仅仅可以是自己，还可以是一群人，你可以为是朋友、团队，亦或情侣搭建一个专有的Moments空间。 +Moments是一款专门为短博文设计的[Hugo](https://gohugo.io/)主题。开发初衷是在微信朋友圈之外做一个纯粹写给自己的，独立的短文/动态空间，去记录生活点滴，个人思绪，发现与想法。后面发现Moments的使用对象不仅仅可以是自己，还可以是一群人，你可以为是朋友、团队，亦或情侣搭建一个专有的Moments空间。 Moments is a hugo theme designed for micro-blogging. The original intention is to create a personal space for sharing daily life, thoughts, discoveries & ideas, outside Wechat. Later on, it came to my mind that Moments can be a sharing space not only for a single individual, but also for friends, teams or even couples. diff --git a/assets/style-refractored.scss b/assets/style-refractored.scss new file mode 100644 index 0000000..73d0dd9 --- /dev/null +++ b/assets/style-refractored.scss @@ -0,0 +1,338 @@ +// helper class & functional class +.center{ + display: flex; + justify-content: center; +} + +// style for main framework +body{ + background-color: #f5f5f5; +} + +.pure-g [class*=pure-u]{ + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important; + font-weight: normal; + font-size: 16px; + line-height: 24px; + color: rgb(33, 37, 41); +} + +.page{ + max-width: 1150px; + margin: auto; + background-color: white; +} + +.container{ + max-width: 760px; + margin: auto; +} + +.moment-content{ + position: relative; +} + +.moment-row{ + margin-bottom: 20px; +} + +@media (min-width:1150px) { + .page{ + margin-top: 50px; + } +} + +@media (max-width: 720px) { + .moment-row{ + margin-bottom: 20px; + } + + .container{ + padding-left: 10px; + padding-right: 10px; + } +} + +p{ + margin-top: 0; +} + +/* START - top cover part */ +.jumbotron{ + padding-top: 64px; + background-position: center; + background-size: cover; + min-height: 200px; + text-align: center; + margin-bottom: 30px; + + .site-title{ + color: rgb(108, 117, 125); + font-size: 56px; + font-weight: 300; + margin-bottom: 20px; + } + + .signature{ + color: rgba(0, 0, 0, 0.5); + font-size: 20px; + font-weight: 300; + } +} +/* END - top cover part */ + +/* START - pagination */ +// todo replace this part +$dark-blue: #21365c; +$blue: #3A6bA5; +$gray: #919EB1; + +.pagination{ + display: flex; + margin-top: 20px; + margin-bottom: 30px; + + .page-item{ + padding-left: 15px; + padding-right: 15px; + padding-top: 10px; + padding-bottom: 10px; + + &.active{ + background-color: $blue; + color: #ffffff; + } + + &.disabled{ + color: $gray; + } + } + + a{ + color: $dark-blue; + text-decoration: none; + } + + .page-link .page-item:hover{ + background-color: #f5f5f5; + } +} +/* END - pagination */ + + +/* START - time */ +.time{ + text-align: right; + padding-right: 60px; + /* white-space: nowrap; */ + font-weight: 300; + margin-bottom: 20px; + + .month-day{ + font-size: 24px; + margin-bottom: 10px; + } + + .year{ + font-size: 16px; + } +} +@media (max-width: 576px){ + .time{ + text-align: center; + padding-right: 15px; + } +} +@media (max-width: 720px) and (min-width:576px){ + .time{ + padding-right: 20px; + } +} +/* END - time */ + + +/* START - user name, avatar & tags */ +.user-info{ + display: flex; + + .avatar{ + max-height: 45px; + float: left; + margin-bottom: 10px; + } + + .intro{ + float: left; + padding-left: 5px; + + .name{ + color:#186D9C!important; + margin-bottom: 0; + line-height: 1.1; + font-size: 24px; + } + + .tag{ + font-size: 80%; + margin-left: 0px; + margin-right: 10px; + color: #6c757d!important; + + &::before{ + content:"#"; + padding-right: 1px; + } + } + } +} +/* END - user name, avatar & tags */ + + +/* START - for the main content */ +.context{ + clear: left; + margin-bottom: 10px; +} + +.single-pic{ + max-width: 65%; + max-height: 250px; + padding-bottom:10px; + margin-top: 5px; +} + +// pic set +.pic-grid{ + max-width: 80%; + + .img-container{ + padding-top: 50%; + padding-bottom: 50%; + position: relative; + height: 0px; + } + + img{ + object-fit: cover; + height: 100%; + width: 100%; + position: absolute; + top: 0 + } + + .add-padding{ + padding: 2.5px; + } +} + +/* for links */ +.share-link-block{ + padding-bottom:10px; + padding-top:10px; + margin-bottom:10px; + background: #f7f7f7; + + .link-table{ + margin-left: 10%; + max-width: 80%; + } + + .link-logo{ + max-width: 50px; + max-height: 50px; + } + + a{ + color:#17a2b8; + word-wrap: break-word; + text-decoration: none; + } +} + +.bilibili-video { + position: relative; + max-width: 85%; + height: 0; + padding-bottom: 45%; + margin-bottom: 10px; + + iframe { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + } +} + +// for the note info +.moment-note{ + display: flex; + margin-bottom: 10px; + justify-content: space-between; + margin-right: 5px; + color:#808080; + + .note{ + font-size: 80%; + text-indent: 20px; + color: rgba(0, 0, 0, 0.5); + + margin-top: 0; + margin-bottom: 0; + } +} + +// hr +hr { + margin-top: 20px; + border-width: 0; + border-top: 1px solid; + border-color: rgba(0, 0, 0, 0.1); + max-width: 75%; + clear: both +} +/* END - for the main content */ + + +/* START - footer*/ +.footer { + padding-top: 20px; + padding-bottom: 30px; + background-color: #f5f5f5; + + color: #6c757d !important; + text-align: center; + font-size: 95%; + + a{ + text-decoration: underline !important; + color:#6c757d !important; + } +} +/* END - footer*/ + + +/* back-to-top button */ +#back-top-button { + display: none; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + + border: none; + outline: none; + + background-color: #d1d1d1; /* Set a background color */ + color: #2157ad; /* Text color */ + + opacity: 0.85; + + cursor: pointer; /* Add a mouse pointer on hover */ + + padding: 12px; + border-radius: 10px; + font-size: 20px; +} + diff --git a/layouts/_default/list.html b/layouts/_default/list.html index ecacd75..de60b94 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -12,11 +12,11 @@ {{ $paginator := .Paginate ((where $.Site.RegularPages "Section" .Section ).ByParam "top") }} {{ if $paginator.HasPrev }}
  • - Previous + < Prev
    • {{ else }}
  • - Previous + < Prev
    • {{ end }} @@ -31,11 +31,11 @@ {{ if $paginator.HasNext }}
  • - Next + Next >
    • {{ else }}
  • - Next + Next >
    • {{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 08f7148..afea4e7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -11,12 +11,11 @@ {{ define "pagination" }} {{ $paginator := .Paginate ((where .Site.RegularPages "Section" "moments").ByParam "top") }} {{ if $paginator.HasPrev }} - - -
    Previous
    -     + +
    < Prev
    +     {{ else }} -
    Previous
    +
    < Prev
    {{ end }} {{ $current_num := $paginator.PageNumber }} @@ -29,10 +28,10 @@ {{end}} {{ if $paginator.HasNext }} - -
    Next
    -     + +
    Next >
    +     {{ else }} -
    Next
    +
    Next >
    {{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/after-content-js.html b/layouts/partials/after-content-js.html index 85fba90..211ec72 100644 --- a/layouts/partials/after-content-js.html +++ b/layouts/partials/after-content-js.html @@ -13,3 +13,37 @@ + +{{/* a pangu support */}} +{{ if .Site.Params.features.pangu }} + + +{{ end }} + + +{{/* back-top- button */}} + + + diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 4a0b838..6196c21 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,13 +1,15 @@ - +*/}} - + - + @@ -31,7 +33,8 @@ - +{{ $style := resources.Get "style-refractored.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }} + @@ -41,5 +44,12 @@ +{{/* pangu support: js in the end before the body closing tag */}} +{{ if .Site.Params.features.pangu }} + + +{{ end }} + -{{ .Site.Params.title }} \ No newline at end of file +{{ .Site.Params.title }} + diff --git a/layouts/partials/link-block.html b/layouts/partials/link-block.html index ae86e25..f16c601 100644 --- a/layouts/partials/link-block.html +++ b/layouts/partials/link-block.html @@ -1,25 +1,57 @@ +{{/* BEGIN parse the input parameter */}} +{{/* PART 1 default link */}} +{{ $resource_type := "link" }} + {{ $logo_file := "default_link_logo.png" }} +{{/* 1.1 Wechat articles */}} {{ if eq 1 (len (findRE `(https?://)?mp\.weixin\.qq\.com([-a-zA-Z0-9()@:%\+.~#?&/=_]*)` .a)) }} {{ $logo_file = "wechat.png"}} {{ end }} +{{/* 1.2 Bilibili webpage */}} {{ if eq 1 (len (findRE `(https?://)?(www\.)?bilibili\.com/video/([-a-zA-Z0-9()@:%\+.~#?&/=_]*)` .a)) }} {{ $logo_file = "bilibili.png"}} {{ end }} +{{/* 1.3 github repo */}} {{ if eq 1 (len (findRE `(https?://)?(www\.)?github\.com([-a-zA-Z0-9()@:%\+.~#?&/=_]*)` .a)) }} {{ $logo_file = "github.png"}} {{ end }} +{{/* 1.4.1 zhihu answers */}} {{ if eq 1 (len (findRE `(https?://)?(www\.)?zhihu\.com/question/([0-9]*)/answer/[0-9]*` .a)) }} {{ $logo_file = "zhihu.svg"}} {{ end }} +{{/* 1.4.2 zhihu articles */}} {{ if eq 1 (len (findRE `(https?://)?zhuanlan\.zhihu\.com/p/([0-9]*)` .a)) }} {{ $logo_file = "zhihu.svg"}} {{ end }} +{{/* PART 2 other link type */}} +{{/* 2.1 netease music */}} +{{ $netease_music_song_id := "0" }} +{{ if eq 1 (len (findRE `(https?://)?music\.163\.com/song\?id=([0-9]*)([-a-zA-Z0-9()@:%\+.~#?&/=_]*)` .a)) }} + {{ $resource_type = "netease_music" }} + {{ $netease_music_song_id = replaceRE `(https?://)?music\.163\.com/song\?id=([0-9]*)([-a-zA-Z0-9()@:%\+.~#?&/=_]*)` "$2" .a }} +{{ end }} + +{{/* 2.2 bilibili video */}} +{{ $bilibili_video_url := "0" }} +{{ if eq 1 (len (findRE `(https?://)?player\.bilibili\.com/player\.html.*` .a)) }} + {{ $resource_type = "bilibili_video" }} + {{ $bilibili_video_url = .a }} +{{ end }} + +{{ if eq 1 (len (findRE `` .a)) }} + {{ $resource_type = "bilibili_video" }} + {{ $bilibili_video_url = replaceRE `` "$1" .a }} +{{ end }} + +{{/* BEGIN generate output */}} +{{/* PART 1 default link */}} +{{ if eq "link" $resource_type }}
    @@ -32,8 +64,23 @@ {{ end }}
    - {{.word}} + {{.word}}
    -
    \ No newline at end of file + +{{ end }} + +{{/* PART 2 other link type */}} +{{ if eq "netease_music" $resource_type}} + +{{ end }} + +{{ if eq "bilibili_video" $resource_type}} +
    + +
    +{{ end }} \ No newline at end of file diff --git a/layouts/partials/pic_set.html b/layouts/partials/pic_set.html index b4d66aa..ad8aedd 100644 --- a/layouts/partials/pic_set.html +++ b/layouts/partials/pic_set.html @@ -1,17 +1,19 @@ - {{ $num_per_row := 3}} {{ $max_width := 80}} {{ if or (eq (len .pic_set) 2) (eq (len .pic_set) 4)}} {{ $num_per_row = 2}} {{ $max_width = 53}} {{ end }} + +{{ $caption := .caption}} +
    {{ range $num, $a := .pic_set }}
    - + pictures
    diff --git a/layouts/partials/row.html b/layouts/partials/row.html index 752a025..f49d3e5 100644 --- a/layouts/partials/row.html +++ b/layouts/partials/row.html @@ -1,7 +1,8 @@
    - + + {{/* time info shown in the left (or above in small screens) */}}
    {{ .Date.Format "Jan 2"}}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22) @@ -10,23 +11,23 @@
    - + {{/* moment-main-content */}}
    - + {{/* top mark */}} {{ if gt .Params.top 0}}
    {{ end }} - + {{/* user info */}}
    +
    - + {{/* Main text content */}}
    {{ .Content }}
    - - - {{ with .Params.pic }} - Responsive image - {{ end }} - - - {{ $pic_set_filtered := slice}} - {{ with .Params.pic_set }} - {{ range . }} - {{ with . }} - {{ $pic_set_filtered = $pic_set_filtered | append . }} - {{ end }} - {{ end }} - {{ end }} - - {{ with $pic_set_filtered }} - {{ partial "pic_set.html" (dict "pic_set" .) }} - {{ end }} - - - {{ $pictures_set:= slice}} + {{/* add-on info 1: pictures */}} + {{/* new pictures API `pictures` (combine single & multiple pictures)*/}} + {{ $pictures_set := slice}} + {{ $picture_caption := .Plain}} {{ with .Params.pictures }} {{ range . }} {{ with . }} @@ -89,31 +73,54 @@ {{ if (eq (len $pictures_set) 1) }} {{ range $pictures_set }} - Responsive image + Responsive image {{ end }} {{ end }} {{ if (gt (len $pictures_set) 1)}} - {{ partial "pic_set.html" (dict "pic_set" $pictures_set) }} + {{ partial "pic_set.html" (dict "pic_set" $pictures_set "other" $.Site.BaseURL "caption" $picture_caption) }} {{ end }} - + {{/* Probably DEPRECATED in the future: single picture (old version API `pic`)*/}} + {{ with .Params.pic }} + Responsive image + {{ end }} + + {{/* Probably DEPRECATED in the future: multiple pictures (old version API `pic_set`) */}} + {{ $pic_set_filtered := slice}} + {{ with .Params.pic_set }} + {{ range . }} + {{ with . }} + {{ $pic_set_filtered = $pic_set_filtered | append . }} + {{ end }} + {{ end }} + {{ end }} + + {{ with $pic_set_filtered }} + {{ partial "pic_set.html" (dict "pic_set" . "caption" $picture_caption) }} + {{ end }} + + + {{/* add-on info 2: hyperlink to other resourse (e.g webpage, Netease music, Bilibili Video) */}} {{ $link_link := .Params.link }} {{ $link_logo := .Params.link_logo }} {{ $link_text := .Params.link_text }} {{ with .Params.link }} - {{ partial "link-block.html" (dict "logo" $link_logo "a" $link_link "word" $link_text "baseurl" - $.Site.BaseURL)}} + {{ partial "link-block.html" (dict "logo" $link_logo "a" $link_link "word" $link_text "baseurl" + $.Site.BaseURL)}} {{ end }} - + {{/* Note info shown below the main content */}}

    {{ .Date.Format "15:04" }} {{ .Params.note }}

    +
    -
    + +
    +
    diff --git a/static/css/style.css b/static/css/style.css deleted file mode 100644 index efcf995..0000000 --- a/static/css/style.css +++ /dev/null @@ -1,283 +0,0 @@ -/* 主框架 */ -body{ - background-color: #f5f5f5; -} - -.pure-g [class*=pure-u]{ - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important; - font-weight: normal; - font-size: 16px; - line-height: 24px; - color: rgb(33, 37, 41); -} - -p{ - margin-top: 0; -} - -/* START - top cover part */ -.jumbotron{ - padding-top: 64px; - background-position: center; - background-size: cover; - min-height: 200px; - text-align: center; - margin-bottom: 30px; -} - -.site-title{ - color: rgb(108, 117, 125); - font-size: 56px; - font-weight: 300; - margin-bottom: 20px; -} - -.signature{ - color: rgb(0, 0, 0, 0.5); - font-size: 20px; - font-weight: 300; -} - -/* END - top cover part */ - -/* START - pagination */ -.center{ - display: flex; - justify-content: center; -} - -.pagination{ - display: flex; - margin-top: 20px; - margin-bottom: 30px; -} - -.pagination a{ - color: #337cf6; - text-decoration: none; -} - -.page-item{ - border: #80808050; - border-style: solid; - border-width: 0.5px; - border-radius: 2%; - padding-left: 10px; - padding-right: 10px; - padding-top: 10px; - padding-bottom: 10px; -} - -.page-link .page-item:hover{ - background-color: #eaecef; - color: #2157ad; -} - -.page-item.active{ - background-color: #337cf6; - color: #ffffff; -} - -.page-item.disabled{ - color:rgb(108, 117, 125) -} -/* END - pagination */ - -.page{ - max-width: 1150px; - margin: auto; - background-color: white; -} - -@media (min-width:1150px) { - .page{ - margin-top: 50px; - } -} - -.container{ - max-width: 760px; - margin: auto; -} - -.moment-content { - position: relative; -} - -@media (max-width: 720px) { - .moment-row{ - margin-bottom: 20px; - } - - .container{ - padding-left: 10px; - padding-right: 10px; - } -} - -/* START - time */ -.time{ - text-align: right; - padding-right: 60px; - /* white-space: nowrap; */ - font-weight: 300; - margin-bottom: 20px; -} -@media (max-width: 576px){ - .time{ - text-align: center; - padding-right: 15px; - } -} -@media (max-width: 720px) and (min-width:576px){ - .time{ - padding-right: 20px; - } -} -.time .month-day{ - font-size: 24px; - margin-bottom: 10px; -} -.time .year{ - font-size: 16px; -} - -/* END - time */ - -/* 抬头 */ - -.user-info{ - display: flex; -} - -.avatar{ - max-height: 45px; - float: left; - margin-bottom: 10px; -} - -.intro{ - float: left; - padding-left: 5px; -} - -.name{ - color:#186D9C!important; - margin-bottom: 0; - line-height: 1.1; - font-size: 24px; -} - -.tag::before{ - content:"#"; - padding-right: 1px; -} -.tag{ - font-size: 80%; - margin-left: 0px; - margin-right: 10px; - color: #6c757d!important; -} - -/* 正文 */ -.context{ - clear: left; - margin-bottom: 10px; -} - -/* 图片 */ -.single-pic{ - max-width: 65%; - max-height: 250px; - padding-bottom:10px; - margin-top: 5px; -} -/* 图片集 */ -.pic-grid{ - max-width: 80%; -} - -.pic-grid .img-container{ - padding-top: 50%; - padding-bottom: 50%; - position: relative; - height: 0px; -} - -.pic-grid img{ - object-fit: cover; - height: 100%; - width: 100%; - position: absolute; - top: 0 -} - -.pic-grid .add-padding{ - padding: 2.5px; -} - -/* 内容附带的超链接 */ -.share-link-block{ - padding-bottom:10px; - padding-top:10px; - margin-bottom:10px; - background: #f7f7f7; -} -.link-table{ - margin-left: 10%; - max-width: 80%; -} -.link-logo{ - max-width: 50px; - max-height: 50px; -} -.share-link-block a{ - color:#17a2b8; - word-wrap: break-word; - text-decoration: none; -} - -/* 附注信息 */ -.moment-note{ - display: flex; - margin-bottom: 10px; - justify-content: space-between; -} - -.moment-note .note{ - font-size: 80%; - text-indent: 20px; - color: rgb(0, 0, 0, 0.5); - - margin-top: 0; - margin-bottom: 0; -} - -.moment-note{ - margin-right: 5px; - color:#808080 -} - -/* hr */ -hr { - border-width: 0; - border-top: 1px solid; - border-color: rgb(0, 0, 0, 0.1); -} - -/* footer底注 */ -.footer { - padding-top: 20px; - padding-bottom: 30px; - background-color: #f5f5f5; - - color: #6c757d !important; - text-align: center; - font-size: 95%; -} - -.footer a{ - text-decoration: underline !important; - color:#6c757d !important; -} -