MyBlog个人博客前端开发（二）

作者：silence

编写日期：2020-06-20

分类：学习记录

项目演示地址：MyBlog演示地址

一、前言

昨天我们介绍了个人博客开发的背景、系统叙述、功能介绍以及首页的开发，我们主要说了如何做，至于具体的代码
部分并没有说，今天我们就来讲一讲。

二、正文

2.1 导航栏

整个导航的代码如下：

<!-- 导航 -->
<!-- 使用UI组件，使用inverted反转默认颜色，attached去圆角，segment表明这是一个片段，自定义上下内边距 -->
<nav id="nav" class="ui inverted attached segment m-padding-tb-mini"><div class="ui container"><!-- 为了适应移动端，这里需要加一个属性stackable,表示可堆叠 --><div class="ui inverted secondary stackable menu"><!-- 添加logo，导航菜单 --><h2 class="ui teal header item">Blog</h2><a href="index.html" class="menu-item item m-mobile-hide"><i class="home icon"></i>首页</a><a href="#" class="menu-item item m-mobile-hide"><i class="idea icon"></i>分类</a><a href="#" class="menu-item item m-mobile-hide"><i class="tags icon"></i>标签</a><a href="# " class="menu-item item m-mobile-hide"><i class="clone icon"></i>归档</a><a href="#" class="menu-item item m-mobile-hide"><i class="info icon"></i>关于我</a><div class="right menu-item item m-mobile-hide"><div class="ui icon input"><input type="text" placeholder="Search..."/><i class="search link icon"></i></div></div></div></div><!-- 设置手机端响应时显示个菜单图标 --><a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><i class="sidebar icon"></i></a>
</nav>

在这里我们使用了semantic ui，这里有2种方法可以进行引用：

(1).下载插件到本地：
- 具体方法见semantic ui
(2).使用cdn直接引用：
- 引用下面的script脚本即可

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">

<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

对上述代码拆分一下，我们可以发现其可以分成如下几个部分：

(1).外部盒子

<nav id="nav" class="ui inverted attached segment m-padding-tb-mini"><div class="ui container"></div>
</nav>

这个外部盒子说白了就是一个容器，嗯，这个nav标签暂时可以加，也可以不加，只是成品上面会用得着，
就先加着吧。 class里面的 ui 说明这里使用的是 semantic ui 的 ui 组件，然后，这里为了简便，
直接使用 inverted 将背景设置成黑色（注：默认是白色，而 inverted 是置反的意思），
attached 一般的用法是将上下连在一起，如下图所示：

这里的“文章列表”框里，顶部的“博客”、“共**篇”和下方的文章内容是连在一起的，就是使用的attached这个
属性，segment说明这是一个段，m-padding-tb-mini 是在me.css中自定义的一个样式，顾名思义，就是
自定义的内边距，关于上下的（t：top；b：bottom）的一个mini值，当然，除了mini外，还有tiny、small、
normal(不写即为normal)、large、big、huge、massive等等几个级别，嗯，反正就是一组样式了，给自己
定义好一个规则之后，以后不就可以偷点懒，直接拿来用了嘛！

(2).内部的菜单和搜索框

<!-- 为了适应移动端，这里需要加一个属性stackable,表示可堆叠 -->
<div class="ui inverted secondary stackable menu"><!-- 菜单部分 --><!-- 搜索 --><div class="right menu-item item m-mobile-hide"><div class="ui icon input"><input type="text" placeholder="Search..."/><i class="search link icon"></i></div></div>
</div>

这里的 secondary 是一个颜色，stackable是表示可堆叠的意思，是为了适应移动端而写的，
menu说明这是一个菜单，下面的menu-item 表示这是一个菜单子项，是一个常识写法，为了让
搜索框向右浮动，这里写了right，嗯，这就是使用组件的好处了，如果是纯HTML+css，就应该
要加一个float了，然后是一个input输入框，为了在里面显示个搜索的小图标，这里写了search link icon。

2.2 底部栏

先放代码：

<footer class="ui inverted vertical segment m-padding-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><h4 class="ui inverted header">扫码关注</h4><div class="ui inverted link list"><div class="item"><!-- 图片设置为圆角，并使用内联样式控制图片大小 --><img src="img/MyBlog.png" class="ui rounded image m-div-mini" alt=""></div>                              </div></div><div class="three wide column"><h4 class="ui inverted header">最新博客</h4><div class="ui inverted link list"><a href="#" class="item">用户故事(User Story)</a></div></div><div class="three wide column"><h4 class="ui inverted header">联系我</h4><div class="ui inverted link list"><a href="#" class="item">Email:406685901@qq.com</a></div></div><div class="seven wide column"><h4 class="ui inverted header">Blog</h4><p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，会分享关于编程、思考等等相关的任何内容，希望可以对来到此站的朋友有所帮助！</p></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright 2020 silence Designed by silence</p>      </div>
</footer>

然后我们来拆一下看看。外面还是个container容器，老套路，只是使用了center aligned增加了内容居中。
然后呢，使用了一个grid将上方分成四个分别占有3、3、3、7份的部分，分别放置图片和内容。

<div class="three wide column"><h4 class="ui inverted header">扫码关注</h4><div class="ui inverted link list"><div class="item"><!-- 图片设置为圆角，并使用内联样式控制图片大小 --><img src="img/MyBlog.png" class="ui rounded image m-div-mini" alt=""></div>                                </div>
</div>

图片的话是是list中的一项（item），是一个圆角rounded image图片，如果还有其他项，可以写下去。

就比如说第二个吧，“最新博客”下面，继续放上a标签写多个。

2.3 右侧工具栏

<!-- 右侧工具栏 -->
<div class=""><!-- 目录、返回顶部等等右侧小工具 --><div id="toolBar" class=" m-position-fixed  m-position-rb" style="display: none;"><div class="ui vertical icon buttons"><button type="button" class="ui toc teal button">目录</button><!-- <a href="#comment-container" class="ui teal button">留言</a> --><button class="ui addr_qrcode icon button" title="点我生成二维码,在手机上查看"><i class="qrcode icon"></i></button><!-- 返回顶部图标 --><div id="toTop-Btn" class="ui button" title="返回顶部"><i class="chevron up icon" style="margin: auto !important;"></i></div></div></div><!-- 目录存放位置 --><div class="ui toc-container flowing popup transition hidden" style="width: 15.625rem !important;"><ol class="js-toc"></ol></div><!-- 二维码存放位置 --><div id="qrcode" class="ui QRcode flowing popup transition hidden" style="width: 130px !important;"></div>
</div>

当然，这里就需要配置其他东西了，比如说生成二维码，你需要引入qrcode，生成目录的话需要引用tocbot等等。
虽然这里并不需要目录，但是为了统一性还是写上吧，而且在博客详情页面也还是需要用上的。

<!-- 引入tocbot.css实现自动生成目录 -->
<link rel="stylesheet" type="text/css" href="lib/tocbot/tocbot.css"/>

<!-- 引用tocbot.js实现自动生成目录 --><script src="lib/tocbot/tocbot.js"></script><!-- 引用qrcode.js实现自动生成当前地址的二维码 --><script src="lib/qrcode/qrcode.js"></script><!-- 引用jquery.waypoints.min.js实现滚动侦测 --><script src="lib/waypoints/jquery.waypoints.min.js"></script>

<script>// 手机端点击menu按钮时显示菜单$('.menu.toggle').click(function(){// 点击按钮时检测menu-item内是否有m-mobile-hide属性，有则删除，没有则添上$('.menu-item').toggleClass('m-mobile-hide');});//tocbot自动生成目录//初始化tocbottocbot.init({// Where to render the table of contents.tocSelector: '.js-toc',// Where to grab the headings to build the table of contents.contentSelector: '.js-toc-content',// Which headings to grab inside of the contentSelector element.headingSelector: 'h1, h2, h3',// For headings inside relative or absolute positioned containers within content.hasInnerContainers: true,});//点击按钮时在左侧弹出目录$('.toc.button').popup({popup : $('.toc-container.popup'),on : 'click',position : 'left center'});//二维码图标$('.addr_qrcode').popup({popup : $('.QRcode.popup'),on : 'click', //其实默认就是hoverposition : 'left center'});//根据text内容自动生成二维码var qrcode = new QRCode("qrcode", {text: "https://silence-moon.github.io/",width: 126,height: 126,colorDark : "#000000",colorLight : "#ffffff",correctLevel : QRCode.CorrectLevel.H});//返回顶部$('#toTop-Btn').click(function(){$(window).scrollTo(0,500);//grgs:(返回位置，返回过程所用时间)});// 导航栏显示var waypoint = new Waypoint({element: document.getElementById('waypoint'),handler: function(direction) {if (direction == 'down') {$('#toolBar').show(500);$('#nav').show(500);} else {$('#toolBar').hide(500);              }console.log('Scrolled to waypoint!  ' + direction);}});
</script>

2.3 中间内容

这里主要是分成左右两块：左侧的内容列表和右侧的卡片组
嗯，这里使用了animated bounceIn的动画，如果想换样式的，
可以去这个网站Animate.css动画演示
看看，选择一个自己喜欢的样式。

<!-- 中间内容:animated bounceIn为显示的动画 -->
<div id="waypoint" class="m-container-small teal m-padding-tb-big animated bounceIn"><div class="ui container"><!-- 分列进行样式排版 --><div class="ui stackable grid"><!-- 左侧：注意这里写的时候 eleven wide column 中间不要有多余的空格或字符--><div class="eleven wide column"><!-- 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">共 <h2 class="ui orange header m-inline-blok m-text-thin"> 14 </h2> 篇</div></div></div><!-- content list --><div class="ui attached segment"><div class="ui padding vertical segment m-padding-tb-big"></div></div><!-- 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></div><!-- 右侧卡片 --><div class="five wide column"><!-- 卡片样式：这里写2个意思一下 --><!-- 分类卡片 --><div class="ui segments"><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"><!-- fluid:填充 --><div class="ui fluid vertical menu"><a href="#" class="item">学习日志<!-- 设置数量样式 --><div class="ui teal basic left pointing label">13</div></a><!-- 需要可以再行添加 --></div></div></div><!-- 标签卡片 --><div class="ui segments m-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 m-margin-tb-tiny">方法论 <div class="detail">23</div></a>                               </div></div></div></div></div>
</div>

样式如上，我进行了简化处理。

三、总结

大概的分析就如上了，具体的还是需要去实践练习的。多写两遍后感觉就没什么可讲的了。
其实今天再准备的时候我还特地跑到 semantic ui 这个网站上去瞅了一遍，准备做一份
简要的说明，写着写着，又去将这两天写的一个页面抽取出来做了一个模板，真是够乱了。
以后还是分享分享自己遇到的一些问题和其他内容吧，实战的过程分析真的是很麻烦啊。

四、附录

这里放上做个一个小模板，可以简单看看。
至于自定义的样式me.css,我把它放到我的GitHub上了，
可以去前端代码地址上找到对应的文件去自行下载。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>一个html页面的基本框架</title><!-- 使用cnd引用semantic.min.css样式 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"><!-- 自定义样式 --><link rel="stylesheet" type="text/css" href="css/me.css"/><!-- 引入typo.css对内容进行排版 --><link rel="stylesheet" type="text/css" href="css/typo.css"/><!-- 引入animate.css添加动画 --><link rel="stylesheet" type="text/css" href="css/animate.css"/><!-- 引入prism.css实现语法高亮 --><link rel="stylesheet" type="text/css" href="lib/prism/prism.css"/><!-- 引入tocbot.css实现自动生成目录 --><link rel="stylesheet" type="text/css" href="lib/tocbot/tocbot.css"/></head><body><!-- 导航 --><!-- 使用UI组件，使用inverted反转默认颜色，attached去圆角，segment表明这是一个片段，自定义上下内边距 --><nav id="nav" class="ui inverted attached segment m-padding-tb-mini"><div class="ui container"><!-- 为了适应移动端，这里需要加一个属性stackable,表示可堆叠 --><div class="ui inverted secondary stackable menu"><!-- 添加logo，导航菜单 --><h2 class="ui teal header item">logo</h2><a href="index.html" class="menu-item item m-mobile-hide"><i class="home icon"></i>首页</a><div class="right menu-item item m-mobile-hide"><div class="ui icon input"><input type="text" placeholder="Search..."/><i class="search link icon"></i></div></div></div></div><!-- 设置手机端响应时显示个菜单图标 --><a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><i class="sidebar icon"></i></a></nav><!-- 中间内容样式1:animated bounceIn为显示的动画 --><div id="waypoint" class="m-container-small teal m-padding-tb-big animated bounceIn"><div class="ui container"><!-- 分列进行样式排版 --><div class="ui stackable grid"><!-- 左侧：注意这里写的时候 eleven wide column 中间不要有多余的空格或字符--><div class="eleven wide column"><!-- 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">共 <h2 class="ui orange header m-inline-blok m-text-thin"> 14 </h2> 篇</div></div></div><!-- content list --><div class="ui attached segment"><div class="ui padding vertical segment m-padding-tb-big"></div></div><!-- 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></div><!-- 右侧卡片 --><div class="five wide column"><!-- 卡片样式：这里写2个意思一下 --><!-- 分类卡片 --><div class="ui segments"><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"><!-- fluid:填充 --><div class="ui fluid vertical menu"><a href="#" class="item">学习日志<!-- 设置数量样式 --><div class="ui teal basic left pointing label">13</div></a><!-- 需要可以再行添加 --></div></div></div><!-- 标签卡片 --><div class="ui segments m-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 m-margin-tb-tiny">方法论 <div class="detail">23</div></a>                               </div></div></div></div></div></div><hr ><p>这里是上下2个中间内容样式的分割线</p><hr ><!-- 中间内容样式2:animated bounceIn为显示的动画 --><div id="" class="m-container-small teal m-padding-tb-big animated bounceIn"><div class="ui container"><p>使用本文件时请引用me.css样式</p><p>同时，也需要引入本文件下的lib库</p><h2 id="section1-3">下面看一下prism插件的代码高亮部分的显示情况：</h2>             <pre><code class="language-css">p { color: red }</code></pre><p>请先引入prism.css样式</p><p>若要实现内容排版还请引入typo.css样式</p></div></div><!-- 右侧工具栏 --><div class=""><!-- 目录、返回顶部等等右侧小工具 --><div id="toolBar" class=" m-position-fixed  m-position-rb" style="display: none;"><div class="ui vertical icon buttons"><button type="button" class="ui toc teal button">目录</button><!-- <a href="#comment-container" class="ui teal button">留言</a> --><button class="ui addr_qrcode icon button" title="点我生成二维码,在手机上查看"><i class="qrcode icon"></i></button><!-- 返回顶部图标 --><div id="toTop-Btn" class="ui button" title="返回顶部"><i class="chevron up icon" style="margin: auto !important;"></i></div></div></div><!-- 目录存放位置 --><div class="ui toc-container flowing popup transition hidden" style="width: 15.625rem !important;"><ol class="js-toc"></ol></div><!-- 二维码存放位置 --><div id="qrcode" class="ui QRcode flowing popup transition hidden" style="width: 130px !important;"></div></div>    <!-- 底部栏 --><footer class="ui inverted vertical segment m-padding-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><h4 class="ui inverted header">扫码关注</h4><div class="ui inverted link list"><div class="item"><!-- 图片设置为圆角，并使用内联样式控制图片大小 --><img src="img/MyBlog.png" class="ui rounded image m-div-mini" alt=""></div>                               </div></div><div class="three wide column"><h4 class="ui inverted header">最新博客</h4><div class="ui inverted link list"><a href="#" class="item">用户故事(User Story)</a></div></div><div class="three wide column"><h4 class="ui inverted header">联系我</h4><div class="ui inverted link list"><a href="#" class="item">Email:406685901@qq.com</a></div></div><div class="seven wide column"><h4 class="ui inverted header">Blog</h4><p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，会分享关于编程、思考等等相关的任何内容，希望可以对来到此站的朋友有所帮助！</p></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright 2020 silence Designed by silence</p>      </div></footer><!-- cdn引入 jquery.min.js 和semantic.min.js --><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script><!-- 引用prism.js实现代码高亮 --><script src="lib/prism/prism.js"></script><!-- 引用tocbot.js实现自动生成目录 --><script src="lib/tocbot/tocbot.js"></script><!-- 引用qrcode.js实现自动生成当前地址的二维码 --><script src="lib/qrcode/qrcode.js"></script><!-- 引用jquery.waypoints.min.js实现滚动侦测 --><script src="lib/waypoints/jquery.waypoints.min.js"></script><script>// 手机端点击menu按钮时显示菜单$('.menu.toggle').click(function(){// 点击按钮时检测menu-item内是否有m-mobile-hide属性，有则删除，没有则添上$('.menu-item').toggleClass('m-mobile-hide');});//tocbot自动生成目录//初始化tocbottocbot.init({// Where to render the table of contents.tocSelector: '.js-toc',// Where to grab the headings to build the table of contents.contentSelector: '.js-toc-content',// Which headings to grab inside of the contentSelector element.headingSelector: 'h1, h2, h3',// For headings inside relative or absolute positioned containers within content.hasInnerContainers: true,});//点击按钮时在左侧弹出目录$('.toc.button').popup({popup : $('.toc-container.popup'),on : 'click',position : 'left center'});//二维码图标$('.addr_qrcode').popup({popup : $('.QRcode.popup'),on : 'click', //其实默认就是hoverposition : 'left center'});//根据text内容自动生成二维码var qrcode = new QRCode("qrcode", {// text: "http://jindo.dev.naver.com/collie",http://127.0.0.1:8848/SpringBoot_blog/blog.htmltext: "https://silence-moon.github.io/",width: 126,height: 126,colorDark : "#000000",colorLight : "#ffffff",correctLevel : QRCode.CorrectLevel.H});//返回顶部$('#toTop-Btn').click(function(){$(window).scrollTo(0,500);//grgs:(返回位置，返回过程所用时间)});// 导航栏显示var waypoint = new Waypoint({element: document.getElementById('waypoint'),handler: function(direction) {if (direction == 'down') {$('#toolBar').show(500);$('#nav').show(500);} else {$('#toolBar').hide(500);// $('#nav').hide(500);                   }console.log('Scrolled to waypoint!  ' + direction);}});</script></body>
</html>

MyBlog前端开发2相关推荐

MyBlog前端开发
MyBlog个人博客前端开发作者:silence 编写日期:2020-06-20 分类:学习记录项目演示地址:MyBlog演示地址一.背景因为这几天在尝试着搭建一个自己的个人博客平台,然后逛b ...
day44前端开发1之html基础
web前端开发1 一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体标签: ...
关于前端开发的相关资料及例子
1:前端HTML-CSS规范(http://www.cnblogs.com/whitewolf/p/4491707.html): 2:HTML实例(http://www.w3school.com.cn ...
gulp 配置自动化前端开发
有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:"grun ...
读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
《初级前端开发人员经常容易忽视几个细节问题汇总》
<初级前端开发人员经常容易忽视几个细节问题汇总> 1.使用变量.toString()的时候记得对变量进行判空 2.使用字符串.indexOf()的时候记得对字符串变量进行判断是否为nu ...
前端开发中的性能那点事
前端开发中的性能那点事(一)巧用xdebug 前言: 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,funct ...
前端开发学习常用网站网址及介绍（都是免费的）
在开发的时候,想记住所有的单词基本是不可能的,所以就需要进入文档,只要理清需求能做出来,就很不差了!! 扫码加博主微信 1.百度,俗称度娘,有不懂的就问百度,有问必答,跳转 2.百度翻译,不懂的单词, ...
前端开发神器之ngrok
ngrok能做什么,为什么是前端开发神器? 内网穿透,映射本地开发环境到公网,模拟多终端线上环境. 结合一个很简单的PWA demo,举个简单的例子 1.克隆demo到本地 git clone htt ...

MyBlog前端开发2