分类： 互联网技能日志

自定义页脚

<div id=”flyfish” class=”fly-fish” height=”200″></div>
<script src=”https://discuss.flarum.org.cn/fish.js”></script>

css

/* 修改鼠标经过主题的颜色 */
.DiscussionListItem:hover{
background-color:#a5e9cb;
}

/* 跳动标题 */
.Hero-title {
animation: my-face 5s infinite ease-in-out;
display: inline-block;
margin: 0 5px;
}

@keyframes my-face {
2% {
transform: translate(0,1.5px) rotate(1.5deg);
}

4% {
transform: translate(0,-1.5px) rotate(-0.5deg);
}

6% {
transform: translate(0,1.5px) rotate(-1.5deg);
}

8% {
transform: translate(0,-1.5px) rotate(-1.5deg);
}

10% {
transform: translate(0,2.5px) rotate(1.5deg);
}

12% {
transform: translate(0,-0.5px) rotate(1.5deg);
}

14% {
transform: translate(0,-1.5px) rotate(1.5deg);
}

16% {
transform: translate(0,-0.5px) rotate(-1.5deg);
}

18% {
transform: translate(0,0.5px) rotate(-1.5deg);
}

20% {
transform: translate(0,-1.5px) rotate(2.5deg);
}

22% {
transform: translate(0,0.5px) rotate(-1.5deg);
}

24% {
transform: translate(0,1.5px) rotate(1.5deg);
}

26% {
transform: translate(0,0.5px) rotate(0.5deg);
}

28% {
transform: translate(0,0.5px) rotate(1.5deg);
}

30% {
transform: translate(0,-0.5px) rotate(2.5deg);
}

32% {
transform: translate(0,1.5px) rotate(-0.5deg);
}

34% {
transform: translate(0,1.5px) rotate(-0.5deg);
}

36% {
transform: translate(0,-1.5px) rotate(2.5deg);
}

38% {
transform: translate(0,1.5px) rotate(-1.5deg);
}

40% {
transform: translate(0,-0.5px) rotate(2.5deg);
}

42% {
transform: translate(0,2.5px) rotate(-1.5deg);
}

44% {
transform: translate(0,1.5px) rotate(0.5deg);
}

46% {
transform: translate(0,-1.5px) rotate(2.5deg);
}

48% {
transform: translate(0,-0.5px) rotate(0.5deg);
}

50% {
transform: translate(0,0.5px) rotate(0.5deg);
}

52% {
transform: translate(0,2.5px) rotate(2.5deg);
}

54% {
transform: translate(0,-1.5px) rotate(1.5deg);
}

56% {
transform: translate(0,2.5px) rotate(2.5deg);
}

58% {
transform: translate(0,0.5px) rotate(2.5deg);
}

60% {
transform: translate(0,2.5px) rotate(2.5deg);
}

62% {
transform: translate(0,-0.5px) rotate(2.5deg);
}

64% {
transform: translate(0,-0.5px) rotate(1.5deg);
}

66% {
transform: translate(0,1.5px) rotate(-0.5deg);
}

68% {
transform: translate(0,-1.5px) rotate(-0.5deg);
}

70% {
transform: translate(0,1.5px) rotate(0.5deg);
}

72% {
transform: translate(0,2.5px) rotate(1.5deg);
}

74% {
transform: translate(0,-0.5px) rotate(0.5deg);
}

76% {
transform: translate(0,-0.5px) rotate(2.5deg);
}

78% {
transform: translate(0,-0.5px) rotate(1.5deg);
}

80% {
transform: translate(0,1.5px) rotate(1.5deg);
}

82% {
transform: translate(0,-0.5px) rotate(0.5deg);
}

84% {
transform: translate(0,1.5px) rotate(2.5deg);
}

86% {
transform: translate(0,-1.5px) rotate(-1.5deg);
}

88% {
transform: translate(0,-0.5px) rotate(2.5deg);
}

90% {
transform: translate(0,2.5px) rotate(-0.5deg);
}

92% {
transform: translate(0,0.5px) rotate(-0.5deg);
}

94% {
transform: translate(0,2.5px) rotate(0.5deg);
}

96% {
transform: translate(0,-0.5px) rotate(1.5deg);
}

98% {
transform: translate(0,-1.5px) rotate(-0.5deg);
}

0%,100% {
transform: translate(0,0) rotate(0deg);
}
}
/* 不要在全部标签页上展示竖排、信息流广告，以及在线用户、论坛统计 */
.TagsPage .item-forumStatisticsWidget {
display: none !important;
}

@media screen and (max-width: 600px) {
.item-forumStatisticsWidget {
display: none;
}
}

body {
background-image: linear-gradient(135deg, rgba(186, 186, 186, 0.03) 0%, rgba(186, 186, 186, 0.03) 10%,rgba(133, 133, 133, 0.03) 10%, rgba(133, 133, 133, 0.03) 14%,rgba(38, 38, 38, 0.03) 14%, rgba(38, 38, 38, 0.03) 17%,rgba(93, 93, 93, 0.03) 17%, rgba(93, 93, 93, 0.03) 25%,rgba(80, 80, 80, 0.03) 25%, rgba(80, 80, 80, 0.03) 45%,rgba(239, 239, 239, 0.03) 45%, rgba(239, 239, 239, 0.03) 100%),linear-gradient(135deg, rgba(236, 236, 236, 0.03) 0%, rgba(236, 236, 236, 0.03) 47%,rgba(182, 182, 182, 0.03) 47%, rgba(182, 182, 182, 0.03) 63%,rgba(223, 223, 223, 0.03) 63%, rgba(223, 223, 223, 0.03) 81%,rgba(86, 86, 86, 0.03) 81%, rgba(86, 86, 86, 0.03) 89%,rgba(23, 23, 23, 0.03) 89%, rgba(23, 23, 23, 0.03) 90%,rgba(226, 226, 226, 0.03) 90%, rgba(226, 226, 226, 0.03) 100%),linear-gradient(45deg, rgba(52, 52, 52, 0.03) 0%, rgba(52, 52, 52, 0.03) 31%,rgba(246, 246, 246, 0.03) 31%, rgba(246, 246, 246, 0.03) 63%,rgba(188, 188, 188, 0.03) 63%, rgba(188, 188, 188, 0.03) 71%,rgba(15, 15, 15, 0.03) 71%, rgba(15, 15, 15, 0.03) 87%,rgba(127, 127, 127, 0.03) 87%, rgba(127, 127, 127, 0.03) 93%,rgba(234, 234, 234, 0.03) 93%, rgba(234, 234, 234, 0.03) 100%),linear-gradient(90deg, #ffffff,#ffffff);
.CommentPost.Post–by-actor {
// This sets the left border to be the same color as the forum primary.
border-left: solid @config-primary-color;
}

.Hero {

}
/* 卡片主题 */
.IndexPage .DiscussionListItem,
.UserPage .DiscussionListItem,
.DiscussionPage-discussion .DiscussionListItem {
}

@media (min-width: 991px) {
.IndexPage .DiscussionList-discussions>li:not(:first-child) .DiscussionListItem:hover {

}
}

@media (min-width: 768px) {
/* pc 端 */
.IndexPage .DiscussionListItem-content,
.UserPage .DiscussionListItem-content,
.DiscussionPage-discussion .DiscussionListItem-content {
/* 首页、用户页、讨论页卡片大小、描边 */
padding-left: 80px;
padding-right: 80px;
padding-top: 10px;
border-radius: 8px;
padding-bottom: 10px;
border: 1px solid #dbdfe6!important;
}

.IndexPage .Post.CommentPost,
.UserPage .Post.CommentPost,
.DiscussionPage-discussion .Post.CommentPost {
margin-top: 20px;
border-radius: 8px;
border: 1px solid #dbdfe6 !important;
}

.IndexPage .DiscussionListItem-info>.item-tags,
.UserPage .DiscussionListItem-info>.item-tags {
top: 23px !important;
}

.DiscussionListItem {
position: relative;
margin-right: 0;
padding-right: 0;
padding-left: 0;
margin-left: 0;
border-radius: 8px;
margin-top: 15px;
}
}

@media (min-width: 768px) {
.IndexPage .DiscussionListItem:hover {
background-color: #fff;
-webkit-box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.1) !important;
box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.1) !important;
}
}
/* banner */
.WelcomeHero {
color:none;
}

.Hero h2 {
font-size: 25px;
font-weight: 700;
}

.Hero {
box-shadow: 0px 1px 10px 0 rgba(151,158,181,0.28);
background-color: none;
margin-bottom: 15px;
}
/*.DiscussionHero .TagsLabel .TagLabel { color:none; }*/
.WelcomeHero .Hero-subtitle {
color: #000;
}
}

雪山样式
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:@config-primary-color;cursor:pointor}
::-webkit-scrollbar-track{background:#ededed}
.DiscussionListItem-content{padding-left:10px}
.IndexPage .DiscussionListItem-info>.item-tags,.UserPage .DiscussionListItem-info>.item-tags{position:initial!important;-webkit-mask-image:none!important}
span.TagLabel-text i{display:none}
.DiscussionListItem-info .item-terminalPost{float:right;position:relative;top:-23px}
.DiscussionListItem-controls{right:14px}
.DiscussionListItem-author .Avatar,.PostUser-avatar{display:none}
.DiscussionPage-list .DiscussionListItem-content{padding-left:20px}
.DiscussionPage-list .DiscussionListItem-badges .Badge,.DiscussionPage-list .DiscussionListItem-controls .Dropdown-toggle,.DiscussionPage-list .DiscussionListItem-info .item-terminalPost,.EventPost-icon{display:none}
.TagLabel{font-size:85%;font-weight:600;display:inline-block;padding:0 4px!important;color:#45556e;margin-right:5px;border-radius:4px!important}
.Hero{background:url(https://i.loli.net/2020/10/30/kZKjWpA2wqIPSiH.jpg) right 757px;text-align:left;border-bottom:2px solid #45556e}
.DiscussionPage .Hero{height:auto}
.Hero h2{font-size:28px;word-wrap:break-word;color:#333;font-weight:600;margin:0;word-break:break-all}
.DiscussionHero-items li.item-tags{padding-bottom:10px;padding-top:20px}
.DiscussionHero .item-title{margin:0!important}
.DiscussionPage .Hero .container{padding-top:0!important}
.Hero .container{padding-top:30px;padding-bottom:13px}
.Hero-close{display:none}
.DiscussionHero–colored,.DiscussionHero–colored a{color:@config-primary-color!important}
.Hero h2 .username{color:#fff}
.Hero-subtitle{color:#333}
.containerNarrow{float:left}
.UserPage .PostsUserPage-discussion a{font-style:normal;font-size:18px;background:#fff;margin-left:-20px}
.UserPage .Post{padding:0;margin:0}
.UserPage .PostsUserPage-list .Post{padding-top:0}
.PostStream{margin-top:20px}
.PostsUserPage aside.Post-actions{display:none}
.Post:after,.Post:before{display:none!important}
.Post{padding-left:20px}
.PostStream-timeGap{font-weight:800;padding:20px 0 20px 0;font-size:13px}
.PostUser-badges{position:initial}
.PostUser-badges{display:block!important;float:left;position:relative;margin-left:10px;margin-right:15px;margin-top:-3px;width:auto;max-width:60px}
.Post-body blockquote{background:#fff2ae;border:0;color:#ad6c00}
.Post-body code{background:#484848;color:#f7f7f7;padding:3px}
.Post-body pre{padding:15px;background:#f5f9fd;color:#3b4a61;font-size:80%;border-radius:0;overflow-wrap:break-word;border-left:2px solid #45556e}
.IndexPage-nav .item-newDiscussion .Button{width:100px}
.App-header,.App-header a{font-weight:600}
.App.affix.App–user .PostUser-badges,.IndexPage .Badge{display:none!important}
article.EventPost.DiscussionTaggedPost{height:60px!important}
@media (max-width:767px){.PostStream-timeGap{margin:0}
.Slidable .Slidable-content{border-bottom:1px solid #e0e0e0}
.DiscussionListItem-info .item-terminalPost{float:none!important;position:inherit!important}
.DiscussionListItem-badges .Badge,.PostUser-badges{display:none!important}
body when (@config-dark-mode = true){.Slidable .Slidable-content{border-bottom:1px solid #242629}}}
@media (min-width:992px){.sideNav,.sideNav>ul{width:115px!important}}
.TagsPage .sideNav>ul>li:first-child{width:auto!important}
li.item-link1 button.Dropdown-toggle.Button.Button–icon.Button–link {margin-left: -7px;z-index: 999}

/隐藏博客没有用户登录提示没有权限/
.AlertManager{
visibility: hidden;
padding: 0;
height: 0;
}

/* 主题加横杠 */
.DiscussionListItem.DiscussionListItem–sticky:nth-child(n){border-bottom: 2px double #722c29;}

/* 横幅公告居中显示 */
.Afrux-NewsWidget-icon{display:none}
.Afrux-NewsWidget-content{justify-content:center}
.Afrux-NewsWidget-line-container{justify-items:center}

可以用css改(自定义样式里添加)
可能第一个对移动端不什么友好

/*修改绕过标签内容*/
.TagDiscussionModal-controls .Button-label{
visibility: hidden;
}
.TagDiscussionModal-controls .Button-label::after{
visibility: initial;
position: absolute;
right: 0;
left: -62%;
content: “绕过标签”;
}

/*隐藏绕过标签*/
.TagDiscussionModal-controls{
visibility: hidden;
padding: 0;
height: 0;
}

安装

使用 composer 安装:

composer require ecnu-im/sticky-sidenav

升级

composer update ecnu-im/sticky-sidenav
php flarum migrate
php flarum cache:clear

/* 跳动标题 */
.Hero-title {
    animation: my-face 5s infinite ease-in-out;
    display: inline-block;
    margin: 0 5px;
}

@keyframes my-face {
    2% {
        transform: translate(0,1.5px) rotate(1.5deg);
    }

    4% {
        transform: translate(0,-1.5px) rotate(-0.5deg);
    }

    6% {
        transform: translate(0,1.5px) rotate(-1.5deg);
    }

    8% {
        transform: translate(0,-1.5px) rotate(-1.5deg);
    }

    10% {
        transform: translate(0,2.5px) rotate(1.5deg);
    }

    12% {
        transform: translate(0,-0.5px) rotate(1.5deg);
    }

    14% {
        transform: translate(0,-1.5px) rotate(1.5deg);
    }

    16% {
        transform: translate(0,-0.5px) rotate(-1.5deg);
    }

    18% {
        transform: translate(0,0.5px) rotate(-1.5deg);
    }

    20% {
        transform: translate(0,-1.5px) rotate(2.5deg);
    }

    22% {
        transform: translate(0,0.5px) rotate(-1.5deg);
    }

    24% {
        transform: translate(0,1.5px) rotate(1.5deg);
    }

    26% {
        transform: translate(0,0.5px) rotate(0.5deg);
    }

    28% {
        transform: translate(0,0.5px) rotate(1.5deg);
    }

    30% {
        transform: translate(0,-0.5px) rotate(2.5deg);
    }

    32% {
        transform: translate(0,1.5px) rotate(-0.5deg);
    }

    34% {
        transform: translate(0,1.5px) rotate(-0.5deg);
    }

    36% {
        transform: translate(0,-1.5px) rotate(2.5deg);
    }

    38% {
        transform: translate(0,1.5px) rotate(-1.5deg);
    }

    40% {
        transform: translate(0,-0.5px) rotate(2.5deg);
    }

    42% {
        transform: translate(0,2.5px) rotate(-1.5deg);
    }

    44% {
        transform: translate(0,1.5px) rotate(0.5deg);
    }

    46% {
        transform: translate(0,-1.5px) rotate(2.5deg);
    }

    48% {
        transform: translate(0,-0.5px) rotate(0.5deg);
    }

    50% {
        transform: translate(0,0.5px) rotate(0.5deg);
    }

    52% {
        transform: translate(0,2.5px) rotate(2.5deg);
    }

    54% {
        transform: translate(0,-1.5px) rotate(1.5deg);
    }

    56% {
        transform: translate(0,2.5px) rotate(2.5deg);
    }

    58% {
        transform: translate(0,0.5px) rotate(2.5deg);
    }

    60% {
        transform: translate(0,2.5px) rotate(2.5deg);
    }

    62% {
        transform: translate(0,-0.5px) rotate(2.5deg);
    }

    64% {
        transform: translate(0,-0.5px) rotate(1.5deg);
    }

    66% {
        transform: translate(0,1.5px) rotate(-0.5deg);
    }

    68% {
        transform: translate(0,-1.5px) rotate(-0.5deg);
    }

    70% {
        transform: translate(0,1.5px) rotate(0.5deg);
    }

    72% {
        transform: translate(0,2.5px) rotate(1.5deg);
    }

    74% {
        transform: translate(0,-0.5px) rotate(0.5deg);
    }

    76% {
        transform: translate(0,-0.5px) rotate(2.5deg);
    }

    78% {
        transform: translate(0,-0.5px) rotate(1.5deg);
    }

    80% {
        transform: translate(0,1.5px) rotate(1.5deg);
    }

    82% {
        transform: translate(0,-0.5px) rotate(0.5deg);
    }

    84% {
        transform: translate(0,1.5px) rotate(2.5deg);
    }

    86% {
        transform: translate(0,-1.5px) rotate(-1.5deg);
    }

    88% {
        transform: translate(0,-0.5px) rotate(2.5deg);
    }

    90% {
        transform: translate(0,2.5px) rotate(-0.5deg);
    }

    92% {
        transform: translate(0,0.5px) rotate(-0.5deg);
    }

    94% {
        transform: translate(0,2.5px) rotate(0.5deg);
    }

    96% {
        transform: translate(0,-0.5px) rotate(1.5deg);
    }

    98% {
        transform: translate(0,-1.5px) rotate(-0.5deg);
    }

    0%,100% {
        transform: translate(0,0) rotate(0deg);
    }
}




.Hero {
  }
/* 卡片主题 */
.IndexPage .DiscussionListItem,
.UserPage .DiscussionListItem,
.DiscussionPage-discussion .DiscussionListItem {
    transition: all 0.1s;
 /* 动画时间 */;
}

@media (min-width: 991px) {
    .IndexPage .DiscussionList-discussions>li:not(:first-child) .DiscussionListItem:hover {
 /* 悬浮效果 */
        transform: scale(1.01);
 /* 缩放 */;
    }
}

html给图片设置链接的方法：首先创建一个HTML示例文件；然后通过img标签创建一张图片；最后通过“<a href=”url”><img src=”…”></a>”语法给图片设置链接即可。

文本加颜色<font color=”red”>亲，您好！这是一个淘宝企业店铺的购买渠道，如果您有需求，请点击</font>

文本超链接： <a href=”https://www.php.cn/”>文本超链接</a>

增加“标签|文体”图片
利用 https://img.shields.io 进行获取显示

<img src=”https://img.shields.io/github/v/release/flarum/core?&label=最新版本&color=f9725c&style=flat-square” style=”vertical-align: middle;position: relative;bottom: 1px;” alt=”最新版本” title=”Flarum 最新版本” >

<img src=”https://img.shields.io/github/release-date/flarum/core?label=&style=flat-square” style=”vertical-align: middle;position: relative;bottom: 1px;” alt=”发布日期” title=”发布日期”>

<img src=”https://img.shields.io/badge/%E6%9C%8D%E5%8A%A1QQ-171%200297%20026-blue” >

 

通知

<div style=”color:#FF0000″>【用友U8+】相对于U8+V13.0，更加推荐使用U8+V16.0</div>