个人MD风格博客系统（未完成）

简介：

历程：

从大上周周日开始写，写了也有块半个月了。本来代码就是打算用bootstrap怼怼的，结果MDUI这框架深得我心，写着写着越写越复杂，代码一次又一次的增删改查，重构，为了实现一个小功能去查阅更多的技术，一次又一次的读技术文档，查阅技术文档，API，学Jquery是因为我当初想去找一个类名为XXXXXX的元素，就是继承的关系，我用document.getElementClassName()这个东西实现起来很麻烦，写了一堆for循环，直到我发现了Jquery的层叠选择器。。。。。，然后照着Jquery文档用Jquery重构了一遍。。。。

　　有一次我给侧边栏的那个导航添加超链接，用那个a标签，结果发现a标签有个外边距，于是在button里面写的onclick，后来发现这么多页面一个个加太麻烦了，我就用JQ加的click函数，重构了一遍。

　　有一次我想在顶部导航栏加个按钮，就那个主页键，我是这么想的，就是手机端，我觉得手机端要是想要回到主页还得点那个侧边栏很麻烦，就想着在上边加个主页按钮，我一个一个加，我感觉有点蛮烦啊，然后看Vue.js居然可以直接用js写html，然后就用jq加的。。。。方便方便。。。

　　后面又涉及到手机端适配的问题我在博客上学习了媒体查询，摄影那个界面我想加个边框，又不能写padding和margin，就学了css3弹性盒子。。。。。其实还有很多，主要是html5，css3和js、jq的API部分。。。

适配：

所有端实现响应式，包括手机端，平板端，PC，超大PC。

为了实现手机端和平板端的良好效果写了大量的媒体查询代码
尤其是手机端和IPAD端，浏览体验不比PC端差。

基于火狐和Chrome开发，开发用的Firefox调试。

由于API啥新用啥，所以
仅支持最新的Chrome、Firfox浏览器和任何基于Chrome内核或者Webkit内核的浏览器，以及IE10（可能连IE10也不支持）。
不支持老版本Chrome、Firfox以及IE9 IE8.

对手机端和平板端适配非常非常良好，包括横屏竖屏

如何使用：

请点击Welcome.html即可体验，另外IPAD和手机浏览效果更佳。
index.html是主页

前端：

框架选择：

Jquery
MDUI :类似Bootstrap的CSS框架，谷歌Material Design风格
语法和Bootstrap也很相似

插件选择：

Viewer.js：图片查看插件
Share.js：时间原因功能未完美实现，有Bug）
shuffle.js：相册插件，忘记实现了。。。。

页面说明：

页面一共是分为以下10个页面，有1个页面没有实现，1个是模板

welcome.html：欢迎界面
index.html：主页
about.html：关于
article.html：文章列表
login.html: 登录页面
register.html：注册界面
photography.html：相册列表（另外说一声，那个图片是可以点击放大的）
video.html：视频列表页
blank.html：空白页（模板）
video_display_1.html：视频详情页（没有精力实现了）

文件夹说明：

css:

mdui.css :MDUI框架CSS文件
share.min.css：分享插件，没有实现
style.css：主要的css文件
viewer.mim.css：图片点击插件css文件

fonts:

MDUI默认字体文件

icons：

MDUI默认图标

images:

Photo：照片
其他图片请看文件名

js:

jquery-3.4.0.min.js：Jquery主文件
mdui.js：mdui框架主js文件
main.js：主要的JS文件
main2.js：文章字体字数超出限制自动截断代码，article.html里面有引用
returnTop.js：右下角那个返回顶部按钮的js文件
shuffle.min.js：没有实现该功能
social-share.min.js：分享，没有实现，有Bug，在关于里面点分享可以看到对应的效果。
viewer.min.js：摄影那一栏的图片是可以点击的，点击之后可以放大缩小查看幻灯片等操作。

XXXXXX.html：各自的页面文件，请看上面的页面说明

功能介绍：

主要功能：

双击index.html或者welcome.html就是功能了，哈哈哈哈，我可真机智。

未完成功能：

分享功能，就是上面那个分享按钮，是没有办法复制到剪切板的，调用的分享插件显示有BUG也未有时间修复。

XX功能：这个靠脑子想，想出来一个就写一个，写到天荒地老，对了今天（2019-05-05）写那个欢迎界面的字，想用递归调，调了半天没出来。。。。，就索性用定时器写了。

还有n多页面没写。。。

已实现功能

主要有顶部导航(.mdui-appbar)、侧边导航(.mdui-drawer)和主内容(.mdui-container)三个部分组成

绝大部分功能依靠HTML实现，有时候嫌麻烦就用jq直接after或者append到DOM文档里面了，因此JS代码主要是添加一些重复量很大的HTML代码和一些重复量过多的功能，比如使用Jqobject.click(function(){windows.location.href:"XXX.html"})替换掉了a标签作为点击跳转链接的作用，有一些效果代码依靠JS实现，比如主题系统。

特色功能

特色功能：1.主题系统：

这个玩意就是顶部导航栏上的调色盘啊，切记要尝试一下啊，我代码写了一大堆啊，调试了半天BUG！

功能实现：

通过替换body中名为mdui-theme-primary-颜色 mdui-theme-accent-颜色的两个class类名（属性），以实现颜色切换的目的。

例子：

　　把mdui-theme-primary-blue mdui-theme-accent-blue改为mdui-theme-primary-red mdui-theme-accent-red就可以实现整体的颜色的切换，为body添加mdui-theme-color为MDUI的主题颜色系统。

　　
注：图片那个地方加了个蒙版，就是获取了mdui-theme-color-accent的颜色值之后给蒙版的background-color加了进去。然后封装函数，写到按钮的点击事件里了。

颜色切换核心代码

//DOM
<ul class="mdui-menu mdui-menu-cascade mdui-menu-open" id="theme-bottom-id" style="top: 56px; left: 514px; transform-origin: 100% 0px 0px; position: absolute;"><li class="mdui-menu-item"><a href="javascript:;" class="mdui-ripple mdui-text-color-red"><i class="mdui-menu-item-icon mdui-icon material-icons">format_color_text</i>姨妈红</a></li><li class="mdui-menu-item"><a href="javascript:;" class="mdui-ripple mdui-text-color-pink"><i class="mdui-menu-item-icon mdui-icon material-icons">format_color_text</i>哔哩粉</a></li>
</ul>
//JS功能//调用绑定click事件
$("#theme-bottom-id li:nth-child(3)").click(function () {ChangThemeColor('red');
});//*类名替换函数//主题颜色更改函数
function ChangThemeColor(color){var class1 = "mdui-theme-primary-";var class2 = "mdui-theme-accent-";class1 = class1+color;class2 = class2+color;
// mdui-theme-primary-indigo mdui-theme-accent-indigovar allBodyClassName = $("body")[0].className;var className = allBodyClassName.toString();arrClassName = className.split(" ");var tempClass1;var tempClass2;for ( x in arrClassName){if (arrClassName[x].indexOf("mdui-theme-primary")){}else {tempClass1 = arrClassName[x];}if (arrClassName[x].indexOf("mdui-theme-accent")){}else {tempClass2 = arrClassName[x];}}$("body").removeClass(tempClass1);$("body").removeClass(tempClass2);$("body").addClass(class1);$("body").addClass(class2);setTimeout("changeMask()",100);
}

- 颜色切换核心代码:

    //DOM
<ul class="mdui-menu mdui-menu-cascade mdui-menu-open" id="theme-bottom-id" style="top: 56px; left: 514px; transform-origin: 100% 0px 0px; position: absolute;"><li class="mdui-menu-item" style="display: none" id="DaySwitch"><a href="javascript:;" class="mdui-ripple"><i class="mdui-menu-item-icon mdui-icon material-icons">brightness_high</i>日间模式</a></li><li class="mdui-menu-item" id="DarkSwitch"><a href="javascript:;" class="mdui-ripple"><i class="mdui-menu-item-icon mdui-icon material-icons">brightness_2</i>夜间模式</a></li>
</ul>//行为
$("#theme-bottom-id li:nth-child(1)").click(function () {$("body").removeClass("mdui-theme-layout-dark");$("#theme-bottom-id #DaySwitch").hide();document.getElementById("DarkSwitch").style.display="block";setTimeout("changeMask()",100);
});$("#theme-bottom-id li:nth-child(2)").click(function () {$("body").addClass("mdui-theme-layout-dark");$("#theme-bottom-id #DarkSwitch").hide();document.getElementById("DaySwitch").style.display="block";$(".color_card_mask").css("background-color","#000");
});//默认颜色// 默认颜色调用setTimeout("changeMask()",100);//设置整体的主题$("body").addClass("mdui-theme-primary-indigo mdui-theme-accent-indigo");

图片蒙版颜色切换代码

    //DOM
<div class="mdui-drawer" id="left-drawer"><ul class="mdui-list">    <div class="mdui-card"><div class="mdui-card-media"><div class="color_card_mask"></div><img src="image/MainSection.png"><div class="mdui-card-media-covered"><div class="mdui-card-primary"><div class="mdui-card-primary-title">流水吾情</div><div class="mdui-card-primary-subtitle">苦逼大一狗</div></div></div></div></div>....//行为
function changeMask() {//可以根据父类card标签的宽高自适应本身的宽度和高度，var imgWidth = $(".mdui-drawer .mdui-card").css("width");var imgHeight = $(".mdui-drawer .mdui-card").css("height");$(".color_card_mask").css("width",imgWidth);$(".color_card_mask").css("height",imgHeight);//更改颜色var themeColor = $(".mdui-color-theme-accent").css("background-color");$(".color_card_mask").css("background-color",themeColor);
}

    //CSS文件.color_card_mask{position: absolute;top: 0;left: 0;opacity: 0.3;}

特色功能：2.全局响应式

由于框架自带响应式，所以必定支持响应式。
但是自己对框架有的地方不满意，写了大量的媒体查询，对IPAD、手机、手机横屏进行了完美适配。
代码端：

@media screen and (max-width: 600px){.index-card-photo-title .mdui-card-media{width: 100%;}.index-card-photo-title .mdui-card-primary .mdui-typo span{display: none;}.index-card-photo-title .mdui-card-primary .mdui-typo h1{width: 10rem;}
}
@media screen and (max-width: 1000px){.index-card-photo-title .mdui-card-primary{padding-left: 20px;padding-top: 0px;}
}

特色功能：3.浏览器判断

由于使用了绝大多数最新的API，所以仅支持最新浏览器。所以写了以下代码进行了浏览器内核判断。

Code：

// 2、判断浏览器哦类型并处理
function userBrowser() {var browserName = navigator.userAgent.toLowerCase();if (/msie/i.test(browserName) && !/opera/.test(browserName)) {CreateIsBrowserHTML();alert("为了您的使用体验，请您使用最新的Chrome浏览器或Firefox(火狐)浏览器进行浏览。");return "ie";} else if (/firefox/i.test(browserName)) {return "firefox";} else if (/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)) {return "chrome";} else if (/opera/i.test(browserName)) {CreateIsBrowserHTML();alert("为了您的使用体验，请您使用最新的Chrome浏览器或Firefox(火狐)浏览器进行浏览。");return "opera";} else if (/webkit/i.test(browserName) && !(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))) {return "webkit";} else {CreateIsBrowserHTML();alert("为了您的使用体验，请您使用最新的Chrome浏览器或Firefox(火狐)浏览器进行浏览。");return "unknown";}
}
userBrowser();

特色功能：4.视频页框架内嵌

可以将别的视频网站的视频直接用iframe嵌入进来，实现在线视频。
Code：

    // DOM<div class="mdui-card-media"><div class="video-load-img"><img src="image/video1_pic1.png" class="card-title-head-photo"/><button  id="video_button_play" class="mdui-fab mdui-ripple mdui-text-color-grey-500 video_button_play" ><i class="mdui-icon material-icons mdui-center mdui-valign">play_arrow</i></button><div class="mdui-video-container"><iframe src="//player.bilibili.com/player.html?aid=24493376&cid=41136449&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div></div>···    ```css// CSS
#video_button_play{position: absolute;right: 50%;top: 50%;width: 6rem;height: 6rem;margin-right: -3rem;margin-top: -3rem;
}
#video_button_play .mdui-icon{position: relative;font-size: 6rem;line-height: 5rem;text-align: center;width: 6rem;height: 6rem;margin-top: 0.5rem;opacity: 0.8;
}

    // Javascript
$("#video_button_play").click(function () {scrollPosition = $(document).scrollTop();$(".mdui-card-media .video-load-img .card-title-head-photo,#video_button_play").hide(0);$(".mdui-card-media .mdui-video-container").show(0);$(document).scrollTop(scrollPosition);$(".mdui-card-media .mdui-video-container iframe").attr('src', $('.mdui-card-media .mdui-video-container iframe').attr('src'));
});

后端：

根本没有精力写。。。。准备用node.js

Gitee：https://gitee.com/SpringWaterLikeMe/PrivateBlog