feat: add friend link page support using shortcode (hugo-extended version requried) #10
Conversation
…sion requried) it's common to add some friend links to our about page or seperate pages, so I add some shortcode to support this function and customized style
There was a problem hiding this comment.
Thanks for your PR! I've left some suggestions.
Also, could you add some examples into the exampleSite?
| .flink#article-container .friend-list-div > .friend-div a .friend-info, | ||
| .flink#article-container .friend-list-div > .friend-div a .friend-name { |
There was a problem hiding this comment.
This seems to assume that some container with class="flink" id="article-container" exists, but the website's template & the shortcode itself does not generate such a container. .friend-list-div also has the same issue. This design would make it hard for the users to use this shortcode correctly. We should create another shortcode that generates the container, which is similar to the nested shortcode here: https://gohugo.io/templates/shortcode-templates/#nested-shortcode-image-gallery.
| #article-container { | ||
| word-wrap: break-word; | ||
| overflow-wrap: break-word; | ||
| } | ||
|
|
||
| #article-container a { | ||
| color: #49b1f5; | ||
| } | ||
|
|
||
| #article-container a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| #article-container img { | ||
| margin: 0 auto 0.8rem; | ||
| } |
There was a problem hiding this comment.
Is article-container a good name for friend lists? You also have a flink class which seems to refer to the same container. Maybe we could just use a single friend-container class and refer to the container as div.friend-container? (Or choose some other appropriate names.)
Moreover, is it really necessary to have both the container and the friend-list-div or just 1 container would be enough for your use case?
| <a target="_blank" href={{ .Get "url" | safeURL }} title={{ .Get "name" }} > | ||
| <img class="lazyload" | ||
| src={{ $src | safeURL }} | ||
| data-src={{ $src | safeURL }} | ||
| alt={{ .Get "name" }} | ||
| data-sizes="auto" | ||
| data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x" /> | ||
| <span class="friend-name">{{ .Get "name" }}</span> | ||
| <span class="friend-info">{{ .Get "word" }}</span> |
There was a problem hiding this comment.
" should be added around these attribute values, e.g., href="{{ .Get "url" | safeURL }}".
| @@ -11,6 +11,8 @@ | |||
|
|
|||
| @import url("syntax.css"); | |||
|
|
|||
| @import url("friend.css"); | |||
There was a problem hiding this comment.
Instead of inserting this into the main css, you could insert it like this
hugo-theme-den/layouts/partials/head.html
Line 34 in f420b49
And add some checks to only include it when friend list shortcode is used: https://gohugo.io/templates/shortcode-templates/#checking-for-existence
|
OK, I'll do some revison according to all above suggestions and resubmit. Thank you! |
It's common to add some friend links to our about page or seperate pages, so I add some shortcode to
support this function and customized style.
The syntax is: