Semantic UI 设计个人博客首页

首页设计（index.html）

---

---

（1）Semantic UI的引入及依赖导入

• 在HTML文件的head导入该框架的CSS文件如下：

　　   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css"> 

• 在HTM文件的body导入依赖：

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

• 为了让浏览器打开该页面是达到最佳的适应，可以在文件head加入：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

（2）首页导航栏的设计

• 利用该框架中的 segment 元素设计导航栏，使用container 作为包容器，使用stackable menu 实现手机端的可堆叠式菜单栏
• 导航栏功能分为 首页、分类、标签、关于我、搜索五部分
• segment 原本的颜色为白色，此处为了美观，使用 inverted 进行颜色反转

<!--导航-->
<nav class="ui inverted attached segment my-padded-tb-mini">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Blog</h2>
            <a href="#" class="item"><i class="home icon"></i>首页</a>
            <a href="#" class="item"><i class="idea icon"></i>分类</a>
            <a href="#" class="item"><i class="tags icon"></i>标签</a>
            <a href="#" class="item"><i class="info icon"></i>关于我</a>
            <div class="right item">
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="Search...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
</nav>

• 最终导航栏效果如下

（3）中间内容设计

• .中间分为左右两部分，使用框架中的 grid 进行布局，grid 控件一共分为16部分，左边为博客列表，占11份；剩下的5分为右边的分类、标签等功能。

<!-- 左边博客列表 -->
            <div class="eleven wide column">

...
...
...

<!-- 右边的top ,标签、分类等 -->
            <div class="five wide column">

 （4）左边博客列表设计

• 博客列表同样使用 segment 控件进行设计，为竖向，分为三大部分：博客篇数统计、博客摘要列表、翻页按钮。
  • 博客篇数统计：使用 grid 进行布局，左边为标题，右边为篇数

<!-- header -->
                <div class="ui top attached segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <h3 class="ui teal header">博客</h3>
                        </div>
                        <div class="right aligned column">
                            共<h3 class="ui orange header my-inline-block my-text-thin">&nbsp;18&nbsp;</h3>篇
                        </div>
                    </div>
                </div>

• 接下来是真正的博客摘要部分，也即整个页面的核心部分
  • 同样使用 grid 进行左右两边的布局，左边为博客标题及摘要（占11份），右边为插图（占5份），wide 表示将grid 填充满 

<div class="ui grid">
　　　　<div class="eleven wide column">

        .....
        .....

　　　　<div class="right aligned five wide column">  

• • 左边博客摘要列表设计
    • 使用 h3 定义标题，p 定义博客摘要

<h3 class="ui header">你真的知道什么是财富自由吗？</h3>
　　<p class="my-text">正确做好任何一件事情的前望是清站、正确的理解目标，而事实是，我们很多人很多时候根本没有对目标正确的定义，
　　　　　　 甚至根本从来就没有想过，只是大家都那么做而已……</p>

• • • 下方设计有图片缩略图、博文发布日期及浏览次数。使用 item 进行布局

<idv class="item">
　　<img src="./static/images/index-image/001.jpg" 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>

• • 右边博文配图，直接使用 img 插入图片地址即可

<div class="right aligned five wide column">
    <a href="#" target="_blank">
        <img src="./static/images/index-image/001.jpg" alt="" class="ui rounded image">
    </a>
</div>

• • 最终效果如下图

•  博客列表第三部分：翻页按钮
  • 使用 bottom 组件进行设计

<!-- footer -->
<div class="ui bottom attached segment">
    <div class="ui middle aligned two column grid">
        <div class="column">
             <a href="#" class="ui mini teal basic button">上一页</a>
    　　</div>
    　　<div class="right aligned column">
       　　<a href="#" class="ui mini teal basic button">下一页</a>
    　　</div>
    </div>
</div>

• • 效果如下

（5）右边分类设计

　　采用 segment 控件设置，左边为分类图标，右边为 More >> 按钮，下方使用  vertical menu 展示分类列表，在每个分类的右边使用 label 插入对应的博文数量

<!-- 分类 -->
<div class="ui segment">
　　<div class="ui secondary segment">
　　　　<div class="ui two column grid">
　　　　　　<div class="column">
　　　　　　　　<i class="idea icon"></i>分类
　　　　　　</div>
　　　　　　<div class="right aligned column">
　　　　　　　　<a href="#" target="_blank">More<i class="angle double right icon"></i></a>
　　　　　　</div>
　　　　</div>
　　</div>
　　<div class="ui teal segment">
　　　　<div class="ui fluid vertical menu">
　　　　　　<a href="#"class="item">
　　　　　　　　学习日志
　　　　　　　　<div class="ui teal basic left pointing label">13</div>
　　　　　　</a>
　　　　　　<a href="#"class="item">
　　　　　　　　学习感悟
　　　　　　　　<div class="ui teal basic left pointing label">13</div>
　　　　　　</a>
　　　　　　<a href="#"class="item">
　　　　　　　　随笔集
　　　　　　　　<div class="ui teal basic left pointing label">13</div>
　　　　　　</a>
　　　　　　<a href="#"class="item">
　　　　　　　　杂谈
　　　　　　　　<div class="ui teal basic left pointing label">13</div>
　　　　　　</a>
　　　　　　<a href="#"class="item">
　　　　　　　　技术
　　　　　　　　<div class="ui teal basic left pointing label">13</div>
　　　　　　</a>
　　　　　　<a href="#"class="item">
　　　　　　　　其他
　　　　　　　　<div class="ui teal basic left pointing label">13</div>
　　　　　　</a>
　　　　</div>
　　</div>
</div>

　　效果如下图：

（6）右边标签、最新推荐设计：原理与上方分类的设计思路大同小异

<!-- 标签 -->
<div class="ui segment my-margin-top-large">
    <div class="ui secondary segment">
        <div class="ui two column grid">
            <div class="column">
                <i class="tags icon"></i>标签
            </div>
            <div class="right aligned column">
                <a href="#" target="_blank">More<i class="angle double right icon"></i></a>
            </div>
        </div>
    </div>
    <div class="ui teal segment">
        <a href="#" target="_blank" class="ui teal basic left pointing label my-margin-tb-tiny">
            Ruby <div class="detail">5</div>
        </a>
        <a href="#" target="_blank" class="ui teal basic left pointing label my-margin-tb-tiny">
            JAVA <div class="detail">5</div>
        </a>
        <a href="#" target="_blank" class="ui teal basic left pointing label my-margin-tb-tiny">
            C <div class="detail">5</div>
        </a>
        <a href="#" target="_blank" class="ui teal basic left pointing label my-margin-tb-tiny">
            C++ <div class="detail">5</div>
        </a>
        <a href="#" target="_blank" class="ui teal basic left pointing label my-margin-tb-tiny">
            Python <div class="detail">5</div>
        </a>
        <a href="#" target="_blank" class="ui teal basic left pointing label my-margin-tb-tiny">
            Go <div class="detail">5</div>
        </a>
        <a href="#" target="_blank" class="ui teal basic left pointing label my-margin-tb-tiny">
            C# <div class="detail">5</div>
        </a>
        <a href="#" target="_blank" class="ui teal basic left pointing label my-margin-tb-tiny">
            Object C <div class="detail">5</div>
        </a>
    </div>
</div>
<!-- 最新推荐 -->
<div class="ui segment my-margin-top-large">
    <div class="ui secondary segment">
        <i class="bookmark icon"></i>最新推荐
    </div>
        <div class="ui segment">
            <a href="#" target="_blank" class="my-black my-text-thin">用户故事(User Story)</a>
        </div>
        <div class="ui segment">
            <a href="#" target="_blank" class="my-black my-text-thin">用户故事(User Story)</a>
        </div>
        <div class="ui segment">
            <a href="#" target="_blank" class="my-black my-text-thin">用户故事(User Story)</a>
        </div>
        <div class="ui segment">
            <a href="#" target="_blank" class="my-black my-text-thin">用户故事(User Story)</a>
        </div>
    </div>

　　效果如下图：

（7）右边关于我设计

　　使用 horizontal divider 划水平线，然后使用 img 插入个人二维码

<!-- 二维码 -->
<h4 class="ui horizontal divider header my-margin-top-large">扫码关注我</h4>
<div class="ui centered card my-margin-top-large" style="width: 11em">
    <img src="./static/images/we-chat.png" alt="" class=" ui rounded image">

　　效果如下：

（8）网页页脚设计

　　页脚依然采用 grid ，分为二维码（3份）、最新博客（3份）、联系方式（4份）、自我介绍（6份）四个部分

 　　二维码使用 img 插入，最新博客及联系方式采用 a 标签，自我介绍使用 p 标签

　　最后使用 p 标签加入Copyright 等内容即可

<!--底部footer-->
<footer class="ui inverted vertical segment my-padded-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="./static/images/we-chat.png" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header my-text-spaced my-text-lined my-opacity-mini">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事(User Story)</a>
                    <a href="#" class="item">用户故事(User Story)</a>
                    <a href="#" class="item">用户故事(User Story)</a>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header my-text-spaced my-text-lined my-opacity-mini">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email：[email protected]</a>
                    <a href="#" class="item">QQ：1667191252</a>
                    <a href="#" class="item">微博：九霄云外的天草</a>
                </div>
            </div>
            <div class="six wide column">
                <h4 class="ui inverted header my-text-spaced my-text-lined my-opacity-mini">My Blog</h4>
                <p class="my-opacity-mini my-text-lined">这里是我的个人博客、会分享我学习编程过程中的经理和心得，希望可以给来到这里的人带来帮助...</p>
            </div>
        </div>
        <div class="ui inverted section divider "></div>
        <p class="my-text-thin my-text-spaced my-text-lined my-opacity-mini">Copyright &copy; 2020 skg-xsn Designed by skg-xsn</p>
    </div>

</footer>

　　效果如下：

 （9）手机端的页面处理

　　由于手机端屏幕变窄，会导致显示不正确，因此需要改变源代码：

• 对于导航页按钮，只需要给 grid 控件加上 stackable 属性即可

<div class="ui inverted secondary stackable menu">

• 对于博客列表，依然是一样的处理方式，并且使用 mobile revered 可以实现图片显示在文章上方

<!-- content -->
<div class="ui attached segment">
    <div class="ui padded vertical segment my-padded-tb-middle">
        <div class="ui mobile reversed stackable grid">

• 对于右边的分类、标签、最新推荐、页脚等，一样的处理方式，均在 grid 前方加上 stackable 即可，最终结果如下：

• 如果想让手机端的导航菜单栏不是全部显示，只显示菜单栏按钮，点击按钮时才会全部显示出来，可以使用该框架自带方法进行：　　

• •  先在导航栏里增加一个菜单功能按钮，然后在按钮的 class 属性里自定义 显示和隐藏的CSS样式

<!-- 手机端菜单栏按钮 -->
<a href="#" class="ui black icon button my-right-top my-mobile-show">
    <i class="sidebar icon"></i>
</a>

/* ----------- position ------------*/
.my-right-top {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

/* ------------ menu hide mobile ---------*/
.my-mobile-show {
    display: none !important;
}
@media screen and (max-width: 600px) {
    .my-mobile-hide {
        display: none !important;
    }
    .my-mobile-show {
        display: block !important;
    }
}

• • 接着想实现在手机端点击菜单按钮，才会显示导航功能，可以在定义的按钮里添加 class 属性，命名为 menu toggle，并且在四个导航功能及搜索框的 class 属性定义一个 my-item，以方便用框架自带功能实现

 <!-- 修改后的导航栏 -->
<div class="ui inverted secondary stackable menu">
     <h2 class="ui teal header item">Blog</h2>
     <a href="#" class="my-item item my-mobile-hide"><i class="home icon"></i>首页</a>
     <a href="#" class="my-item item my-mobile-hide"><i class="idea icon"></i>分类</a>
     <a href="#" class="my-item item my-mobile-hide"><i class="tags icon"></i>标签</a>
     <a href="#" class="my-item item my-mobile-hide"><i class="info icon"></i>关于我</a>
     <div class="right my-item item my-mobile-hide">
         <div class="ui icon inverted transparent input">
             <input type="text" placeholder="Search...">
             <i class="search link icon"></i>
         </div>
     </div>
 </div>
 <!-- 手机端菜单栏按钮 -->
 <a href="#" class="ui menu toggle black icon button my-right-top my-mobile-show">
     <i class="sidebar icon"></i>
 </a>

<!-- 添加到 body 最下方 -->
<script>
    $('.menu.toggle').click(function () {
        $('.my-item').toggleClass('my-mobile-hide');
    })
</script>

　　手机端点击前的效果：

　　

 手机端点击后的效果：

 

 （10）细节优化

• 导航栏再添加一个“归档”按钮，图标变小

<a href="#" class="my-item item my-mobile-hide"><i class="mini home icon"></i>首页</a>
<a href="#" class="my-item item my-mobile-hide"><i class="mini idea icon"></i>分类</a>
<a href="#" class="my-item item my-mobile-hide"><i class="mini tags icon"></i>标签</a>
<a href="#" class="my-item item my-mobile-hide"><i class="mini clone icon"></i>归档</a>
<a href="#" class="my-item item my-mobile-hide"><i class="mini info icon"></i>关于我</a>

• 背景看起来太白，和主页面区分不明显，在CSS中改变背景颜色

body {
    background-color: rgb(20, 20, 20);
}

至此，博客首页完成，接下来会继续更新详情页的开发思路及流程...