节选卡片组件 源代码

组件页面


/*
===================================
节选卡片组件 
===================================
*/
 
:root {
    --excerpts-padding: 0.5rem;
    --excerpts-padding-opt: -0.6rem;
    --excborder-wrap-width: 3px;
    --excborder-mid-width: 3px;
    --excborder-title-width: 3px;
    --excerpts-bgcolor: transparent;
    --excerpts-text: #333;
    --excerpts-link: inherit;
    --excerpts-wrap-margin: inherit;
    /* 受关注旗帜 */
    --excerpts-interest-txsize: 1rem;
    --excerpts-interest-size: 1.5rem;
    --excerpts-interest-mobsize: 1.5rem;
    --excerpts-delta-size: 0 0.8rem 0.4rem 0.8rem;
    --excerpts-delta-mobsize: 0 0.8rem 0.4rem 0.8rem;
    --excerpts-interest-left: 2rem;
    --excerpts-interest-mobleft: 1rem;
    --excerpts-interest-right: inherit;
    --excerpts-interest-mobright: inherit;
    /* 蓝底黄字*/
    --excerpts-interest-txcolor: orange;
    --excerpts-interest-bgcolor: #161648;
    --excerpts-interest-ddcolor: orange;
    /*
  红色黄心,大旗子靠右
     --excerpts-interest-txsize:2rem;
    --excerpts-interest-size:3rem;
    --excerpts-interest-mobsize:1.5rem;
    --excerpts-delta-size:0rem 1.5rem 1.5rem 1.5rem;
    --excerpts-delta-mobsize:0 0.8rem 0.4rem 0.8rem;
    --excerpts-interest-right:1.5rem;
    --excerpts-interest-mobright:90%;
  */
}
 
/**/
 
.excerpts-wrap {
    display: flex;
    flex-wrap: nowrap;
    padding: var(--excerpts-padding);
    border: 3px double #999;
    border-color: var(--excborder-wrap-color);
    border-width: var(--excborder-wrap-width);
    background-color: var(--excerpts-bgcolor);
    color: var(--excerpts-text);
    margin: var(--excerpts-wrap-margin);
}
 
.excerpts-wrap a,
.excerpts-wrap a:visited {
    color: var(--excerpts-link);
}
 
.excerpts-author .excerpts-cell-1 span:last-child{
    display: none;
}
 
/* 选项 */
.excerpts-wrap[class*="trans"] .excerpts-author .excerpts-cell-1 span:first-child,
.excerpts-wrap[class*="noauthor"] .excerpts-author,
.excerpts-wrap[class*="norate"] .excerpts-rate,
.excerpts-wrap[class*="nocomn"] .excerpts-comment,
.excerpts-wrap[class*="nocomment"] .excerpts-comment,
.excerpts-wrap[class*="notags"] .excerpts-tags {
    display: none;
}
 
.excerpts-wrap[class*="trans"] .excerpts-author .excerpts-cell-1 span:last-child,
.excerpts-wrap[class*="trans"] .excerpts-trans {
    display: contents;
}
 
/* 选填选项,不填写时不显示,替代上文选项  */
 
.excerpts-wrap .excerpts-chapter[style*="{$"], 
.excerpts-wrap .excerpts-author[style*="{$"],  
.excerpts-wrap .excerpts-rate[style*="{$"],
.excerpts-wrap .excerpts-comment[style*="{$"],
.excerpts-wrap .excerpts-tags[style*="{$"],
.excerpts-wrap .excerpts-trans[style*="{$"]{
    display:none;
}
 
.excerpts-wrap .excerpts-interest:not([style*="{$"]){
    display:block;
}
 
/* 左侧内容 */
 
.excerpts-left {
    padding: 0 0.6rem;
    border-right: 3px double #999;
    border-color: var(--excborder-mid-color);
    border-width: var(--excborder-mid-width);
}
 
.excerpts-left div {
    display: block;
}
 
.excerpts-left .excerpts-tt p {
    padding: 0;
    margin: 0.4rem 0;
}
 
.excerpts-left .excerpts-tt {
    font-size: 150%;
    text-align: center;
    border-bottom: 3px double #999;
    border-color: var(--excborder-title-color);
    border-width: var(--excborder-title-width);
}
 
.excerpts-excerpts {
    min-height: 5rem;
}
 
/* 右侧信息表格 */
 
.excerpts-right {
    padding: 0.5rem;
    min-width: 20%;
    width: 30%;
}
 
.excerpts-right table {
    border-collapse: collapse;
    border: none;
}
 
.excerpts-cell p {
    font-weight: bolder;
}
 
.excerpts-wrap {
    display: flex;
}
 
.excerpts-left {
    min-width: 56%;
    width: 70%;
}
 
.excerpts-cell-2,
.excerpts-cell-1 {
    text-align: left;
    vertical-align: top;
}
 
.excerpts-cell-1 {
    word-break: keep-all;
    white-space: nowrap;
    min-width: 3rem;
}
 
.excerpts-wrap td {
    padding-top: 0.8rem;
    height: auto;
}
 
.excerpts-wrap td.excerpts-cell-2 {
    padding-top: 0.6rem;
    position: relative;
    word-break: break-word;
}
 
/* 防止断行 */
 
.excerpts-wrap td strong:before {
    content: ' ';
    /*! font-size: 0.5rem; */
    color: transparent;
    padding-right: 0.2rem;
}
 
/* 关注  */
 
.excerpts-interest {
    position: absolute;
    left: var(--excerpts-interest-left);
    right: var(--excerpts-interest-right);
    width: var(--excerpts-interest-size);
    margin-top: var(--excerpts-padding-opt);
    z-index: 0;
    filter: drop-shadow(0px 0px 1px var(--excerpts-interest-ddcolor)) drop-shadow(0px 0px 1px var(--excerpts-interest-ddcolor)) drop-shadow(0px 0px 1px var(--excerpts-interest-ddcolor)) drop-shadow(0px 0px 0px var(--excerpts-interest-ddcolor));
    display: none;
    user-select: none;
    overflow: hidden;
}
 
.excerpts-interest-border {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--excerpts-delta-size) var(--excerpts-delta-topsize) var(--excerpts-delta-size);
    border-width: var(--excerpts-delta-size);
    border-color: var(--excerpts-interest-bgcolor) var(--excerpts-interest-bgcolor) transparent var(--excerpts-interest-bgcolor);
}
 
.excerpts-interest-text {
    background-color: var(--excerpts-interest-bgcolor);
}
 
.excerpts-interest p {
    margin-top: 0rem;
    text-align: center;
    padding: 0 0 0.3rem 0;
    margin: 0;
    color: var(--excerpts-interest-txcolor);
    font-size: var(--excerpts-interest-txsize);
}
 
.excerpts-interest.nicejob {
    display: block;
}
 
/* 移动关注标签特效  */
 
.excerpts-left+.excerpts-right+.excerpts-interest div:first-child,
.excerpts-right+.excerpts-interest div:first-child {
    transition: all 0.5s;
}
 
.excerpts-left:hover+.excerpts-right+.excerpts-interest div:first-child,
.excerpts-right:hover+.excerpts-interest div:first-child {
    margin-top: -5rem;
    transition: all 0.5s;
}
 
.excerpts-interest {
    transition: opacity 0.5s;
}
 
.excerpts-interest:hover {
    opacity: 0;
    transition: opacity 0.5s;
}
 
/* 移动端换行 */
 
.excerpts-wrap sub {
    font-size: inherit;
    display: contents;
}
 
/* ------------------手机格式---------------------------  */
 
@media (max-width: 800px) {
    .excerpts-interest {
        right: 1rem;
    }
}
 
@media (max-width: 600px) {
    .excerpts-wrap tbody td {
        display: inline-block;
    }
}
 
@media (max-width: 757px) {
    .excerpts-wrap {
        flex-wrap: wrap;
    }
    .excerpts-right {
        min-width: 100%;
        padding: 0rem;
    }
    .excerpts-left {
        min-width: 100%;
        border: none;
        border-bottom: 3px double #999;
        padding: 0.5rem 0rem;
    }
    .excerpts-cell-2,
    .excerpts-cell-1 {
        /*! min-width:4rem; */
    }
    .excerpts-cell-1 {
        min-width: 4rem;
    }
    .excerpts-wrap tbody {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
    }
    .excerpts-wrap tbody tr {
        width: 50%;
        /*! display: inline-flex; */
    }
    .excerpts-interest {
        right: var(--excerpts-interest-mobright);
        left: var(--excerpts-interest-mobleft);
        width: var(--excerpts-interest-mobsize);
    }
    .excerpts-interest-border {
        border-width: var(--excerpts-delta-mobsize);
    }
    .excerpts-interest p {
        font-size: 1rem;
        padding: 0 0 0.2rem 0;
    }
    .excerpts-wrap sub {
        font-size: inherit;
        display: block;
    }
    /*.excerpts-cell-2 {
        text-align: right;
    }*/
    .excerpts-wrap[class*="trans"] .excerpts-author .excerpts-cell-1 span:last-child,
    .excerpts-wrap[class*="trans"] .excerpts-trans {
        display: block;
        text-align: right;
    }
}

怎么用:

先引用这个:

[[include :semimonth:component:excerpts-source]]

然后这样:

[[include :semimonth:component:excerpts-tool
|link= 文章链接
|title= 文章标题
|text= 文本,如欲分行或加链接,请在文字后添加两个@,中间空一格,再用两个@括住。
像这样。以下代码需要填入相应内容时才会显示栏目:
|author= 作者
|translater= 翻译者
|rate= 评分,使用下标代码,,(+-),,框住好评坏评使之能在窄屏下另起一行。
|comment= 评论
|chapter= 第x章,总x章 - 或 - 1/10 章节数
|tags= 标签
|interesting-thing=★ 受关注文章旗帜内文
|option= 特定选项1
]]

效果如下:

文本,如欲分行或加链接,请在文字后添加两个@,中间空一格,再用两个个@括住。
[http://www.example.com 用这种链接]像这样
断句

KO:🇰🇷 JP:🇯🇵 TH:🇹🇭 FR:🇫🇷
DE:🇩🇪 IT:🇮🇹 ES:🇪🇸 PT:🇵🇹
PL: 🇵🇱 RU:🇷🇺 UA:🇺🇦 其它:🇺🇳

创作者:原作者: 作者
翻译者: {$translater}
总评分: 评分
章节数: {$chapter}
评论数: 评论
关键词: 标签

测试

{$text}

创作者:原作者: {$author}
翻译者: {$translater}
总评分: {$rate}
章节数: 1/10
评论数: {$comment}
关键词: cccc

{$interesting-thing}

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License