六六丶
(共81篇)
搜索到
81
篇与
六六丶
的结果
-
『笔记』JavaScript基础学习笔记 0 JS简介JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向 对象、命令式、声明式、函数式 编程范式。JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。JS基础语法从上至下按行顺序执行<script type="text/javascript"> alert("警告"); //弹出警告框 document.write("在文档输出内容"); //在body中输出内容 document：文档 console.log("控制台输出内容"); //向控制台中输出内容 </script>JS编写的位置1、可以直接编写到标签的onclick属性中<!--可以直接编写到标签的onclick属性中 -当点击该属性时，js代码才会执行 --> <button onclick="alert('点击执行')"> <!--可以直接编写到超链接的href属性中 -当点击该超链接时，js代码才会执行 --> <a herf="javascript:alert('超链接内的JS代码');">可以点击的超链接</a> <a herf="javascript:;">不可点击的超链接</a>2、可以将JS编写到script标签中<script> alert("script标签中的代码") </script>3、可以将js代码编写到外部js文件中，再通过script标签引入<script type="text/javascript" src="js/script.js"></script>注意： script标签一旦用于引入外部文件了，就不能再编写代码，即使写了浏览器也会忽略 如果需要，可以再创建一个新的script标签用于编写内部代码JS基本语法<script type="text/javascript"> /* 多行注释：注释的内容不会被执行，但是在源代码中查看 可以通过注释来对代码进行一些简单的调试 */ // 单行注释，只注释//后的内容，换行即无效 /* 1、JS中严格区分大小写 2、JS中每一条语句以分号（;）结尾 -如果不写分号，浏览器会自动补齐，但是会消耗系统资源 而且有些时候会加错分号导致错误，所以在开发中分号必须写 3、JS中会忽略多个空格和换行 */ </script>字面量和变量字面量：都是一些不可改变的值 比如：1 2 3 4 等 字面量都是可以直接使用，但是一般不会直接使用字面量变量：可以用来保存字面量，变量的值是可以改变的 -变量更加方便使用，开发中通常通过变量保存一个字面量 -可以通过变量对字面量进行描述，例如 var age = 18;声明变量：在js中使用var关键字来声明一个变量// 声明变量 var a; // 为变量赋值 a = 123; //声明与赋值同时进行 var a = 123; 标识符在js中所有可以自主命名的都可以称为标识符例如：变量名、函数名、属性名都属于标识符命名一个标识符时需要遵守以下规则 1、标识符中可以含有字母、数字、_、$ 2、标识符不能以数字开头 3、标识符不能使用ES中的关键字或保留字 4、一般使用驼峰命名法：首字母小写，每个单词开头字母大写，其他字母小写。 例如：xxxYyyZzz JS底层保存标识符时是采用的Unicode编码，所以理论上所有utf-8中含有的内容都可以作为标识符数据类型数据类型指的就是字面量的类型在JS中一共有六种数据类型{alert type="success"}String 字符串Number 数字Boolean 布尔值Null 空值Undefined 未定义Object 对象{/alert}其中String、Number、Boolean、Null、Undefine属于基本数据类型，而Object属于引用数据类型一、String字符串在JS中字符串需要使用引号引起来使用单引号或者双引号都可以，但是不能混着用引号不能嵌套：双引号内不能放双引号，单引号内不能放单引号在字符串中可以使用作为转义字符{alert type="info"}当表示一些特殊符号时可以使用进行转义" 表示 "n 表示换行t 制表符\ 表示\{/alert}var str = "hello"; str = '我说："你好"'; alert(str); //输出变量值，值为 我说：“你好” alert("str"); //输出字面量str，值为 str 二、Number数字在JS中所有的数字都是Number类型，包括整数和浮点数（小数点后的数）JS中可以便是数字的最大值：Number.MAX_VALUE如果使用Number表示的数字超过了最大值，则会返回一个Infinity{alert type="warning"}Infinity表示正无穷-Infinity表示负无穷{/alert}使用typeof检查Infinity会返回Number大于0的最小值为：Number.Min_VALUENaN是一个特殊的数字，表示Not A Number使用typeof检查NaN也会返回Number//数字123 var a = 123; //字符串123 var b= "123"; 可以使用typeof检查变量类型 -语法：typeof 变量 -检查字符串时会返回string -检查数值时会返回number console.log(typeof a); console.log(typeof b);{callout color="#ff0000"}在JS中整数的运算基本可以保证精确如果使用JS进行浮点元素运算，可能得到一个不精确的结果{/callout}var a = 1; var b = 2; var c = a+b; console.log(c);三、Boolean布尔值布尔值只有两个，主要用来做逻辑判断{alert type="success"}true -表示真false -表示假{/alert}四、Null和UndefinedNull类型的值只有一个，就是Null{alert type="success"} null这个值专门用来表示一个为空的对象使用typeof检查null值时，会返回object{/alert}Undefined类型的值只有一个，就是undefined{alert type="success"} 当声明一个变量，但是不给变量赋值时，他的值就是undefined使用typeof检查undefined值时，会返回undefined{/alert}强制类型转换将一个数据类型强制转换为其他数据类型类型转换主要指，将其他数据类型转换为String Number Boolean一、将其他数值类型转换为String{alert type="success"} 1、调用被转换数据类型的toString()方法 - 该方法不会影响到原变量，它会将转换的结果返回 - Null和Undefined两个值没有toString方法，会报错 {/alert}var a = 123; a.toString(); a = a.toString(); console.log(a); console.log(typeof a);{alert type="success"} 2、调用String()函数，并将被转换的数据作为参数传递给函数 - 使用String()函数做强制类型转换时， 对于Number和Boolean实际上就是调用的toString()方法 对于null和undefined就不会调用toString()方法 会将null直接转换为"null",将undefined直接转换为"undefined"{/alert}var a = 123; a = String(a); console.log(a); console.log(typeof a);二、将其他数值类型转换为Number1、使用Number()函数{alert type="success"} 字符串转换为数字 ① 如果是纯数字的字符串，直接转换为数字 ② 如果字符串中有非数字内容，则转换为NaN ③ 如果是一个空串或者是一个全是空格的字符串，则转换为0{/alert}var a = "123"; var a = "abc"; var a = " "; a = Number(a); console.log(a); console.log(typeof a);{alert type="success"} 布尔值转换为数字 ① true 转为 1 ② false 转为 0{/alert}var a = true; var a = false; a = Number(a); console.log(a); console.log(typeof a);{alert type="success"} null转换为数字时为 0undefined转换为数字时为 NaN{/alert}var a = null; var b = undefined; a = Number(a); b = Number(b); console.log(a); console.log(typeof a); console.log(b); console.log(typeof b);2、字符串专用转换方法{alert type="success"} parseInt()将一个字符串转换为一个整数 parseInt()可以将一个字符串中的有效整数内容取出来，然后转换为NumberparseFloaf()将一个字符串转换为一个浮点数 parseFloaf()可以将一个字符串中的有效浮点数内容取出来，然后转换为Number如果对非String使用parseInt()和parseFloaf()，会先将其转换为String再换为Number{/alert}var a = "123px"; var b = "123.321px"; a = parseInt(a); b = parseFloaf(b); console.log(a); console.log(typeof a); console.log(b); console.log(typeof b); 其他进制数字 {card-describe title="在JS中"}如果需要表示16进制的数字，则需要以0x开头如果需要表示8进制的数字，则需要以0开头如果需要表示2进制的数字，则需要以0b开头（某些浏览器会不支持）可以在parseInt()中传递一个第二个参数，用来指定数字的进制{/card-describe}var a = "070"; a = parseInt(a,8); // 制定解析为8进制 console.log(a); console.log(typeof a);三、将其他数值类型转换为Boolean1、 直接使用Boolean()函数{alert type="success"}数字转Boolean，除了0和NaN，其余都是true字符串转Boolean，除了空字符串都是truenull和undefined转Boolean都为false对象也会转换为true{/alert}var a = 0; var b = " "; var c = null; var c = undefined; a = Boolean(a); b = Boolean(b); c = Boolean(c); console.log(a); console.log(b); console.log(c); console.log(typeof a);2、可以为任意一个数据类型取两次反!!，将其转换为布尔值var a = "hello"; var a = !!a; console.log(a); // 输出为true console.log(typeof a); //类型为Boolean布尔值运算符运算符也叫操作符，可以对一个或多个值进行运算，并获取运算结果tpyeof就是运算符，可以用来获得一个值的类型tpyeof会将该值的类型以字符串的形式返回，如number、string、boolean、undefined、object等var a = 123; var result = typeof a; console.log(result); console.log(typeof a);{nextPage/}一、算数运算符（1）当对非Number类型的值进行运算时，会将这些值转换为Number，然后再进行运算（2）任何数和NaN进行运算都会输出NaN（3）+ 可以对两个值进行加法运算，并将结果返回{alert type="success"} ① 如果对两个字符串进行加法运算，会将两个字符串拼成一个字符串，然后再将结果返回 ② 任何值和字符串做加法运算，都会现转换为字符串然后再和字符串做拼串操作 ③ 为任意的数据类型加一个空字符串""即可将其转换为String，这是一种隐式的类型转换，由浏览器自动完成，实际也是调用的String() ④ 加法从左向右运算，会根据数据类型进行转换后再运算 {/alert}var a = 123; a + 1; var result = a + true; // true会转换为1，输出为124 var result = a + NaN; // 输出为NaN var result = "I" + "Love" + "You"; // 输出为ILoveYou var result = 123 + "1"; // 输出为1231 console.log(result); console.log(typeof result); console.log("a=" + a); // 输出为a=124(4) - 可以对两个值进行减法运算，并将结果返回(5) * 可以对两个值进行乘法运算，并将结果返回(6) / 可以对两个值进行除法运算，并将结果返回任何值做 - * / 运算时都会自动转换为Number可以通过为一个值 -0 *1 /1 将其转换为Number，原理和Number()函数一样var a = "123"; var b = a - 0; console.log(b); console.log(typeof b);(7) % 取模运算（取余数）var a = 9; var b = a % 3; var c = a % 4; var d = a % 5; console.log(b); // 输出9/3的余数为0 console.log(c); // 输出9/4的余数为1 console.log(d); // 输出9/5的余数为4 console.log(typeof b);二、一元运算符一元运算符，只需要一个操作数(1) + 正号正号不会对数字产生任何影响(2) - 负号负号可以对数字进行负号的取反(3) 对于非Number类型的值{alert type="success"}会先将其转换为Number，然后再运算可以对一个其他的数据类型使用 + 来将其转换为Number，原理和Number()函数一样{/alert}var a = true; var b = -a; console.log(b); // true转换为1，输出为-1 console.log(typeof b);三、自增和自减(1) 自增 ++ {alert type="success"}通过使用自增可以使变量在自身的基础上增加 1一个变量自增以后，原变量的值会立即自增 1自增分为两种： 后++ （a++）和 前++ （++a）{/alert}var a = 1; a++; console.log(a); // 输出为2 console.log(typeof a);无论是 前++ 还是 后++ ，都会立即使原变量的值自增1 不同的是a++和++a的值不一样a++ 的值等于原变量的值（自增前的值）++a 的值等于原变量的新值（自增后的值）var a = 1; console.log(a++) ; // 输出为1 console.log(++a) ; // 输出为2 // a++为1，++a是在a++的基础上自增所以为3，a相当于原变量a已经在自身基础上自增两次所以也为3 var b = a++ + ++a +a ; console.log("b = "+b) ; // 输出为1+3+3=7(1) 自减 -- {alert type="success"}通过使用自减可以使变量在自身的基础上减少 1一个变量自减以后，原变量的值会立即自减 1自减分为两种： 后-- （a--）和 前-- （--a）{/alert}var a = 10; a--; console.log(a); // 输出为9 console.log(typeof a);无论是 前-- 还是 后-- ，都会立即使原变量的值自减 1 不同的是a--和--a的值不一样a-- 的值等于原变量的值（自减前的值）--a 的值等于原变量的新值（自减后的值）var a = 10; console.log(a--) ; // 输出为10 console.log(--a) ; // 输出为9 // a--为10，--a是在a--的基础上自减所以为8，a相当于原变量a已经在自身基础上自减两次所以也为8 var b = a-- + --a +a ; console.log("b = "+b) ; // 输出为10+8+8=26练习：var n1=10, n2=20; var n = n1++; // n1 = 11 n1++ = 10 console.log('n='+n); // 10 console.log('n1='+n1); // 11 n = ++n1; // n1 = 12 ++n1 = 12 console.log('n='+n); // 12 console.log('n1='+n1); // 12 n = n2--; // n2 = 19 n2-- = 20 console.log('n='+n); // 20 console.log('n1='+n2); // 19 n = --n2; // n2 = 18 --n2 = 18 console.log('n='+n); // 18 console.log('n1='+n2); // 18四、逻辑运算符{callout color="#00fbff"} 布尔值的逻辑运算 {/callout}JS中提供了三种运算符(1) ! 非，可以用来对一个值进行 非 运算{alert type="success"}非运算就是对一个布尔值Boolean进行取反操作true变false，false变true{/alert}var a = true; a = !a; console.log(a); // 输出为false{alert type="success"}如果对一个值进行两次取反，值不会变如果对非布尔值进行非运算，会先将其转换为布尔值再进行取反 可以为任意一个数据类型取两次反!!将其转换为布尔值，可以用来将其他数据类型转换为布尔值{/alert}var a = "hello"; var a = !!a; console.log(a); // 输出为true console.log(typeof a); //类型为Boolean布尔值(2) && 与，可以对符号两侧的值进行 与 运算并返回结果{alert type="success"}两个值中只要有一个值为false就会返回false两个值都为true才会返回trueJS中如果第一个值为false，就不会检查第二个值，直接返回false如果两端的值都为true，返回true var a = true && true; console.log(a); // 输出为true 只要有一个false，都返回false var a = true && false; console.log(a); // 输出为false{/alert}(3) || 或，可以对符号两侧的值进行 或 运算并返回结果{alert type="success"}两个值都是false，则返回false两个值中只要有一个true，则返回trueJS中如果第一个值为true，就不会检查第二个值，直接返回true如果两端的值都为false，返回false var a = false || false; console.log(a); // 输出为false 只要有一个true，都返回true var a = true || false; console.log(a); // 输出为true{/alert}{callout color="#00fbff"} 非布尔值的 与 、 或 运算 {/callout}对非布尔值进行 与 、 或 运算时会先将其转换为布尔值，然后再运算，并且返回原值(1) && 与 运算：找false{alert type="success"}如果第一个值为true，则必然返回第二个值如果第一个值为false，则直接返回第一个值var a = 1 && 3; console.log(a); // 输出为3 var a = NaN && 0; console.log(a); // 输出为NaN{/alert}(2) || 或 运算：找true{alert type="success"}如果第一个值为true，则直接返回第一个值如果第一个值为false，则直接返回第二个值var a = 1 || 3; console.log(a); // 输出为1 var a = NaN || 0; console.log(a); // 输出为0{/alert}五、赋值运算符(1) = 可以将符号右侧的值赋值给左侧的变量var a = 3; console.log(a); // 输出为3(2) += 可以将符号右侧的值相加后再赋值给左侧的变量(3) -= 可以将符号右侧的值相减后再赋值给左侧的变量(4) *= 可以将符号右侧的值相乘后再赋值给左侧的变量(5) /= 可以将符号右侧的值相除后再赋值给左侧的变量(6) %= 可以将符号右侧的值取模（取余数）后再赋值给左侧的变量var a = 10; a += 5; // 等价于a = a + 5 输出为15 a -= 5; // 等价于a = a - 5 输出为5 a *= 5; // 等价于a = a * 5 输出为50 a /= 5; // 等价于a = a / 5 输出为2 a %= 5; // 等价于a = a % 5 取模（取余数）输出为0 console.log(a); 六、关系运算符通过关系运算符可以比较两个值之间的大小关系{alert type="success"}如果关系成立会返回true，如果关系不成立则返回false对于非数字进行比较时，会将其转换为数字再进行比较 任何值和NaN比较都是false如果符号两侧都是字符串时，不会将其转换为数字进行比较，而会比较两个字符串的Unicode编码 比较字符编码时会一位一位进行比较，如果两位一样则比较下一位，第一位与第一位比，第二位于第二位比，以此类推console.log( "a" > "b"); // 输出false console.log( "abc" > "aa"); // 输出true{/alert}（1） > 大于号{alert type="info"}判断符号左侧的值是否大于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 > 5; //返回true a = 5 > 5; //返回false a = 5 > 10; //返回false console.log(a); （2） >= 大于等于号{alert type="info"}判断符号左侧的值是否小于 或 等于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 >= 5; //返回true a = 5 >= 5; //返回true a = 5 >= 10; //返回false console.log(a); （3） < 小于号{alert type="info"}判断符号左侧的值是否大于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 < 5; //返回false a = 5 < 5; //返回false a = 5 < 10; //返回true console.log(a); （4） <= 小于等于号{alert type="info"}判断符号左侧的值是否小于 或 等于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 <= 5; //返回false a = 5 <= 5; //返回true a = 5 <= 10; //返回true console.log(a); Unicode编码 在JS中的字符串中使用转义字符输入Unicode编码\u四位编码 数字为16进制console.log( "\u2620"); // 输出 ☠ 在网页中使用Unicode编码&#编码 数字为10进制，必须先从16进制转换为10进制<h1 style="font-size: 50px;">☠</h1> // 输出 ☠ 七、相等运算符(1) == 相等运算相等运算符用来比较两个值是否相等，相等返回true，否则返回false{alert type="success"}当使用 == 比较两个值时，如果两个值类型不同，则会自动转换为同一类型，然后再进行比较undefined 衍生自 null，所以这两个值比较时会返回trueNaN 不和任何值相等，包括它本身可以通过isNaN()函数来判断一个值是否是NaN 如果该值是NaN则返回true，否则返回false{/alert}console.log( 1 == 1 ); // 输出true var a = 10 console.log( a == 4 ); // 输出false console.log( "1" == 1 ); // 输出true console.log( null == 0 ); // 输出false console.log( undefined == null ); // 输出true console.log( NaN == NaN ); // 输出false var b = NaN; console.log(isNaN(b)); // 输出true(2) != 不相等运算相等运算符用来比较两个值是否不相等，不相等返回true，否则返回false{alert type="success"}当使用 != 比较两个值时，如果两个值类型不同，则会自动转换为同一类型，然后再进行比较 {/alert}console.log( 2 != 1 ); // 输出true var a = 4 console.log( a != 4 ); // 输出false console.log( "1" != 1 ); // 输出false(3) === 全等运算相等运算符用来比较两个值是否全等，全等返回true，否则返回false{alert type="success"}当使用 === 比较两个值时，如果两个值类型不同，则直接返回false{/alert}console.log( 1 === 1 ); // 输出true console.log( "1" === 1 ); // 输出false(4) !== 不全等运算相等运算符用来比较两个值是否不全等，不全等返回true，否则返回false{alert type="success"}当使用 !== 比较两个值时，如果两个值类型不同，则直接返回true{/alert}console.log( 1 !== 1 ); // 输出false console.log( "1" !== 1 ); // 输出true八、条件运算符条件运算符也叫三元运算符语法： 条件表达式?语句1:语句2条件运算符在执行时，首先对条件表达式进行求值 如果该值为true则执行语句1并返回执行结果，否则执行语句2并返回执行结果 如果条件表达式的求值结果是一个非布尔值，会先将其转换为布尔值再执行下一步true?alert("语句1"):alert("语句1"); // 返回语句1 false?alert("语句1"):alert("语句1"); // 返回语句1 var a = 30; var b = 20; a > b ?alert("a大"):alert("b大"); // 返回a大 var a = 30; var b = 20; var c = 40; var max = a > b ? a : b; max = max > c ? max : c; var max = a > b ? (a >c ? a :c) : (b > c ? b : c) // 不推荐，不易阅读 console.log( "最大值max = "+max); // 谁大输出谁 "hello"?alert("语句1"):alert("语句1"); // hello转换为true然后执行输出语句1，逗号运算符使用 ， 可以分割多个语句，可以使用， 逗号运算符同时声明多个变量并进行赋值var a , b , c; var a=1 , b=2 , c=3; alert(b);九、运算符的优先级{alert type="success"}在JS中运算符也有优先级，比如：先乘除后加减在JS中有一个运算符的优先级标准表，优先级越高越优先计算，如果优先级相同，则从左向右计算{/alert}最后因为学习笔记较为详细，字数比较多，所以只好另开一篇继续（ 再水一篇文章 :@(装大款) ）
-
『原创』『教程』Typecho后台开关进入网站维护状态 前言因为经常捣鼓网站，有时候会直接在服务器上热更新，这样会导致用户体验很不好所以就想到了设置一个维护通知页面，告知访问的用户正在维护，防止用户因无法访问放弃访问本站。成果展示{tabs}{tabs-pane label="PC端展示"}{/tabs-pane}{tabs-pane label="PE端展示"}{/tabs-pane}{tabs-pane label="后台展示"}{/tabs-pane}{/tabs}教程分享本教程基于Joe主题，当然其他Typecho主题也可以使用，代码是固定的，但是方法是灵活的，期待您的灵感大爆发！一、添加后台开关在主题目录下的 functions.php 里添加以下代码（因为我引入了自定义配置文件，所以我是放在 public/custom.php 文件里的）隐藏内容，请前往内页查看详情二、添加全局跳转因为我一般更新都是整站屏蔽的，所以我这里是添加的全局跳转，直接在public/header.php顶部添加以下代码如果你只想某些页面跳转，比如只想跳转首页，你可以在index.php添加下面的代码隐藏内容，请前往内页查看详情三、上传维护页面下载下面的文件，上传到Typecho主程序的 根目录 ，记得把文件名改为 Maintain.html （区分大小写） 注意：不是 主题 根目录 注意：不是 主题 根目录 注意：不是 主题 根目录 隐藏内容，请前往内页查看详情到此就大功告成了，去后台打开全站维护后再访问你的网站试试吧！
-
『原创』『教程』在Linux中搭建Windows环境 前言众所周知，搭建网站最好用是Linux系统，但是有一些Windows软件没法运行在Linux服务器上，就很痛苦经过我千辛万苦的寻找，我终于找到可以在Linux上运行的Windows环境了虽然版本比较老，功能也很少，但是能够勉强运行大部分Windows软件，比如QQ机器人、自动运行的小软件等成果展示{tabs}{tabs-pane label="机器人"}{/tabs-pane}{tabs-pane label="爬图"}{/tabs-pane}{/tabs}教程建议安装宝塔面板，如果实在无法安装宝塔面板又想拥有Windows环境的话也可以，但是一定要仔细看教程一、宝塔面板下安装教程1、安装环境 宝塔面板-软件商店中安装 Docker管理器2、开始搭建 （1）第一步安装镜像文件，在终端ssh输入以下指令隐藏内容，请前往内页查看详情（2）第二步打开Docker管理器 点击容器列表-创建容器{tabs}{tabs-pane label="创建容器"}{/tabs-pane}{tabs-pane label="参数解释"}绑定IP： 0.0.0.0 端口映射： 8080 TCP 8080 网页中的端口 TCP不可修改 （需要在服务器放行该端口）目录映射： /home/user 读写 /bot 左边是容器目录（虚拟机目录），右边是当前服务器目录（必须是绝对目录，从根目录开始）环境变量：name=xiaolz #镜像名字，请勿修改 VNC_PASS=12345678 #VNC密码 VNC_SCREEN=1024x768 #VNC屏幕分辨率内存配额： 1000 你的服务器的内存大小，越大越好 CPU权重： 100 填写0-100的数值，越大越好 执行命令： /bin/bash 默认，可不填{/tabs-pane}{/tabs}点击保存即可，不要忘了点击端口映射和目录映射旁边的小加号 3、进入界面 浏览器输入 你服务器的IP地址:8080 假设你的服务器IP为 127.0.0.1 那么你的访问地址就是 127.0.0.1:8080进入后，点击连接，输入密码即可进入Wine系统4、添加文件或软件 打开你 2 — 第二步 中填写的服务器目录，把文件或者软件上传到该目录，然后在虚拟机中直接运行就可以了二、非宝塔面板下安装教程1、安装Docker 如果你没法安装宝塔面板，那就直接在ssh输入以下代码安装Docker安装命令：yum install -y git docker wget也可以使用国内 daocloud 一键安装命令：curl -sSL https://get.daocloud.io/docker | sh启动Dockersystemctl start docker2、下载docker镜像 隐藏内容，请前往内页查看详情3、启动虚拟机 隐藏内容，请前往内页查看详情其中 VNC_PASS 为VNC(远程桌面)连接密码,必填其中 VNC_SCREEN 为VNC(远程桌面)分辨率,必填其中 8080 为VNC(远程桌面)端口其中 /bot/ 为虚拟机在当前服务器映射的目录启动后可以使用 docker ps 查看Docker下运行的目录4、进入界面登录虚拟机远程桌面跟上面一样，直接打开 服务器IP:8080 就行
-
『转载』『教程』利用宝塔面板和PHP实现Typecho定时推送链接到百度 前言网站SEO是一个网站的痛点，虽然没有很好的SEO技术，但是最基础的百度推送还是要做的这里就是一个实现定时自动推送你网站sitemap到百度的方法，管不管用谁也说不准，但是做了总比不做的好一、 编写PHP文件在网站根目录创建一个php文件添加以下内容隐藏内容，请前往内页查看详情二、添加自己的推送接口想必大家都知道在百度站长添加网站吧，这里就不赘述了百度站长平台：https://ziyuan.baidu.com/dashboard/index在百度站长中打开自己的网站（ 注意： 这里的网站一定要跟你推送的网站一致 ）复制推送接口到上面的代码里，然后在浏览器中访问 你的域名/文件名.php ,出现以下结果说明配置成功三、实现定时自动推送接下来就是定时推送到百度首先，打开 宝塔面板-计划任务 ，然后添加计划任务任务类型：访问URL任务名称：随意填写执行周期：随意（建议6小时，一天4次）URL地址：你的域名/文件名.php（例如：https://www.fuuuy.cn/pages/baidu/baidu.php）然后点击执行出现以下代码就表示成功了
-
『转载』『插件』B站来源的Typecho追番页插件 前言前段时间，在浏览其他博客时发现一个很有意思的插件，可以显示B站的追番动态放在个人介绍页，可以让别人看到你在追哪些番，更容易找到志趣相投的好朋友成果展示教程首先下载这个插件，插件我进行了一些美化，主要是美化了上/下一页的按钮（其他的挺好看的，没必要美化）隐藏内容，请前往内页查看详情然后放到你的typecho的插件目录 根目录/usr/plugins 里解压，文件夹名称一定为 BiliBangumi 接着进入网站后台启用并设置相应的数据就可以了UID和cookie获取一、UID获取二、cookie获取1、打开你的B站个人主页2、F12检查源码3、点Network4、F5刷新网页5、找到你的UID，点击 Headers 再点击 Request Headers 就可以看到你的cookie了6、创建独立页面模板在 主题根目录 下创建一个php文件，名字随意，然后打开粘贴以下代码并保存即可隐藏内容，请前往内页查看详情最后在后台修改个人介绍的独立页面，自定义模板选择追番即可（当然你也可以直接新建独立页面来显示追番列表） 注意： 你的追番列表必须是公开的才可以！
-
『活动』热烈庆祝建党100周年 dang.webp热烈庆祝建党100周年 2021年，中国共产党迎来百年华诞。从建党的开天辟地，到新中国成立的改天换地，到改革开放的翻天覆地，再到党的十八大以来党和国家事业取得历史性成就、发生历史性变革，中国共产党带领中国人民砥砺奋进，走向胜利。百年征程波澜壮阔，百年大党风华正茂。一百年的暴风骤雨，伟大的中国共产党高举指路的明灯，为我们指引前进的方向！一百年的惊涛骇浪，伟大的中国共产党执掌前进的舵把，为我们把握正确的航向！ 祝福伟大的中国共产党，100岁生日快乐！一次次为信仰点亮光芒！这是穿越百年不变的理想！{bilibili bvid="BV17U4y1V7UF" page=""/}
-
『原创』『教程』博客主题修改记录（长期不定时更新） 前言最近一直在摸鱼，也好久没更新博客了，今天登陆上一看，发现博客自动更新出问题了。简单了解了一下，发现是自己改动的东西太多了，服务器本地主题和作者github内容重复了所以只好重新下载作者的主题，再把自己改的加上去，但是突然发现自己已经记不太清楚修改了哪些了所以打算摸鱼写一篇文章来记录自己博客的修改内容，毕竟好记性不如烂笔头嘛修改目录主要修改的内容{timeline}{timeline-item color="#19be6b"} PC端＆PE端侧栏自定义 恋爱计时 {/timeline-item}{timeline-item color="#19be6b"} 文章底部端 打赏按钮 {/timeline-item}{timeline-item color="#19be6b"} PC端＆PE端 登录按钮 {/timeline-item}{timeline-item color="#19be6b"} PC端 评论弹幕 {/timeline-item}{timeline-item color="#19be6b"} 关于页 我的追番 页面 {/timeline-item}{timeline-item color="#19be6b"} QQ自动跳转浏览器 {/timeline-item}{timeline-item color="#19be6b"} 复制内容时添加转载说明 {/timeline-item}{timeline-item color="#19be6b"} 修改了恋爱计时，将其内嵌到主题了 {/timeline-item}{timeline-item color="#19be6b"} 修改了时光机的发表权限为贡献者以上 {/timeline-item}{timeline-item color="#19be6b"} 修改了评论上传图片的尺寸和清晰度 {/timeline-item}{timeline-item color="#19be6b"} 添加了评论上传图片的审核功能 {/timeline-item}{timeline-item color="#19be6b"} 新增了评论可选小电视和QQ表情包 {/timeline-item}{timeline-item color="#19be6b"} 添加了全站的JS广告及广告位 {/timeline-item}{/timeline}补充教程因为在学习了一些Typecho的后端设置后，觉得直接把所有自定义功能放在一起，然后通过 functions.php 调用更为方便所以就有了以下教程，虽然也是在其他人那里嫖来的，但是根据自己的理解也进行了举一反三，所以在此记录一下（一）引入自定义配置文件1、创建自定义文件首先在主题根目录或者/public目录下创建一个 custom.php 文件（文件名可自定义）内容包含在 <?php ?>内 2、引入配置文件接着在根目录的 functions.php 文件内引入自定义配置文件{tabs}{tabs-pane label="代码"}// 引入自定义设置 require_once("public/custom.php");{/tabs-pane}{tabs-pane label="添加位置"}放在 functions.php 的倒数第二行，只要放在 function themeConfig($form){} 里面就行了。{/tabs-pane}{/tabs}3、添加tabs最后在根目录的 functions.php 文件的外观设置tabs里再加一个自定义配置{tabs}{tabs-pane label="代码"}<li class="item" data-current="joe_custom">自定义设置</li>{/tabs-pane}{tabs-pane label="添加位置"}以Joe主题为例{/tabs-pane}{/tabs}这样就可以引入自定义配置文件了（二）引入自定义JS和CSS文件1、引入到主题框架直接在 Joe/public/include.php 插入以下代码即可<!--引入自定义模块CSS--> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/custom.min.css'); ?>"> <!--引入自定义模块JS--> <script src="<?php $this->options->themeUrl('assets/js/custom.min.js'); ?>"></script>2、添加自定义JS和CSS文件在 Joe/assets/js 文件夹下创建 custom.min.js 在 Joe/assets/css 文件夹下创建 custom.min.css（三）添加后台自定义功能1、PC端＆PE端 侧栏自定义{collapse}{collapse-item label="PC端＆PE端 侧栏自定义 "}要添加侧栏或者底栏，只需要在 custom.php 文件里添加相应的ID就行了（ID唯一，切勿重复）例如：// 自定义侧边栏模块 - PC $JCustomAside = new Typecho_Widget_Helper_Form_Element_Textarea( 'JCustomAside', NULL, NULL, '自定义侧边栏模块 - PC', '介绍：用于自定义手机端侧边栏模块 <br /> 格式：请填写前端代码，不会写请勿填写 <br /> 例如：您可以在此处添加一个搜索框、时间、宠物、恋爱计时等等' ); $JCustomAside->setAttribute('class', 'joe_content joe_custom'); $form->addInput($JCustomAside);然后再到侧栏文件 public/aside.php 或者底栏文件 public/footer.php 引用就行了如果是PE端的侧栏，需要到 public/header.php 引用{/collapse-item}{/collapse}2、文章底部端 打赏按钮{collapse}{collapse-item label="文章底部端 打赏按钮 "}（1）添加后台开关及配置首先在 custom.php 文件里添加打赏申明，关闭时可以不显示，默认开启隐藏内容，请前往内页查看详情（2）添加打赏功能然后再在 handle.php 里添加打赏功能代码隐藏内容，请前往内页查看详情我这里把css另外放在了 assets/css/custom.css 里了，方面统一管理如果把样式放在了外部，记得引入相关样式表哦，在 public/include.php 引入样式表{/collapse-item}{/collapse}3、PC端＆PE端 登录按钮{collapse}{collapse-item label="PC端＆PE端 登录按钮 "}PC端登录Joe主题已经添加上了，而且功能比较完善，直接使用就行PE端的直接在 public/header.php 相应位置添加以下代码就行{tabs}{tabs-pane label="代码"}隐藏内容，请前往内页查看详情{/tabs-pane}{tabs-pane label="添加位置"}放在PE侧栏的最底下，当然，你也可以放在其他位置，你开心就好{/tabs-pane}{/tabs}{/collapse-item}{/collapse}4、PC端 评论弹幕弹幕功能的教程已经设置了后台管理功能，所以直接看教程就行传送门 『教程』Typecho的Joe主题添加评论弹幕功能（限PC）5、关于页 我的追番 页面{timeline}{timeline-item color="#ed4014"}2021.6.21 我的追番功能是一款插件，所以等我空了再水一篇文章，先鸽在这里了{/timeline-item}{timeline-item color="#19be6b"}2021.7.5 教程更新了出来了『插件』B站来源的Typecho追番页插件 {/timeline-item}{/timeline}6、QQ自动跳转浏览器同样的，教程已经设置了后台管理，直接按照教程修改即可传送门 『代码』Typecho的Joe主题新增QQ打开自动跳转到浏览器7、复制内容时添加转载说明{collapse}{collapse-item label=" 复制内容时添加转载说明 " }在post.php最下面添加隐藏内容，请前往内页查看详情{/collapse-item}{/collapse}写在后面本文章不定时更新，主要记录博主修改内容，想到的都会尽量写上
-
『转载』『教程』Typecho的Joe主题添加评论弹幕功能（限PC） 前言主要是结合自己实践，总结遇到的问题和做个备份成果展示{tabs}{tabs-pane label="前端"}{/tabs-pane}{tabs-pane label="后台"}{/tabs-pane}{/tabs}一、修改header.php文件新增代码，文件路径：usr/themes/Joe/public/header.php（一）第一段{tabs}{tabs-pane label="放在最上面"}<!-- 弹幕 --> <?php if ($this->options->JBarragerStatus === 'on') : ?> <?php $this->widget('Widget_Comments_Recent@index', 'ignoreAuthor=true&pageSize=15')->to($comments); ?> <ul class="j-barrager-list"> <?php if ($comments->have()) : ?> <?php while ($comments->next()) : ?> <li> <span class="j-barrager-list-avatar" data-src="<?php _getAvatarByMail($comments->mail) ?>"></span> <span class="j-barrager-list-content"><?php _parseAsideReply($comments->content); ?></span> </li> <?php endwhile; ?> <?php endif; ?> </ul> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}（二）第二段{tabs}{tabs-pane label="放在登录旁"}<!-- 弹幕 --> <?php if ($this->options->JBarragerStatus === 'on') : ?> <div class="item"> <input id="barrager" class="barrager" type="checkbox" title="开启/关闭弹幕"> </div> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}（三）第三段不要耍小聪明，放到include.php里去，不会显示弹幕的 {tabs}{tabs-pane label="放在最后面"}<!-- 弹幕 --> <?php if ($this->options->JBarragerStatus === 'on') : ?> <script src="<?php $this->options->themeUrl('library/barrager/joe.barrager.js'); ?>"></script> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}二、修改include.php文件新增如下代码；文件路径：usr/themes/Joe/public/include.php{tabs}{tabs-pane label=" include.php 文件"}<?php if ($this->options->JBarragerStatus === 'on') : ?> <link rel="stylesheet" href="<?php $this->options->themeUrl('library/barrager/joe.barrager.css'); ?>"> <?php endif; ?>{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}三、修改functions.php文件路径usr/themes/Joe/functions.php{tabs}{tabs-pane label="添加代码"}$JBarragerStatus = new Typecho_Widget_Helper_Form_Element_Select( 'JBarragerStatus', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '是否开启弹幕功能（仅限PC）', '介绍：开启后，网站将会显示评论弹幕功能，该功能采用CSS动画引擎，并非传统JS操作DOM，无任何性能消耗。' ); $JBarragerStatus->setAttribute('class', 'joe_content joe_custom'); $form->addInput($JBarragerStatus->multiMode());{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}如果创建过 custom.php 文件，直接放到 custom.php 里就行了 但是记得要在 functions.php 引入 custom.php 哦四、修改config.php文件文件路径：usr/themes/Joe/public/config.php{tabs}{tabs-pane label="添加代码"}/* 弹幕 */ DOCUMENT_BARRAGER: '<?php echo $this->options->JBarragerStatus === 'on' ? 'on' : 'off' ?>',{/tabs-pane}{tabs-pane label="代码位置"}{/tabs-pane}{/tabs}五、上传CSS和JS将以下文件，放在usr/themes/Joe/library里就行了隐藏内容，请前往内页查看详情转自执念博客
-
『笔记』『代码』CSS3 Flex 布局详解文档 网页布局（layout）是 CSS 的一个重点应用布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法。一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; }行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }Webkit 内核的浏览器，必须加上 -webkit 前缀。.box{ display: -webkit-flex; /* Safari */ display: flex; }注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做 cross size 。三、容器的属性以下6个属性设置在容器上。{card-describe title=" flex-direction "}flex-wrapflex-flowjustify-contentalign-itemsalign-content{/card-describe}3.1 flex-direction属性flex-direction 属性决定主轴的方向（即项目的排列方向）。.box { flex-direction: row | row-reverse | column | column-reverse; }它可能有4个值。row （默认值）：主轴为水平方向，起点在左端。row-reverse ：主轴为水平方向，起点在右端。column ：主轴为垂直方向，起点在上沿。column-reverse ：主轴为垂直方向，起点在下沿。3.2 flex-wrap属性默认情况下，项目都排在一条线（又称"轴线"）上。 flex-wrap 属性定义，如果一条轴线排不下，如何换行。.box{ flex-wrap: nowrap | wrap | wrap-reverse; }它可能取三个值。（1）nowrap（默认）：不换行。（2）wrap：换行，第一行在上方。（3）wrap-reverse：换行，第一行在下方。3.3 flex-flowflex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。.box { flex-flow: <flex-direction> || <flex-wrap>; }3.4 justify-content属性justify-content 属性定义了项目在主轴上的对齐方式。.box { justify-content: flex-start | flex-end | center | space-between | space-around; }它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。flex-start （默认值）：左对齐flex-end ：右对齐center ： 居中space-between ：两端对齐，项目之间的间隔都相等。space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。3.5 align-items属性align-items属性定义项目在交叉轴上如何对齐。.box { align-items: flex-start | flex-end | center | baseline | stretch; }它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。flex-start ：交叉轴的起点对齐。flex-end ：交叉轴的终点对齐。center ：交叉轴的中点对齐。baseline : 项目的第一行文字的基线对齐。stretch （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。3.6 align-content属性align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }该属性可能取6个值。flex-start ：与交叉轴的起点对齐。flex-end ：与交叉轴的终点对齐。center ：与交叉轴的中点对齐。space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch （默认值）：轴线占满整个交叉轴。四、项目的属性以下6个属性设置在项目上。orderflex-growflex-shrinkflex-basisflexalign-self4.1 order属性order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。.item { order: <integer>; }4.2 flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。.item { flex-grow: <number>; /* default 0 */ }如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。4.3 flex-shrink属性flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。.item { flex-shrink: <number>; /* default 1 */ }如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。4.4 flex-basis属性flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小。.item { flex-basis: <length> | auto; /* default auto */ }它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。4.5 flex属性flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。4.6 align-self属性align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }该属性可能取6个值，除了auto，其他都与 align-items 属性完全一致。转自： Lovestu
-
『转载』『教程』Typecho的Joe主题新增QQ打开自动跳转到浏览器 前言最近QQ抽风，很多站长的网站都被屏蔽白了，我的也不例外而且很多人上午解了下午又白，所以我就想做一个跳转，跳转到浏览器访问然后看到执念有教程，就直接搬过来了，也就当做个备份吧效果图{tabs}{tabs-pane label="后台"}{/tabs-pane}{tabs-pane label="跳转"}{/tabs-pane}{/tabs}修改步骤一、修改functions.php文件新增如下代码；文件路径： usr/themes/Joe/functions.php 如果创建了 custom.php 就放在 custom.php 里隐藏内容，请前往内页查看详情二、修改include.php文件路径如下： usr/themes/Joe/public/include.php ，在最顶部新增隐藏内容，请前往内页查看详情三、新增prevent.php文件下载以下文件，上传路径： usr/themes/Joe/public文件下载：隐藏内容，请前往内页查看详情
-
-
『转载』『代码』Joe主题自定义搭配色教程 转自： Joe的博客今天看到每个使用本站主题的用户，全部用的都是主题默认样式，如何自定义一套自己的色彩风格？此篇文章适合非常非常白的小白（萌新）阅读，不适用于大佬前言本篇教程无任何技术类的知识，只需对颜色有些了解即可！第一步打开主题外观设置 - 全局设置 - 自定义CSS，填写以下内容：body { --theme: #409eff; }填写完后如下图所示（复制粘贴不会的洗洗睡吧）：第二步随便百度一个颜色网站，例如：https://www.5tu.cn/colors/yansebiao.html复制自己喜欢的颜色色彩值，例如珊瑚色： #f8aba6 。接着替换掉上面填写的颜色即可，上面的代码就如下所示：body { --theme: #f8aba6; }接着保存，去前台刷新就能看见变化了，这里只是举一个栗子进行说明。到这里纯小白的教程结束 ，下面的内容是更加强大的全套主题色补充。完整版内容首先打开主题外观设置 - 全局设置 - 自定义CSS，填写以下内容：不用管这一步的作用是什么，后面会逐个介绍body { --theme: #409eff; --background: #fff; --main: #303133; --routine: #606266; --minor: #909399; --seat: #c0c4cc; --classA: #dcdfe6; --classB: #e4e7ed; --classC: #ebeef5; --classD: #f2f6fc; --radius-wrap: 8px; --radius-inner: 4px; --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22); }首先随便拿上面的一个属性进行介绍，懂了一个后面都懂，dddd（懂的都懂 ::(阴险) ）例如： --theme: #409eff; --theme 这个不能修改，固定的主题调用语法。--theme 冒号后面的是颜色的色彩值，这个色彩值可以用常见的颜色格式。例如 #ff6800 、rgba(0,0,0,1) 等等都可以{lamp/}明白上面的意思后，接下来对上面的每个属性做一个描述--theme顾名思义，主题色的意思，用于修改整个网站的主题色彩--background这个介绍不太好描述，用一个图形容下，比如下面这张图，他的背景色就是用的这个属性值（白色），如果想变成透明的话，可以填写 rgba 值，例如： rgba(255,255,255,0.5) 半透明--main这个是文字的颜色，颜色最深的--routine这个是文字的颜色，颜色稍微次于上面那个--minor这个是文字的颜色，颜色稍微次于上面那个--seat这个是文字的颜色，颜色稍微次于上面那个--classA这个主要用于横线、分割线用的颜色，颜色最深的--classB这个主要用于横线、分割线用的颜色，颜色稍微次于上面那个--classC这个主要用于横线、分割线用的颜色，颜色稍微次于上面那个--classD这个主要用于横线、分割线用的颜色，颜色稍微次于上面那个--radius-wrap这个主要用外层包裹的圆角度数的，如果不需要圆角，可以写0，例如--radius-inner这个主要用里层包裹的圆角度数的，如果不需要圆角，可以写0--text-shadow这个是文章标题的字体阴影，这个只在文章详情页用到，改不改区别不大--box-shadow这个是阴影，这个弄得好，网站炫酷的一批，例如拟态等都是通过这个实现的其他上面的设置都是控制主题白昼下的样式，黑夜模式的样式和这个修改方法一致
