自己的博客

1、一定要使用reset.css

2、背景图

没有内容的话，就不会有背景

fixed可以固定显示

仔细想想，背景图，应该是放在body下的。

然后app组件下，加个半透明的背景色

这样就能很好的实现背景

同时，背景太清晰了，必须模糊一点

filter: blur(2px);

背景图不能放body下

应该放在app组件下

不然刷新页面的时候，会把清晰的背景图显现出来。

整体CSS

<template>
  <div id="app">
    <div id="container">
      <keep-alive>
        <router-view/>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>

  #app{
    background: url("https://blog-1252736437.cos.ap-shanghai.myqcloud.com/background.png") fixed no-repeat;
    background-size: 100%;
    filter: blur(2px);
  }

  #container{
    width: 100%;
    height: 1500px;
    background-color: rgba(255,255,255,0.8);
  }
</style>

图片要改成

repeat-y

不然缩放之后，下面就没背景了

x轴不需要

有个问题

这个属性，会让这个div下所有子元素都模糊。所以完美的做法是通过after伪类去搞

需要z-index+position去使得after档住父元素

z-index要设置为负数，不然档住子元素了

#app{
    position: relative;
    z-index: -2;
  }

  #app::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    background: url("https://blog-1252736437.cos.ap-shanghai.myqcloud.com/background.png") fixed repeat-y;
    background-size: 100%;
    filter: blur(2px);
    z-index: -1;
  }

after是个很奇妙的东西

https://blog.csdn.net/csu_passer/article/details/78406702

after不行

给app设置了-2，after-1。现在页面默认body是0

那么最上层的就是body了。app container里面的东西是无法交互的！

将contaner的层级提到最高，背景全都不见了？？？？为啥

父元素高度为0，因为孩子都浮动了，坍塌

给app显示赋值1500px

after有高度

但是所有常规的清楚浮动方法都无效了

不对。这个不是浮动了。

是因为absolute脱离的文档流，用清除浮动当然没有效果

<div class="container">
    
    <div class="bg">

    </div>    
    <div class="content">
        
    </div>

</div>

<style>

/*父元素宽100%，是根据body渲染的*/
 .container{
     width: 100%;
    
 }

/*bg width100% 根据contanier*/
/*height 100% 但是目前父元素高度是0*/
 .bg{
     width: 100%;
     height: 100%;
 }

/*现在才撑开父元素*/
.content{
    width: 100%;
    height: 1500px;
}

如果bg写在后面呢？

还是0。

没有办法的

所以，父元素的高度无法确定的情况下，没法设置模糊背景！

可以在父元素渲染玩之后，通过js代码设定bg的高度

但是vue里面，这种方法不行。。。算了不要背景了

用fixed即可。。。

把背景全都丢进fixed里面。很奇怪的。

因为fixed是一个特殊的potiton，他也脱离文档流，但是他和absolute不一样，他是相对于窗口的，所以他设置height100%的话，高度就是窗口高度

最终效果如下

<template>
  <div id="app">
    <div id="container">
      <home-header></home-header>
      <keep-alive>
        <router-view/>
      </keep-alive>
    </div>
    <div id="bg"></div>
  </div>
</template>

<script>
import HomeHeader from "./components/header/Header";
export default {
  name: 'App',
  components: {HomeHeader}
}
</script>

<style scoped>

  #app{
    width: 100%;
  }

  #container{
    width: 100%;
    height: 1500px;
    background-color: rgba(255,255,255,0.8);
  }

  #bg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("https://blog-1252736437.cos.ap-shanghai.myqcloud.com/background.png") fixed repeat-y;
    background-size: 100%;
    filter: blur(2px);
    z-index: -1;
  }
</style>

这样fixed高度100%了，有个坏处，如果contaniner里面的东西，还没到一个窗口大小呢？

footer就会跑上去了

footer position absolute botton 0 也没有用

他是根据窗口定位的。

所以出现滑动条的话，他就卡在中间了。

没法，所以以后的container，最小高度一定要比窗口大

为了不让缩放 发现min-width 也不起作用

可以对content只设置max - width

内容做成这样子，也算小响应式吧

起码iphone5没问题了

  @media screen and (min- 641px){
    .content{
      height: 1000px;
      width: 12rem;
      margin: 0 auto;
      background: #666;
    }
  }


  @media screen and (max- 640px){

    .content{
      height: 1000px;
      width: 100%;
      background: #eee;
    }

  }

给App下的container加一个min-height 90vh 即可

最小的高度都会有90vh了，如果大了可以自动增长，这样的话，就能保证背景和footer了

但是在iphone下，还是会有一点问题？

明明都不止一个屏幕的高度了呀

o对了！ 因为margin！！最后一个元素距离footer还有边距呢！

元素内部padding就好了

感觉要进行路由守卫，不然乱路由，

因为页面是根据路由参数渲染的，不守卫会有Bug

主要的难点就是如何上传文章/显示文章！

服务器URL，必须好好敲定....设计

因为使用了CssReset，所有的标签都没有样式了，要自己添加

用了marked，能正确转换了。。

但是转换出来的引用和代码标签.... 没有样式啊？

mark转换出来的东西，只有基础的标签而已.

果然，是需要去网上找样式的。。。

贼难找

找到了样式，不要高亮的话

一个办法，把需要的样式copy下来，再微调

高亮效果很差，很多颜色冲突，或者注释检测不到，还不如不高亮了

1、在node通过marked对markdown进行转换

2、使用外部的css样式进行渲染

这样就能引入外部样式，又不影响全局了

marked的用法

const marked = require('marked');
const highlight = require('highlight.js');
const fs = require('fs');

 fs.readFile('test.md',(err,data) =>{

     if(err){
         console.log(err);
     }else{
         fs.writeFile('target.txt',marked(data.toString()),err=>{
             if(err){
                 console.log(err)
             }
         });
     }

 });


就是把内容转换成对应的html
marked(data.toString())

完成了，整个适配很不错

手机也能很好看的查看

电脑首页