前言
之前想了很久做个人网站但是只能做个静态的html放到那儿(大概是1月初在b站上看教程做好的),确实。。没多大用,当然还有一个原因是我太懒了orz。。
后面接触到了wordpress,就在我的腾讯云Linux主机上搞了一下,但是LAMP的环境配置太麻烦了,很多conf文件不会配置,MySQL的权限也整了好久,后面又把域名拿去备案了,就停止了倒腾。。(大概是寒假)
再到后面把内网穿透搭载好了又开始在Windows上搞,发现WAMP比较好配置,都是一键式操作。(3月初的时候)
刚好遇到部门上了php的反序列化的课,于是我在B站上看php语法的时候。。。又想起了我博客的事情,于是就开始了做个人博客的工作(3月20号左右)
在我域名备案期间在windows上倒腾了2天,差不多已经准备好了
3月25号,一觉睡醒发信息给我说域名备案好了,就开始直接上传文件了
搭载环境
首先我搭载了wordpress+WAMP(Windows+Apache2 + MySQL + PHP),下载主题,配置文件。大概是3月22号
搭建环境比较简单,但是下载的主题就只有个框架,虽然大多数实现的功能都是给你写好了的,但是要实现一些美化框架就要自己改代码
但是!!
php,css代码实在是看得我眼睛痛(其实除了对比别人的源码改改,我也不会写php,orz)
所以我在用同样主题的大佬们的个人博客找到了一些CSS,PHP配置(为了避免遗忘,放在文末)
在我云服务器上直接安装了BT面板(2月份就安装了)一键操作搭建wordpress,搭好了直接上传我在Windows上的wordpress主题文档,代码都是事先改好了的。
访问域名,Nice!!
注:本文内容参考的博客有:ukenn , Marshiro,等!
其他
wordpress的主题用的是 Sakura(这里感谢marshiro大佬设计并开源到Github上的主题!谢谢!)
这垃圾博客就用来记录自己的成长吧!!
写写自己的代码啥的,分享一些自己学的东西啥的
就这样吧!
(下面全是我复制粘贴的代码,别看了!)
部分功能实现的配置文件
打字简介
imgbox.php
<div class="header-info">
<script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<i class="fa fa-quote-left"></i>
<span class="element">快速编辑中....</span>
<i class="fa fa-quote-right"></i>
<span class="typed-cursor" style="animation-iteration-count: infinite;"></span>
<script>
var typed = new Typed('.element', {
strings: [" "," "," "], //输入内容, 支持html标签
typeSpeed: 140,
backSpeed: 50
});
</script>
banner_wave
style.css
#banner_wave_1 {
width: auto;
height: 65px;
background: url(http://localhost/wp-content/themes/Sakura/images/wave1.png) repeat-x;
_filter: alpha(opacity=80);
position: absolute;
bottom: 0;
width: 400%;
left: -236px;
z-index: 5;
opacity: 1;
transiton-property: opacity,bottom;
transition-duration: .4s,.4s;
animation-name: move2;
animation-duration: 240s;
animation-fill-mode: backwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#banner_wave_2 {
width: auto;
height: 80px;
background: url(http://localhost/wp-content/themes/Sakura/images/wave2.png) repeat-x;
_filter: alpha(opacity=80);
position: absolute;
bottom: 0;
width: 400%;
left: 0;
z-index: 4;
opacity: 1;
transiton-property: opacity,bottom;
transition-duration: .4s,.4s;
animation-name: move2;
animation-duration: 160s;
animation-fill-mode: backwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes move1 {
100%{
background-position: 100% 0;
}
}
@keyframes move2 {
100%{
background-position: -100% 0;
}
}
imgbox.php
<style>.header-info::before{display: none !important;opacity: 0 !important;}</style>
<div id="banner_wave_1"></div><div id="banner_wave_2"></div>
下拉箭头
imgbox.php
echo bgvideo(); //BGVideo
?>
<!-- 首页下拉箭头 -->
<div class="headertop-down faa-float animated" onclick="headertop_down()"><span><i class="fa fa-chevron-down" aria-hidden="true"></i></span></div>
<!-- 首页下拉箭头END -->
{1}
style.css
.headertop-bar::after {
content: '';
width: 150%;
height: 4.375rem;
background: #fff;
left: -25%;
bottom: -2.875rem;
border-radius: 100%;
position: absolute;
z-index: 4;
}
.headertop-down {
position: absolute;
bottom: 50px;
left: 50%;
cursor: pointer;
z-index: 5;
}
@media (max-width: 860px) {
.headertop-down {
display: none
}
}
.headertop-down i {
font-size: 28px;
color: #fff;
-ms-transform: scale(1.5,1); /* IE 9 */
-webkit-transform: scale(1.5,1); /* Safari */
transform: scale(1.5,1); /* Standard syntax */
}
sakura_app.js
function headertop_down() {
var coverOffset = $('#content').offset().top;
$('html,body').animate({
scrollTop: coverOffset
},
600);
}
是重邮的兄弟!
哈喽你好呀!你是南邮的吧我刚看了你的blog {{weixiao}}
{{weixiao}} 可以,好看 {{dianzan}}
哈哈哈哈,谢谢!❀