前言

之前想了很久做个人网站但是只能做个静态的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);
 }