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自动生成目录
//初始化tocbot
tocbot.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', //其实默认就是hover
position : '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自动生成目录
//初始化tocbot
tocbot.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', //其实默认就是hover
position : 'left center'
});
//根据text内容自动生成二维码
var qrcode = new QRCode("qrcode", {
// text: "http://jindo.dev.naver.com/collie",http://127.0.0.1:8848/SpringBoot_blog/blog.html
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);
// $('#nav').hide(500);
}
console.log('Scrolled to waypoint! ' + direction);
}
});
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
