导航和底部与首页相同
blog.html
<div class="m-container-small m-padded-tb-big">
<div class="ui container">
<div class="ui top attached segment">
<div class="ui horizontal link list">
<div class="item">
<img src="https://i.picsum.photos/id/1014/6016/4000.jpg" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">方一帆a>div>
div>
<div class="item">
<i class="calendar icon">i>2020-02-04
div>
<div class="item">
<i class="eye icon">i>3412
div>
div>
div>
<div class="ui attached segment">
<img src="https://i.picsum.photos/id/1014/800/450.jpg" alt="" class="ui rounded image">
div>
<div class="ui attached padded segment">
<div class="ui right aligned basic segment">
<div class="ui orange basic label">原创div>
div>
<h2 class="ui center aligned header">关于刻意练习的清单h2>
<div id="content" class="m-padded-lr-big-responsive m-padded-tb-large">
文章内容
div>
<div class="m-padded-lr-big-responsive">
<div class="ui basic teal left pointing label"> 方法论 div>
div>
<div class="ui center aligned basic segment">
<button id="payButton" class="ui orange basic circular button">赞赏button>
div>
<div class="ui payQR flowing popup transition hidden">
<div class="ui orange basic label">
<div class="ui images" style="font-size: inherit !important;">
<div class="image">
<img src="./static/images/WeChat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
<div>支付宝div>
div>
<div class="image">
<img src="./static/images/WeChat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
<div>微信div>
div>
div>
div>
div>
div>
<div class="ui attached positive message">
<div class="ui middle aligned grid">
<div class="eleven wide column">
<ui class="list">
<li>作者:方一帆(联系作者)li>
<li>发表时间:2020-01-09 10:55li>
<li>版权声明:自由转载-非商用-非衍生-保持署名li>
<li>公众号转载:请在文末添加作者公众号二维码li>
ui>
div>
<div class="five wide column">
<img src="./static/images/WeChat.jpg" alt="" class="ui right floated rounded bordered image" style="width: 110px">
div>
div>
div>
<div class="ui bottom attached segment">
<div class="ui teal segment">
<div class="ui comments">
<h3 class="ui dividing header">Commentsh3>
<div class="comment">
<a class="avatar">
<img src="https://i.picsum.photos/id/1014/6016/4000.jpg">
a>
<div class="content">
<a class="author">Matta>
<div class="metadata">
<span class="date">Today at 5:42PMspan>
div>
<div class="text">
How artistic!
div>
<div class="actions">
<a class="reply">Replya>
div>
div>
div>
<div class="comment">
<a class="avatar">
<img src="https://i.picsum.photos/id/1014/6016/4000.jpg">
a>
<div class="content">
<a class="author">Elliot Fua>
<div class="metadata">
<span class="date">Yesterday at 12:30AMspan>
div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!p>
div>
<div class="actions">
<a class="reply">Replya>
div>
div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="https://i.picsum.photos/id/1014/6016/4000.jpg">
a>
<div class="content">
<a class="author">Jenny Hessa>
<div class="metadata">
<span class="date">Just nowspan>
div>
<div class="text">
Elliot you are always so right :)
div>
<div class="actions">
<a class="reply">Replya>
div>
div>
div>
div>
div>
<div class="comment">
<a class="avatar">
<img src="https://i.picsum.photos/id/1014/6016/4000.jpg">
a>
<div class="content">
<a class="author">Joe Hendersona>
<div class="metadata">
<span class="date">5 days agospan>
div>
<div class="text">
Dude, this is awesome. Thanks so much
div>
<div class="actions">
<a class="reply">Replya>
div>
div>
div>
div>
div>
<div class="ui form">
<div class="field">
<textarea name="content" placeholder="请输入评论信息...">textarea>
div>
<div class="fields">
<div class="field m-mobile-wide m-margin-bottom-small">
<div class="ui left icon input">
<i class="user icon">i>
<input type="text" name="nickname" placeholder="姓名">
div>
div>
<div class="field m-mobile-wide m-margin-bottom-small">
<div class="ui left icon input">
<i class="mail icon">i>
<input type="text" name="email" placeholder="邮箱">
div>
div>
<div class="field m-mobile-wide m-margin-bottom-small">
<button class="ui teal button m-mobile-wide"><i class="edit icon">i>发布button>
div>
div>
div>
div>
div>
div>
<script>
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide')
})
$('#payButton').popup( {
popup:$('.payQR.popup'),
on:'click',
position:'bottom center'
})
script>