github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

侧边栏-添加通讯录

This commit is contained in:
1152958806@qq.com 2023-07-25 22:21:07 +08:00
parent 6206983850
commit e4886a7b49
4 changed files with 204 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
settings.yaml
View File

@ -427,7 +427,7 @@ spec:
- $formkit: group
name: widgetss
label: 侧边栏内容
help: 目前提供的小部件有：profile（站点资料）, wechat（微信）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&归档&统计）。你可以随意组合或排序，以逗号隔开。
help: 目前提供的小部件有：profile（站点资料）, wechat（微信）,friend-link（通讯录）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&归档&统计）。你可以随意组合或排序，以逗号隔开。
value:
indexWidgets:
postWidgets:

136
templates/assets/zhheo/custom.css
View File

@ -54,4 +54,140 @@ ul li {
/* 通讯录 */
:root {
--card-friend-class-desc-bgcolor: #e7e7e7;
--card-friend-name-color: #000;
--card-friend-item-hover: var(--text-bg-hover);
--card-friend-descr-color: #797979
}
[data-theme=dark] {
--card-friend-class-desc-bgcolor: #111;
--card-friend-name-color: #fff;
--card-friend-item-hover: var(--text-bg-hover);
--card-friend-descr-color: #797979
}
.card-widget.card-friend-link {
padding: 0.4rem 0.6rem !important;
}
.card-widget.card-friend-link .card-friend-link-container {
max-height: 460px;
overflow: scroll
}
.card-widget.card-friend-link .card-friend-link-container::-webkit-scrollbar {
display: none
}
.card-widget.card-friend-link summary.card-friend-class-desc {
padding: 0 15px
}
.card-widget.card-friend-link details.card-friend-class-name[open] summary.card-friend-class-desc {
position: sticky;
top: 0;
background: var(--card-friend-class-desc-bgcolor);
z-index: 1
}
.card-widget.card-friend-link a.card-friend-item {
padding: 0 15px;
height: 60px;
width: auto;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-lines: single;
-moz-box-lines: single;
-o-box-lines: single;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap
}
.card-widget.card-friend-link a.card-friend-item:hover {
background-color: var(--heo-main);
border-radius: 12px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.card-widget.card-friend-link img.card-friend-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 10px 10px
}
.card-widget.card-friend-link .offline-friend-link img.card-friend-avatar {
filter: grayscale(100%)
}
.card-widget.card-friend-link .card-friend-details {
width: auto;
height: 60px;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-lines: single;
-moz-box-lines: single;
-o-box-lines: single;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: start;
-moz-box-align: start;
-o-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start
}
.card-widget.card-friend-link .card-friend-name {
color: var(--card-friend-name-color)
}
.card-widget.card-friend-link .card-friend-descr {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
width: 14em;
color: var(--card-friend-descr-color)
}
/* 通讯录 */

30
templates/assets/zhheo/zhheoblog.css
View File

@ -11456,7 +11456,7 @@ span.post-meta-position {
}
/* 文章details折叠 */
details:not(.tk-admin-config-group) {
details:not(.tk-admin-config-group):not(.card-friend-class-name) {
display: block;
position: relative;
margin-bottom: 1rem;
@ -11467,11 +11467,11 @@ details:not(.tk-admin-config-group) {
transition: border 0.3s;
}
details:not(.tk-admin-config-group):hover {
details:not(.tk-admin-config-group):not(.card-friend-class-name):hover {
border: var(--style-border-hover-always);
}
details:not(.tk-admin-config-group) summary {
details:not(.tk-admin-config-group):not(.card-friend-class-name) summary {
position: absolute;
padding: 0.5rem 1rem;
background: var(--heo-card-bg);
@ -11487,21 +11487,21 @@ details:not(.tk-admin-config-group) summary {
text-overflow: ellipsis; /* 超出部分用省略号表示 */
}
details:not(.tk-admin-config-group) > *:nth-child(2) {
details:not(.tk-admin-config-group):not(.card-friend-class-name) > *:nth-child(2) {
margin-top: calc(54px + 1rem) !important;
}
details[open]:not(.tk-admin-config-group) summary {
details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) summary {
background: var(--heo-main);
color: var(--heo-white);
}
details:not(.tk-admin-config-group) summary::before {
details:not(.tk-admin-config-group):not(.card-friend-class-name) summary::before {
content: '';
padding: 4px;
}
details:not(.tk-admin-config-group) summary:hover {
details:not(.tk-admin-config-group):not(.card-friend-class-name) summary:hover {
cursor: pointer;
background: var(--heo-main);
color: var(--heo-white);
@ -11509,31 +11509,31 @@ details:not(.tk-admin-config-group) summary:hover {
box-shadow: var(--heo-shadow-main);
}
details:not(.tk-admin-config-group) summary:focus {
details:not(.tk-admin-config-group):not(.card-friend-class-name) summary:focus {
outline: none;
}
details:not(.tk-admin-config-group) summary::marker {
details:not(.tk-admin-config-group):not(.card-friend-class-name) summary::marker {
color: var(--heo-main);
transition: 0.3s;
}
details[open]:not(.tk-admin-config-group) summary::marker {
details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) summary::marker {
color: var(--heo-white);
}
details:not(.tk-admin-config-group) summary:hover::marker {
details:not(.tk-admin-config-group):not(.card-friend-class-name) summary:hover::marker {
color: var(--heo-white);
}
details[open]:not(.tk-admin-config-group) {
details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) {
border-radius: 12px;
border: var(--style-border-hover-always);
padding: 0 1.5rem;
background: var(--heo-card-bg);
}
details:not(.tk-admin-config-group) summary:hover:after {
details:not(.tk-admin-config-group):not(.card-friend-class-name) summary:hover:after {
position: absolute;
content: '+';
text-align: center;
@ -11543,12 +11543,12 @@ details:not(.tk-admin-config-group) summary:hover:after {
line-height: 1;
}
details[open]:not(.tk-admin-config-group) > summary:hover:after {
details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) > summary:hover:after {
content: '-';
}
@media screen and (max-width: 768px) {
details[open]:not(.tk-admin-config-group) {
details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) {
padding: 0 16px;
}
}

52
templates/modules/widgets/aside/friend-link.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 最新评论 -->
<div class="card-widget card-friend-link" th:fragment="friend-link">
<div class="item-headline"><i class="haofont hao-icon-tongxunlu07"
style="font-size: 0.9rem;font-weight: 700;"></i><span>通讯录</span></div>
<div class="card-friend-link-container"
th:if="${pluginFinder.available('PluginLinks')}"
th:with="groups = ${linkFinder.groupBy()}">
<th:block th:each="group,iterStat : ${groups}">
<details th:if="${group.spec.displayStyle != 'deprecated' && not #lists.isEmpty(group.spec.displayStyle)}"
class="card-friend-class-name">
<summary class="card-friend-class-desc" th:title="${group.spec.description}">
<sapn>[[${group.spec.displayName}]]</sapn>
<sapn>[[${group.links.size}]]</sapn>
</summary>
<a th:each="link : ${group.links}"
class="card-friend-item online-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
target="_blank"><img class="no-lightbox card-friend-avatar"
th:src="${link.spec.logo}"
th:alt="${link.spec.displayName}">
<div class="card-friend-details">
<div class="card-friend-name">[[${link.spec.displayName}]]</div>
<div class="card-friend-descr" >[[${link.spec.description}]]</div>
</div>
</a>
</details>
<details th:if="${#strings.equals(group.spec.displayStyle,'deprecated') && not #lists.isEmpty(group.spec.displayStyle)}"
class="card-friend-class-name">
<summary class="card-friend-class-desc" th:title="${group.spec.description}">
<sapn>[[${group.spec.displayName}]]</sapn>
<sapn>[[${group.links.size}]]</sapn>
</summary>
<a th:each="link : ${group.links}"
class="card-friend-item offline-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
target="_blank"><img class="no-lightbox card-friend-avatar entered loaded"
th:src="${link.spec.logo}"
th:alt="${link.spec.displayName}">
<div class="card-friend-details">
<div class="card-friend-name">[[${link.spec.displayName}]]</div>
<div class="card-friend-descr" >[[${link.spec.description}]]</div>
</div>
</a>
</details>
</th:block>
</div>
</div>
</html>