Semantic UI 个人博客详情页开发

2024-01-14 22:00:40

博客详情页面（blog.html）

（1）导航页和页尾等信息保持不变，只需改动中间信息即可

（2）中间区域分为五个部分，分别为：头部、图片区域、博客内容、博客信息、留言区域。除过博客信息区域，其余的均使用 segment 组件，博客信息区域使用 message 组件，并且给每个组件均加上 attached ，让其拼接在一起

<div class="ui top attached segment">头部</div>
<div class="ui attached segment">图片区域</div>
<div class="ui attached segment">内容</div>
<div class="ui attached message">博客信息</div>
<div class="ui attached segment">留言区域</div>

效果如下：

可以发现区域过宽，给上层容器添加自定义 css 样式，命名为 my-container-small：

.my-container-small {    max-width: 60em !important;    margin: auto !important;}

头部区域：和首页的样式一样，包括图标、发布日期、浏览量三部分，直接copy首页写就行

<!-- 头部 -->
<div class="ui top attached segment">
    <div class="ui horizontal link list">
        <idv class="item">
            <img src="static/images/index-image/001.png" alt="" width="100"
                 height="100" class="ui avatar image">
            <div class="content"><a href="#" class="header">杨宇航</a></div>
        </idv>
        <div class="item">
            <i class="calendar icon"></i> 2020-03-08
        </div>
        <div class="item">
            <i class="eye icon"></i> 5214
        </div>
    </div>

图像区域：很简单，直接创建一个 ui segment 的容器，里面加入 img即可：

<!-- 图片区域 -->
<div class="ui attached segment">
    <img src="static/images/index-image/003.png" alt="" class="ui rounded image">
</div>

博客内容：该区域先用 ui segment创建一个容器，里面包含一个 label，使用 ringht aligned使容器靠右，在使用 basic使去除边线

关于内容使用 ui center aligned header使标题居中显示。内容先使用 p标签定义，以后会用第三方组件进行处理

<!-- 内容 -->
<div class="ui attached padded segment">
    <div class="ui right aligned basic segment">
        <div class="ui orange label basic">原创</div>
    </div>
    <h2 class="ui center aligned header">XXXXXXX</h2>
    <br>
    <div id="content" class="my-padded-lr my-padded-tb-tiny">
        ...
        ...
        ...
    </div>
</div>

定义博客标签：使用 label即可实现

<!-- 标签 -->
<div class="my-padded-lr my-padded-tb-tiny">
    <div class="ui basic teal left pointing label">idol</div>
</div>

赞赏功能：使用 button进行定义，并使用 Semantic UI官网所示的弹窗效果，在使用 CSS定义，以实现点击按钮弹出二维码的效果

<!-- 赞赏功能 -->
<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/we-chat.png" alt="" class="ui rounded bordered image" width="120px">
                <div>支付宝</div>
            </div>
            <div class="image">
                <img src="./static/images/we-chat.png" alt="" class="ui rounded bordered image" width="120px">
                <div>微信</div>
            </div>
        </div>
    </div>
</div>

<script> 
$('#payButton').popup({ 
　　popup : $('.payQR.popup'), 
　　on : 'click', 
   position : 'top center' 
}); 
</script>

　　效果如下：

博客信息区域：使用 grid进行布局，左边信息11份，右边二维码5份

对于二维码，定义 right floated rounded bordered image，让其居右圆角，太大的话可以指定其尺寸

对于右边信息，可以使用 ui.list，暂且定义成这样，后边修改

<!-- 博客信息 -->
<div class="ui attached message">
    <div class="ui middle aligned grid">
        <div class="eleven wide column">
            <ui class="list">
                <li style="color: dodgerblue">作者：XXX（联系作者）</li>
                <li style="color: dodgerblue">发表时间：xxxx-xx-xx</li>
                <li style="color: dodgerblue">版权声明：*转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                <li style="color: dodgerblue">转载：请在文末添加作者微信二维码</li>
            </ui>
        </div>
        <div class="five wide column">
            <img src="./static/images/we-chat.png" alt="" class="ui right floated rounded bordered image" width="110px">
        </div>
    </div>
</div>

　　效果如下：

留言区域：

留言列表

官网有专门的名为 Commit的组件详细使用教程，选择一个自己喜欢的即可

例如我选择的代码如下，头像图片需要自己改变

<div class="ui teal segment">
    <div class="ui comments">
        <h3 class="ui dividing header">Comments</h3>
        <div class="comment">
            <a class="avatar">
                <img src="./static/images/index-image/004.png">
            </a>
            <div class="content">
                <a class="author">九霄</a>
                <div class="metadata">
                    <span class="date">今天 at 5:42PM</span>
                </div>
                <div class="text">
                    多漂亮！
                </div>
                <div class="actions">
                    <a class="reply">回复</a>
                </div>
            </div>
        </div>
        <div class="comment">
            <a class="avatar">
                <img src="./static/images/index-image/004.png">
            </a>
            <div class="content">
                <a class="author">云外</a>
                <div class="metadata">
                    <span class="date">昨天 at 12:30AM</span>
                </div>
                <div class="text">
                    <p>谢谢啦！</p>
                </div>
                <div class="actions">
                    <a class="reply">回复</a>
                </div>
            </div>
            <div class="comments">
                <div class="comment">
                    <a class="avatar">
                        <img src="./static/images/index-image/004.png">
                    </a>
                    <div class="content">
                        <a class="author">天草</a>
                        <div class="metadata">
                            <span class="date">今天 15:34PM</span>
                        </div>
                        <div class="text">
                            你是对的！
                        </div>
                        <div class="actions">
                            <a class="reply">回复</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="comment">
            <a class="avatar">
                <img src="./static/images/index-image/004.png">
            </a>
            <div class="content">
                <a class="author">大爷</a>
                <div class="metadata">
                    <span class="date">5 天前</span>
                </div>
                <div class="text">
                    哈哈哈哈哈
                </div>
                <div class="actions">
                    <a class="reply">回复</a>
                </div>
            </div>
        </div>
        <form class="ui reply form">
            <div class="field">
                <textarea></textarea>
            </div>
            <div class="ui blue labeled submit icon button">
                <i class="icon edit"></i> 添加回复
            </div>
        </form>
    </div>
</div>

　　效果如下：

留言提交区域

分为回复框、姓名、邮箱、提交按钮四个部分，除过回复框均使用 feild组件，回复框使用 textarea即可实现

<!-- 提交留言区域 -->
<div class="ui form">
    <div class="field">
        <textarea name="content" placeholder="请输入评论内容..."></textarea>
    </div>
    <div class="fields">
        <div class="field my-mobile-wide my-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 my-mobile-wide my-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 my-mobile-wide my-margin-bottom-small">
            <button class="ui teal button my-mobile-wide"><i class="edit icon"></i>发布</button>
        </div>
    </div>
</div>

　　效果如下：

到此为止，基本页面已经实现，接下来是细节优化，使响应手机端：
- 手机端博客内容显示左右间距过大，导致很不好看，可以给标签和内容那里，定义一个响应变量 my-padded-lr-responsive，然后在对其进行 css样式改变
```
@media screen and (max-width: 600px) {
    .my-padded-lr-responsive {
        padding-right: 0 !important;
        padding-left: 0!important;
    }
}
```
- 手机端的下方姓名、邮箱、发布显示不优美，希望可以布满整行，并且上下间隔不是很窄
- 自定义样式 my-margin-bottom-small和 my-mobile-wide分别来控制输入框上下间距和充满整行
```
@media screen and (max-width: 600px) {
    .my-mobile-wide {
        width: 100% !important;
    }
}
```

　　最终实现效果如下：

码农公寓

Semantic UI 个人博客详情页开发

博客详情页面（blog.html）

至此，博客详情页开发基本完成，接下来是分类页面的开发思路及流程，未完......

码农公寓

博客详情页面（blog.html）

至此，博客详情页开发基本完成，接下来是分类页面的开发思路及流程，未完......

相关文章