查看“模板:公众号”的源代码

<includeonly>
<div class="articalUnit">
<div class="containerBg">[[File:手机背景.png]]</div>
<div class="containerContent whiteScrollbar">
<div class="title">
======{{{标题}}} ======
</div>
<div class="publisher">
  <div class="publisher-header">{{{发布者头像}}}</div>
  <div class="publisher-name text">'''{{{发布者名称}}}'''</div>   
</div>  <!--end publisher-->
<div class="content">{{{正文内容}}} </div>
<div class="bottom-text MomentContent">
  <div>作者：{{{作者名称}}}</div><hr width="300px"/>
  <div style="display: flex;">⊙{{{浏览量}}}&nbsp;&nbsp;&nbsp;&nbsp;
    <div class="Show"  data-state="notlike">
      <div class="notlike">[[file:点赞1.png|20x20px|link=]]</div>
      <div class="like">[[file:点赞.png|20x20px|link=]]</div>
      <div class="LikeNumber" style="display:inline;">{{{点赞量}}}</div>
     </div>
  </div>
</div>  <!--end bottom-text-->
<!--精选留言，可传入对象-->
<div class="comments ">
  <div class="comment-title text">精选留言</div>
  <div class="comments-tab">{{{留言}}}</div>
</div>  <!--end comments-->
</div>  <!--end containerContent-->
</div>
</includeonly>
<noinclude>
== 公众号模板demo ==
1.图片资源：[[帮助/公众号]]<br><br>
2.使用参考
<pre>
{{公众号
|标题=《寻幽云山:云山古镇民俗文化节》
|发布者头像=[[File:公众号头像-吃喝玩乐在临空.png]]
|发布者名称=吃喝玩乐在临空
|正文内容=<p>走进云山古镇,一座座青砖黛瓦的亭台楼阁,一层层飞檐翘角,书不尽的浪漫辞赋，道不尽的巫神传说,便都一一在眼前展开。</p>[[File:公众号-寻幽云山.jpg]]<p>云山古镇位于临空市近郊,背倚青山西临清江,常年云雾缭绕,传统民居依山而建。纵横交错的街巷间,古老的庙祠馆阁与青山碧水相掩映,虽历经数千年风雨,至今依然完整保留着旧时的建筑风貌。时间变迁带走了它曾经的喧嚣,却留下了悠久灿烂的文化。</p><p>近日,云山古镇将举办民俗文化节，全方位还原古时人们节庆祈福的盛景。让我们一起穿越回数百年前,追随古人的步伐,探秘那些流淌在一石—木中涓涓不息的神秘传说,送自己一场回溯千年的梦吧！</p>
|作者名称=吃喝玩乐在临空
|浏览量=62837
|点赞量=38916
|留言={{留言|分割线=1|留言者头像=[[File:公众号头像-2.png]]|留言者名称=坐以待币|留言点赞数=276849|留言内容=这就是我想象中的古镇啊，萝卜蹲攻略和旅游搭子~}}
{{留言|分割线=1|留言者头像=[[File:公众号头像-13.png]]|留言者名称=一口一个小盆友|留言点赞数=22539|留言内容=小时候去过，被戴面具跳舞的演员吓得哇哇哭，这次我要吓回去！ ！}}
{{留言|留言者头像=[[File:公众号头像-7.png]]|留言者名称=云山诗雾|留言点赞数=18652|留言内容=欢迎大家来我的家乡游玩，绝对不虚此行哦！}}
{{留言|留言回复=1|分割线=1|留言者头像=[[File:公众号头像-24.png]]|留言者名称=卡皮巴拉拉巴皮卡|留言点赞数=11256|留言内容=楼上蹲旅游搭子的，带带我带带我--}}
}}
</pre>
效果展示：
{{公众号
|标题=《寻幽云山:云山古镇民俗文化节》
|发布者头像=[[File:公众号头像-吃喝玩乐在临空.png]]
|发布者名称=吃喝玩乐在临空
|正文内容=<p>走进云山古镇,一座座青砖黛瓦的亭台楼阁,一层层飞檐翘角,书不尽的浪漫辞赋，道不尽的巫神传说,便都一一在眼前展开。</p>[[File:公众号-寻幽云山.jpg]]<p>云山古镇位于临空市近郊,背倚青山西临清江,常年云雾缭绕,传统民居依山而建。纵横交错的街巷间,古老的庙祠馆阁与青山碧水相掩映,虽历经数千年风雨,至今依然完整保留着旧时的建筑风貌。时间变迁带走了它曾经的喧嚣,却留下了悠久灿烂的文化。</p><p>近日,云山古镇将举办民俗文化节，全方位还原古时人们节庆祈福的盛景。让我们一起穿越回数百年前,追随古人的步伐,探秘那些流淌在一石—木中涓涓不息的神秘传说,送自己一场回溯千年的梦吧！</p>
|作者名称=吃喝玩乐在临空
|浏览量=62837
|点赞量=38916
|留言={{留言|分割线=1|留言者头像=[[File:公众号头像-2.png]]|留言者名称=坐以待币|留言点赞数=276849|留言内容=这就是我想象中的古镇啊，萝卜蹲攻略和旅游搭子~}}
{{留言|分割线=1|留言者头像=[[File:公众号头像-13.png]]|留言者名称=一口一个小盆友|留言点赞数=22539|留言内容=小时候去过，被戴面具跳舞的演员吓得哇哇哭，这次我要吓回去！ ！}}
{{留言|留言者头像=[[File:公众号头像-7.png]]|留言者名称=云山诗雾|留言点赞数=18652|留言内容=欢迎大家来我的家乡游玩，绝对不虚此行哦！}}
{{留言|留言回复=1|分割线=1|留言者头像=[[File:公众号头像-24.png]]|留言者名称=卡皮巴拉拉巴皮卡|留言点赞数=11256|留言内容=楼上蹲旅游搭子的，带带我带带我--}}
}}
</noinclude>
{{通用CSS|滑动条=1}}
{{#css:
  .articalUnit{
    position: relative;
    height: 700px;
  }
  .articalUnit>.containerBg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height:710px;
    width:100%;
  }
  .articalUnit>.containerBg img{
    width:100%;
    height:100%;
    margin:0 auto;
    text-align:center;
  }
  .articalUnit>.containerContent{
    padding: 30px 0 0 30px;
    max-height: 700px;
    overflow-y: auto;
  }
  .articalUnit .title {
    background: radial-gradient(ellipse 50% 40% at 50% bottom, white, transparent);
    padding: 10px;
  }
  .articalUnit .title>h6>span{
    font-size:25px;
    font-family: SimSun;
    font-weight: bolder;
  }
  .articalUnit .text{
    font-family: SimSun;
   }
  .articalUnit .content{
    font-size: 18px;
    margin-bottom: 10px;
    padding-right: 10px;
  }
  .articalUnit .content *{
   margin-bottom: 15px;
  }
  .articalUnit .publisher {
    height: 40px;
    margin: 15px 0;
  }
  .articalUnit .publisher>.publisher-header {
   float: left;
   width: 40px;
  }
  .articalUnit .publisher>.publisher-header img{
    width: 35px;
    height: 35px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 15px 0 0;
  }
  .articalUnit .publisher>.publisher-name{
    font-size: 20px;
    color: #7a7a7a;
    height: 40px;
    line-height: 40px;
  }
  .articalUnit .bottom-text{
   font-size: 17px;
   color: #676a6e;
   margin: 10px 0;
  }
  .articalUnit .comments{
    background: linear-gradient(0, transparent 10%, rgb(255 255 255 / 75%) 90%);
    padding-bottom: 100px;
    margin-right: 10px;
  }
  .articalUnit .comments>.comment-title{
   height: 35px;
   line-height: 35px;
   text-align: center;
   font-size: 20px;
   font-weight: bold;
   color: #676a6e;
   background: linear-gradient(90deg, #cccdd3, transparent);
  }
  .articalUnit .comments>.comments-tab{
    padding: 20px;
  }
  .articalUnit .comments>.comments-tab>p {
    display: none;
  }
  .MomentContent .Show{text-align:right;color: #615c67;}
  .MomentContent .Show[data-state="like"]>.like{display: inline;}
  .MomentContent .Show[data-state="like"]>.notlike{display: none;}
  .MomentContent .Show[data-state="notlike"]>.like{display: none;}
  .MomentContent .Show[data-state="notlike"]>.notlike{display: inline;}
}
}}
{{#css:
<!-- 手机屏幕取消滚动条 -->
   @media screen and (max-width: 767px) {
    .articalUnit{
      height:fit-content;
    }
    .articalUnit>.containerContent {
      padding: 10px 0 0 10px;
      max-height: none;
      overflow-y: auto;
    }
    .articalUnit>.containerBg{
      height:100%; 
    }
  }
}}