网站改版_关于fly63前端网站改版说明

为进一步提高用户体验，完善相关功能，帮助大家更好的学习使用，fly63前端网新增了如下功能：

添加黑夜模式的切换
栏目页添加分享功能：qq，微博，链接复制，手机二维码预览
网页UI调整：模块添加圆角呈现方式，取消分割线，主色调修改
新增文章目录功能，更方便大家阅读

黑夜模式的实现方式

目前很多app，网页都支持黑夜模式，让网站看上去比较暗，亮度较低，这样对视力有一定的保护，更方便晚上阅读使用。这里就简单说下本网站的实现方式：网页右侧添加切换按钮，每次切换后都会存储cookie（需要注意切换时页面的闪烁），这样页面刷新，或者用户下次进来都会显示对应的模式。目前没做自动转换的功能，比如到了晚上多少点就默认显示黑夜模式。下面nuxt.js部分代码说明：

nuxt.config.js：

module.exports = {
  head: {
    script: [
     {
        type: 'text/javascript',
        innerhtml: `
          //黑暗模式,防止页面闪烁,目前是添加在这里的
          var getCookie = function(name) {
            let str = document.cookie;
            let arr = str.split('; ');
            for (let i = 0; i < arr.length; i++) {
              let newArr = arr[i].split('=');
              if (newArr[0] === name) {
                return newArr[1];
              }
            }
          };
          let mode = getComputedStyle(document.documentElement).getPropertyValue('content');
          if(getCookie('dark_method')=='dark' || mode =='dark'){
            document.getElementsByTagName('html')[0].setAttribute('class','page-dark-mode')
          };
        `
     },
}

公共css：

/*黑夜模式*/
@media (prefers-color-scheme: light) {
  html {
    content: "light";
  }
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
  html{
    content: "dark";
  }
}
.page-dark-mode body{
  background: #5d5d5d;
}
/* 其他 */

组件html：

<div class="flexbtn" v-if="isDark=='dark'" @click="toDark('light')">
      <svg style="width: 28px;height: 28px; top: 7px;left: 7px;" t="1593158948691" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8171" width="32" height="32"><path d="M270.933333 723.2l-89.6 89.6c-8.533333 8.533333-8.533333 21.333333 0 29.866667 8.533333 8.533333 21.333333 8.533333 29.866667 0l89.6-89.6c8.533333-8.533333 8.533333-21.333333 0-29.866667C292.266667 714.666667 279.466667 714.666667 270.933333 723.2zM213.333333 512c0-12.8-8.533333-21.333333-21.333333-21.333333L64 490.666667c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333333l128 0C204.8 533.333333 213.333333 524.8 213.333333 512zM753.066667 300.8l89.6-89.6c8.533333-8.533333 8.533333-21.333333 0-29.866667-8.533333-8.533333-21.333333-8.533333-29.866667 0l-89.6 89.6c-8.533333 8.533333-8.533333 21.333333 0 29.866667C731.733333 309.333333 744.533333 309.333333 753.066667 300.8zM512 213.333333c12.8 0 21.333333-8.533333 21.333333-21.333333L533.333333 64c0-12.8-8.533333-21.333333-21.333333-21.333333s-21.333333 8.533333-21.333333 21.333333l0 128C490.666667 204.8 499.2 213.333333 512 213.333333zM270.933333 300.8c8.533333 8.533333 21.333333 8.533333 29.866667 0 8.533333-8.533333 8.533333-21.333333 0-29.866667L211.2 179.2c-8.533333-8.533333-21.333333-8.533333-29.866667 0-8.533333 8.533333-8.533333 21.333333 0 29.866667L270.933333 300.8zM960 490.666667l-128 0c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333333l128 0c12.8 0 21.333333-8.533333 21.333333-21.333333S972.8 490.666667 960 490.666667zM753.066667 723.2c-8.533333-8.533333-21.333333-8.533333-29.866667 0-8.533333 8.533333-8.533333 21.333333 0 29.866667l89.6 89.6c8.533333 8.533333 21.333333 8.533333 29.866667 0 8.533333-8.533333 8.533333-21.333333 0-29.866667L753.066667 723.2zM512 256c-140.8 0-256 115.2-256 256 0 140.8 115.2 256 256 256s256-115.2 256-256C768 371.2 652.8 256 512 256zM512 725.333333c-117.333333 0-213.333333-96-213.333333-213.333333 0-117.333333 96-213.333333 213.333333-213.333333s213.333333 96 213.333333 213.333333C725.333333 629.333333 629.333333 725.333333 512 725.333333zM512 810.666667c-12.8 0-21.333333 8.533333-21.333333 21.333333l0 128c0 12.8 8.533333 21.333333 21.333333 21.333333s21.333333-8.533333 21.333333-21.333333l0-128C533.333333 819.2 524.8 810.666667 512 810.666667z" p-id="8172" fill="#8a8a8a"></path></svg>
</div>
<div class="flexbtn"  title="黑暗模式" v-else-if="isDark=='light'" @click="toDark('dark')">
      <svg style="width: 34px;height: 34px; top: 3px;left: 3px;" t="1593158851497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7129" width="32" height="32"><path d="M563.7 766.7H457c-9.3 0-16.8 7.5-16.8 16.8v1.2c0 9.3 7.5 16.8 16.8 16.8h106.7c9.3 0 16.8-7.5 16.8-16.8v-1.2c0-9.3-7.5-16.8-16.8-16.8zM532 829.8h-43.2c-9.4 0-17.1 7.6-17.1 17.1v0.6c0 9.4 7.6 17.1 17.1 17.1H532c9.4 0 17.1-7.6 17.1-17.1v-0.6c0-9.4-7.7-17.1-17.1-17.1zM510.4 252.6h0.6c9.4 0 17.1-7.6 17.1-17.1v-43.2c0-9.4-7.6-17.1-17.1-17.1h-0.6c-9.4 0-17.1 7.6-17.1 17.1v43.2c0 9.4 7.7 17.1 17.1 17.1zM273.1 488.5l-42.9-5.4c-9.4-1.2-17.9 5.4-19.1 14.8l-0.1 0.5c-1.2 9.4 5.4 17.9 14.8 19.1l42.9 5.4c9.4 1.2 17.9-5.4 19.1-14.8l0.1-0.6c1.2-9.3-5.4-17.9-14.8-19zM812.8 497.9c-1.2-9.4-9.7-16-19.1-14.8l-42.9 5.4c-9.4 1.2-16 9.7-14.8 19.1l0.1 0.6c1.2 9.4 9.7 16 19.1 14.8l42.9-5.4c9.4-1.2 16-9.7 14.8-19.1l-0.1-0.6zM339.1 344.6c6-7.3 5-18-2.2-24L303.6 293c-7.3-6-18-5-24 2.2l-0.4 0.4c-6 7.3-5 18 2.2 24l33.3 27.6c7.3 6 18 5 24-2.2l0.4-0.4zM754.7 295.6l-0.4-0.4c-6-7.3-16.8-8.3-24-2.2L697 320.6c-7.3 6-8.3 16.8-2.2 24l0.4 0.4c6 7.3 16.8 8.3 24 2.2l33.3-27.6c7.2-5.9 8.2-16.7 2.2-24zM510.7 302.8c-100.4 0-182.1 81.7-182.1 182.1 0 36.1 25.3 89.4 54.7 151.2 15.8 33.2 32.1 67.6 43.9 98.7v0.7h166.4l0.5 0.2c11-27.2 25.5-57.8 39.5-87.4C664.1 583.9 693 523 693 484.9c-0.2-100.4-81.9-182.1-182.3-182.1z m91.4 330.7C591.5 656 580.6 679 571 700.9H450.9c-10.9-26.1-23.7-53.2-36.3-79.7-25.2-53.1-51.3-108-51.3-136.3 0-81.3 66.1-147.4 147.4-147.4s147.4 66.1 147.4 147.4c0 30.3-28.5 90.4-56 148.6z" fill="#8a8a8a" p-id="7130"></path></svg>
</div>

js操作：

toDark(str){
      this.$setCookie('dark_method',str) //cookie的设置这里没写了，注意设置路径为/就可以了
      let dark = str=='dark'?'page-dark-mode':''
      document.getElementsByTagName('html')[0].setAttribute('class',dark)
},

网页分享功能

分享功能可以很快捷的把文章分享到QQ、微博、微信上，更方便内容的传播推广，之前使用的是百度分享，现在已取消，代码实现如下：

share.vue组件：

<!--分享-->
<template><span class="shareBtn">
  <span @click="showCont()" class="sharesvg">
    <svg t="1591932730937" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8840" width="200" height="200">
    	<path d="M812 662c-41.6 0-79.3 17-106.5 44.4L473.1 572.2c5.7-19.1 8.9-39.3 8.9-60.2 0-19.6-2.9-38.5-7.9-56.5L644 357.4c33 39.5 82.5 64.6 138 64.6 99.4 0 180-80.6 180-180S881.4 62 782 62s-180 80.6-180 180c0 11.6 1.2 22.9 3.3 33.8L431.8 376c-38.5-45.2-95.8-74-159.8-74-116 0-210 94-210 210s94 210 210 210c62.7 0 118.8-27.6 157.3-71.2l235.3 135.8c-1.4 8.3-2.6 16.6-2.6 25.3 0 82.8 67.2 150 150 150s150-67.2 150-150S894.8 662 812 662z m-30-510c49.7 0 90 40.3 90 90s-40.3 90-90 90-90-40.3-90-90 40.3-90 90-90zM272 632c-66.3 0-120-53.7-120-120s53.7-120 120-120 120 53.7 120 120-53.7 120-120 120z m540 240c-33.1 0-60-26.9-60-60s26.9-60 60-60 60 26.9 60 60-26.9 60-60 60z" fill="#8590a6" p-id="8841"></path>
    </svg>
    <span>分享</span>
  </span>
  <div class="shareContent" id="shareContent" style="visibility: hidden;opacity:0;">
    <span class="top" id="shareTop"></span>
    <div class="shli" @click="toShare(1)">复制链接</div>
    <div class="shli" @click="toShare(2)">新浪微博</div>
    <div class="shli" @click="toShare(3)">QQ 好友</div>
    <div class="shewm">
      <p>扫一扫分享</p>
      <div id="ewm_div_code"></div>
    </div>
  </div>
</span></template>

<script>
export default {
  props: ['title','summary','pics','pos'],//数据
  data(){

  },
  methods:{
    showCont(){
      var cont=document.getElementById('shareContent');
      var visibility=cont.style.visibility;
      if(visibility!="hidden"){//隐藏
        this.shareTxt="分享";
        cont.style.visibility='hidden';
        cont.style.opacity=0;
        return;
      }
      this.shareTxt="收起";
      cont.style.visibility='initial';
      cont.style.opacity=1;
      var ewmdiv=document.getElementById("ewm_div_code")
      if(ewmdiv){
        ewmdiv.innerHTML='';
        this.$addJs(window.QRCode,"/qrcode.min.js",function(){
          if(!!window.QRCode){
            new QRCode(ewmdiv, {
              text: window.location.href,
              width: 120,
              height: 120,
              colorDark: "#555555",
              colorLight: "#ffffff",
              correctLevel: QRCode.CorrectLevel.H
            });
          }
        });
      }
    },
    toShare(type){//去分享
    	var param = {
    		url:window.location.href,// 分享的链接[必选]
    		title:this.title,// 分享链接的标题[必选]
    		summary:this.summary,//分享链接的内容概述[可选]
    		pics:'',//分享内容的封面图[可选]
    	};
    	switch(type){
    		case 1://复制链接
                        var text=param.title+param.url;
    			this.copyTxt(text,function(){
    			    alert("复制成功!");
    			});
    			break;
    		case 2://分享微博
    			var parmStr=`?url=${param.url}&title=${param.title}&pics=${param.pics}&summary=${param.summary}`;
    			var targetUrl = "http://service.weibo.com/share/share.php"+parmStr;
    			this.openwindow(targetUrl, '分享微博', 720,520);
    			break;
    		case 3://分享QQ好友
    			var parmStr=`?url=${param.url}&title=${param.title}&pics=${param.pics}&summary=${param.summary}`;
    			var targetUrl = "http://connect.qq.com/widget/shareqq/index.html"+parmStr;
    			this.openwindow(targetUrl, '分享QQ好友', 720,520);
    			break;
      }
    },
    copyTxt(text, fn) { //浏览器文本复制
      if (typeof document.execCommand !== 'function') {
        return
      }
      var dom = document.createElement('textarea')
      dom.value = text
      dom.setAttribute('style', 'display: block;width: 1px;height: 1px;')
      document.body.appendChild(dom)
      dom.select()
      var result = document.execCommand('copy')
      document.body.removeChild(dom)
      if (result) {
        typeof fn === 'function' && fn()
        return
      }
      if (typeof document.createRange !== 'function') {
        return
      }
      var range = document.createRange()
      var div = document.createElement('div')
      div.innerHTML = text
      div.setAttribute('style', 'height: 1px;fontSize: 1px;overflow: hidden;')
      document.body.appendChild(div)
      range.selectNode(div)
      var selection = window.getSelection()
      console.log(selection)
      if (selection.rangeCount > 0) {
        selection.removeAllRanges()
      }
      selection.addRange(range)
      document.execCommand('copy')
      typeof fn === 'function' && fn()
    },
    openwindow(url,name,iWidth,iHeight){//window.open打开
      var iTop = (window.screen.height-30-iHeight)/2;//获得窗口的垂直位置;
      var iLeft = (window.screen.width-10-iWidth)/2;//获得窗口的水平位置;
      window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
    },
    //end
  },
}
</script>

网页UI修改说明

圆角的呈现好处：

圆角代表友好、亲和力；而卡片模块化的布局更为清晰、有效、整洁。

备注:目前已取消圆角样式了，虽然圆角好处较多，但还是希望网站整体给人一种归整，严肃，技术的感觉

为什么取消分割线？

在以往的UI见面中，基本都使用分割线来划分模块，但是目前的UI趋势更注重内容本身，更简约，使用传统的分隔线方式就略显多余。所有网站只保留了部分分割线，大部分使用留白来控制间距大小，同样可以清晰的划分模块层级，让界面看起来也更加透气、富有张力。

主色调的调整

界面统一使用浅灰色背景，模块使用白色底区分，这样使界面看上去更干净，简洁。

添加文章目录

一般而言，对于一些文章内容层次比较深，添加文章目录有很好的索引效果，更清晰明了的知道内容结构。目前网站已新增文章目录功能，针对浏览器屏幕宽度大于1755px生效，默认悬浮在右上角。目录只针对h标签生成，如果文章中无h标签，将不会生成。

使用的开源js：katelog.min.js。部分代码如下：

<!--网站内容目录-->
<template><div class="catalog_box" v-show="show">
  <!-- 目录容器 -->
  <div class="tit">文章目录</div>
  <div id="catalog"></div>
</div></template>

<script>
export default {
  props: ['id','content'],//文章ID,文章内容
  data(){
    return{
      show:false,
    }
  },
  mounted() {
    if(this.content && this.id && document.body.clientWidth>1755){
      this.setKatelog();
    }
  },
  methods:{
    setKatelog() {
      var sel=['h1','h2','h3','h4','h5'];
      var currsel=[];
      for(var i in sel){
      	if(this.content.indexOf('<'+sel[i])>-1){
      		currsel.push(sel[i])
      	}
      }
      if(currsel.length==0){
      	return;
      }
      this.$addJs(window.katelog,"/katelog.min.js",()=>{
        if(!!window.katelog){
          new katelog({
              contentEl: this.id,
              catelogEl: 'catalog',
              linkClass: 'catelog-link',
              linkActiveClass: 'catelog-link-active',
              supplyTop: 20,
              selector: currsel,
              //active: function (el) {}
          });
          this.show=true
        }
      });
    },
  },
}
</script>

其它说明

1、未添加的功能：评论，会员，文章发布等。主要是个人备案，原则上是不支持这些的，如果有优质内容希望大家能通过邮箱进行投稿，有什么建议也可通过网站底部的qq联系站长。

2、本站内容仅用于个人学习交流使用，请勿用于任何商业用途。里面部分内容属于站长原创，同样也转载了部分优质内容（一般都会标明来源出处），如有不正确或违规侵权的请联系站长处理。

链接: https://www.fly63.com/article/detial/9418