前言博主搜集网上各种办法，均为直接解决，最后还是在自我动手下解决原始配置AList 原本的预览配置是调用的github的源，最明显的缺点就是慢，且会遇到很多问题：错误如下：[collapse status="true" title="Failed to fetch"][/collapse]解决方法自己搭建一个PDF预览的网站做接口一、从github获取pdf.js的Release版本进入项目地址：GitHub，找到Release，点击找到版本3.4.120,下载pdfjs-3.4.120-dist.zip[scode type="blue"]v3.4.120之后的版本都采用Node.js的.mjs进行部署的，我选择了.js的版本，即最后一版的v3.4.120如果你是较旧的浏览器，请下载legacy版，否则下载常规版本（推荐直接下载常规版本的）[/scode]二、网站部署pdf.js项目需要准备web网站环境（自行解决），我是用宝塔完成上传网站并解压后得到如下文件新建pdfjs-dist文件夹并移动解压后的文件到该文件夹内[scode type="yellow"]注意下载的Release的pdf.js项目里面的内容对pdf.js及相关文件的路径描述有特殊要求，即必须在pdfjs-dist文件内访问[/scode]去除元文件中的跨域验证编辑 /www/wwwroot/你的网站/pdfjs-dist/web/viewer.js文件的第1563-1565行，并注释这三行代码返回到网站 打开网站设置-网站目录 ，修改网站运行目录为 /pdfjs-dist验证网站打开网址 http://你的域名或IP/web/ 如果没有问题，则会自动打开一个预览PDF文件更新AList的预览配置为自己的就可以正常预览PDF啦不愿意动手的看这里，拿来就用获取代码自己部署（不用改直接用）使用我的预览接口在AList的预览设置中更换配置为博主的接口完结
前言typecho的handsome主题美化美化过程1、时光机头像圆形打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可/* 时光机圆形头像 */ .img-square {border-radius: 50%;} .list-group-item .thumb-sm .img-square {border-radius: 5px;}2、logo扫光效果打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可/* logo扫光开始 */ .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}} /*logo扫光结束*/3、赞赏按钮跳动打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 /*赞赏按钮跳动开始*/ .btn-pay { animation: star 0.5s ease-in-out infinite alternate; } @keyframes star { from { transform: scale(1); } to { transform: scale(1.1); } } /*赞赏按钮跳动结束*/4、主题标题居中打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 /*主题标题居中*/ header.bg-light.lter.wrapper-md { text-align: center; }5、页面两侧框架留白间距打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 /*两侧框架留白间距*/ @media (min-width:1700px) { .app.container { width: 95% } .app.container .app-aside, .app.container .app-header { max-width: 95% } } @media (min-width:2048px) { .app.container { width: 93% } .app.container .app-aside, .app.container .app-header { max-width: 93% } } @media (min-width:1200px) { .app.container { width: 90% } .app.container .app-aside, .app.container .app-header { max-width: 90% } .app.container .app-footer-fixed { max-width: 970px } .app.container.app-aside-folded .app-footer-fixed { max-width: 1110px } .app.container.app-aside-dock .app-footer-fixed { max-width: 90% } }6、handsome原生入站提示打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义输出body尾部的html代码即可 7、右侧导航栏打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可 /*右侧导航栏*/ .sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;} .sidebar-icon svg.feather.feather-message-square{color:#495dc3;} .sidebar-icon svg.feather.feather-gift{color:#52DE97;}8、博主介绍闪字效果打开后台-更改外观-设置外观-初级设置-复制代码粘贴至博主的介绍即可 9、复制版权提示打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可 /* 复制成功提示代码开始 */ kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){ $.message({ message: "尊重原创，转载请注明出处！ 本文作者：MintYouth 原文链接："+sitesurl, title: "复制成功", type: "warning", autoHide: !1, time: "3000" }) }} /* 复制成功提示代码结束 */10、鼠标点击特效打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可 /* 鼠标点击特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); var $i = $("").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#FA7298" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); });11、自定义右键打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义输出body 尾部的HTML代码即可 首页 复制 搜索 前进 后退 重载网页 关于作者 12、彩色标签云及右栏数字打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可 /*彩色标签云代码开始*/ let tags = document.querySelectorAll("#tag_cloud-2 a"); let infos = document.querySelectorAll(".badge"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); infos.forEach(info => { infosColor = colorArr[Math.floor(Math.random() * colorArr.length)]; info.style.backgroundColor = infosColor; }); /*彩色标签云代码结束*/13、全局右边栏展示响应时间和访客总数将以下代码放到/usr/themes/handsome/libs/Content.php的class content{}前 /*访问总量代码开始*/ function theAllViews(){ $db = Typecho_Db::get(); $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`'); echo number_format($row[0]['SUM(VIEWS)']); } /*访问总量代码结束*/ /*响应时间代码开始*/ function timer_start() { global $timestart; $mtime = explode( ' ', microtime() ); $timestart = $mtime[1] + $mtime[0]; return true; } timer_start(); function timer_stop( $display = 0, $precision = 3 ) { global $timestart, $timeend; $mtime = explode( ' ', microtime() ); $timeend = $mtime[1] + $mtime[0]; $timetotal = number_format( $timeend - $timestart, $precision ); $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s"; if ( $display ) { echo $r; } return $r; } /*响应时间代码结束*/然后将以下代码放到/usr/themes/handsome/component/sidebar.php内，找到博客信息添加即可 <?php echo theAllViews();?><?php _me("访客总数") ?> <?php echo timer_stop();?><?php _me("响应耗时") ?> 14、侧边栏添加二维码打开/usr/themes/handsome/component文件夹下的sidebar.php在大概81行的section之后，也就是随机文章那一块之后,博客信息之前。当然具体位置可以按照自己的喜好来。 <?php _me("移动端阅读") ?> 15、全站字数统计将以下代码放到/usr/themes/handsome/component/sidebar.php的开头 <?php //字数统计 function allOfCharacters() { $chars = 0; $db = Typecho_Db::get(); $select = $db ->select('text')->from('table.contents'); $rows = $db->fetchAll($select); foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); } $unit = ''; if($chars >= 10000) { $chars /= 10000; $unit = '万'; } else if($chars >= 1000) { $chars /= 1000; $unit = '千'; } $out = sprintf('%.2lf %s',$chars, $unit); return $out; } ?>然后将以下代码放到/usr/themes/handsome/component/sidebar.php内，加到合适的位置 <?php echo allOfCharacters(); ?><?php _me("全站字数") ?> 16、文章末END在主题文件post.php内，文章内容下方加上下面的代码 END 红色的字体17、版权提示在主题文件post.php内，文章内容下方加上下面的代码 本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?> 文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?> 本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?> 版权说明：若无注明，本文皆<a href="<?php $this->options->rootUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?>原创，转载请保留文章出处。 18、时间流逝将以下代码加到/usr/themes/handsome/component/sidebar.php，在122行左右，放在<?php endif; ?>之后 <?php _me("时间流逝") ?> 今日已经过去小时 这周已经过去天 本月已经过去天 今年已经过去个月 添加完成后,将以下代码放入后台-外观设置-开发者设置-自定义css /* 时间流逝 */ .sidebar-count .content { padding: 15px } .sidebar-count .content .item { margin-bottom: 15px } .sidebar-count .content .item:last-child { margin-bottom: 0 } .sidebar-count .content .item .title { font-size: 12px; color: var(--minor); margin-bottom: 5px; display: flex; align-items: center } .sidebar-count .content .item .title span { color: var(--theme); font-weight: 500; font-size: 14px; margin: 0 5px } .sidebar-count .content .item .progress { display: flex; align-items: center } .sidebar-count .content .item .progress .progress-bar { height: 10px; border-radius: 5px; overflow: hidden; background: var(--classC); width: 0; min-width: 0; flex: 1; margin-right: 5px } @keyframes progress { 0% { background-position: 0 0 } 100% { background-position: 30px 0 } } .sidebar-count .content .item .progress .progress-bar .progress-inner { width: 0; height: 100%; border-radius: 5px; transition: width 0.35s; -webkit-animation: progress 750ms linear infinite; animation: progress 750ms linear infinite } .sidebar-count .content .item .progress .progress-bar .progress-inner-1 { background: #bde6ff; background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-bar .progress-inner-2 { background: #ffd980; background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-bar .progress-inner-3 { background: #ffa9a9; background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-bar .progress-inner-4 { background: #67c23a; background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .sidebar-count .content .item .progress .progress-percentage { color: var(--info) }添加完成后,在到/usr/themes/handsome/assets/js里面创建名为timeinfo.js后把下面代码复制进去保存 function init_life_time() { function getAsideLifeTime() { /* 当前时间戳 */ let nowDate = +new Date(); /* 今天开始时间戳 */ let todayStartDate = new Date(new Date().toLocaleDateString()).getTime(); /* 今天已经过去的时间 */ let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60; /* 今天已经过去的时间比 */ let todayPassHoursPercent = (todayPassHours / 24) * 100; $('#dayProgress .title span').html(parseInt(todayPassHours)); $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%'); $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%'); /* 当前周几 */ let weeks = { 0: 7, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6 }; let weekDay = weeks[new Date().getDay()]; let weekDayPassPercent = (weekDay / 7) * 100; $('#weekProgress .title span').html(weekDay); $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%'); $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%'); let year = new Date().getFullYear(); let date = new Date().getDate(); let month = new Date().getMonth() + 1; let monthAll = new Date(year, month, 0).getDate(); let monthPassPercent = (date / monthAll) * 100; $('#monthProgress .title span').html(date); $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%'); $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%'); let yearPass = (month / 12) * 100; $('#yearProgress .title span').html(month); $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%'); $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%'); } getAsideLifeTime(); setInterval(() => { getAsideLifeTime(); }, 1000); } init_life_time()添加完成,将以下代码放入后台-外观设置-开发者设置-自定义输出body尾部 19、禁用F12将一下代码放置在 设置外观=>开发者设置=>JavaScript内 window.oncontextmenu=function(){ // alert('禁止右键'); return false; } // 注意keyCode,code,key区别，推荐使用code，键盘按键查询地址：https://keycode.info/ // 禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具） window.onkeydown = window.onkeyup = window.onkeypress = function (event) { console.log('键盘事件',event) if(event.keyCode == 123){ // document.herf='/banf12.html'; // window.location.href='/banf12.html'; // alert('禁止按F12'); window.event.returnValue = false; return false; } if (event.ctrlKey && event.shiftKey && event.keyCode == 73) { // alert('禁止按ctrl+shift+i'); window.event.returnValue = false; return false; } if (event.shiftKey && event.keyCode == 121) { // alert('禁止按Shift+F10'); window.event.returnValue = false; return false; } if ((event.ctrlKey || event.metaKey) && event.keyCode == 83) { // alert('禁止按ctrl+s'); window.event.returnValue = false; return false; } }20、头像呼吸光环和鼠标悬停旋转放大开发者设置-自定义css中添加代码即可。 .img-full { width: 100px; border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .img-full:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0% { box-shadow: 0 0 4px #f00; } 25% { box-shadow: 0 0 16px #0f0; } 50% { box-shadow: 0 0 4px #00f; } 75% { box-shadow: 0 0 16px #0f0; } 100% { box-shadow: 0 0 4px #f00; } }如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为： @keyframes light { from { box-shadow: 0 0 4px #f00; } to { box-shadow: 0 0 16px #f00; } }21、左侧文章图标和评论头像鼠标悬停旋转 .img-square { transition: all 0.3s; } .img-square:hover { transform: rotate(360deg); }22、首页文章列表悬停上浮 .blog-post .panel:not(article) { transition: all 0.3s; } .blog-post .panel:not(article):hover { transform: translateY(-10px); box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47); }23、首页文章列表头图悬停放大并将超出范围隐藏 .index-post-img { overflow: hidden; } .item-thumb { transition: all 0.3s; } .item-thumb:hover { transform: scale(1.1) }24、文章内头图和文章图片悬停放大并将超出范围隐藏 .entry-thumbnail { overflow: hidden; } #post-content img { border-radius: 10px; transition: 0.5s; } #post-content img:hover { transform: scale(1.05); }25、右侧列表导航栏图标颜色 .glyphicon-fire { color: #ff0000; } .nav-tabs-alt .glyphicon-comment { color: #495dc3; } .glyphicon-transfer { color: #0e5458; }26、图片抖动效果 **-webkit-animation**:sucaijiayuan **1s** .**1s** ease both; **-moz-animation**:tada **1s** .**1s** ease both; } @-**webkit**-**keyframes** sucaijiayuan { 0% { **-webkit-transform**:**scale**(1) } 10%, 20% { **-webkit-transform**:**scale**(0.8) **rotate**(-2deg) } 30%, 50%, 70%, 90% { **-webkit-transform**:**scale**(1.1) **rotate**(2deg) } 40%, 60%, 80% { **-webkit-transform**:**scale**(1.1) **rotate**(-2deg) } 100% { **-webkit-transform**:**scale**(1) **rotate**(0) }27、Hansome主题专用的UserAgent插件获取访客真实IP，参考网址：https://doge.uk/coding/useragent-modify.html28、首页文章版式阴影化 **.panel**{ **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); } **.panel****:hover**{ **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); } **.panel-small**{ **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); } **.panel-small****:hover**{ **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); }29、自定义鼠标样式 **cursor**:**url**(**'鼠标指针图片链接'**), auto; } **select**, **input**, **textarea**, **a**, **button** { **cursor**:**url**(**'鼠标指针图片链接'**), auto; } **input****[disabled]**, **select****[disabled]**, **textarea****[disabled]**, **input****[readonly]**, **select****[readonly]** { **cursor**:**url**(**'鼠标指针图片链接'**), auto; }30、浏览器动态标题 31、头像自动旋转 /* 旋转速度请修改3s数值 首页自动旋转 */ .thumb-lg { width: 130px; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .img-full { -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite; }32、文章版式圆角化 /* 圆角大小可修改15px数值 首页文章版式圆角化 */ .panel { border: none; border-radius: 15px; } .panel-small { border: none; border-radius: 15px; } .item-thumb { border-radius: 15px; }33、随机颜色小爱心点击特效 34、滚动条效果 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width:9px; height:8px; } /*定义滚动条轨道*/ ::-webkit-scrollbar-track { background-color:white; -webkit-border-radius: 0em; -moz-border-radius: 0em; border-radius: 0em; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { background-color: #ff676c; background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; cursor: pointer; }35、修改字体 /* zcool-kuaile-regular */ @font-face { font-family: 'ZCOOL KuaiLe'; font-style: normal; font-weight: regular; src: url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.eot'); /* IE9 Compat Modes */ src: local('ZCOOL KuaiLe'), local('ZCOOLKuaiLe-Normal'), url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.woff') format('woff'), /* Modern Browsers */ url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('//lib.baomitu.com/fonts/zcool-kuaile/zcool-kuaile-regular.svg#ZCOOLKuaiLe') format('svg'); /* Legacy iOS */ } /* 全局字体 */ * { font-family: 'ZCOOL KuaiLe'; }36、局部阴影 /*博客信息-搜索框-幻灯片 阴影*/ .box-shadow-wrap-normal { box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16); } /*盒子四周阴影*/ .app.container { box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important; } /*文章圆角-阴影*/ .panel { box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13); border-radius: 6px!important; } /*文章标题阴影*/ .bg-white-pure { background: white; box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13); } /*文章圆角-阴影*/ .panel { box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13); border-radius: 6px!important; }37、文章标题居中 /*文章标题居中*/ .panel h2{ text-align: center; } .panel-small h2{ text-align: center; } .panel-picture h3{ text-align: center; } .post-item-foot-icon{ text-align: center; }38、全站页面纯白 /*白色整体背景*/ div#alllayout { background-color: #fff; } .night div#alllayout { background-color: #1d1f20; } /*左侧-顶部-底部*/ .bg-white{ background-color: #fff; } /*页面底部*/ .bg-light { background-color: #fff; } /*首页标题背景变白*/ .bg-light .lter, .bg-light.lter { background-color: #fff; } /* 右侧背景 */ .bg-white-only{ background-color:#fff; } /*文章页面变白*/ #post-panel { background: white; } /*登录后前台头像下变白*/ li.wrapper.b-b.m-b-sm.bg-light.m-t-n-xs { background-color: #fff; }39、标签/博客信息背景颜色 .badge { background-color: rgb(0, 0, 0)!important; } .post-tags a { background-color: #000000; }40、左上角博主信息羽毛背景background:url后面括号里的网址就是羽毛动画的网址，你也可以把它保存下来放到自己网站的根目录的某个位置内，然后将网址改为自己的博客，防止该效果失效（也就是做了个备份的意思，当然如果你嫌麻烦也可以不做） /* 羽毛_css */ .dropdown.wrapper { background:url(https://您的博客网址/yumao.webp) right bottom no-repeat; }41、等距标签云 /*词云等距美化*/ #tag_cloud-2 a { border-radius: 5px; width: 32%; }42、首页文章列表悬停上浮 /*首页文章列表悬停上浮*/ .blog-post .panel:not(article) { transition: all 0.3s; } .blog-post .panel:not(article):hover { transform: translateY(-10px); box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47); }43、右侧列表导航栏图标颜色 /* 右侧列表导航栏图标颜色 */ .sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;} .sidebar-icon svg.feather.feather-message-square{color:#495dc3;} .sidebar-icon svg.feather.feather-gift{color:#52DE97;} #post-content pre code { display:block; overflow-x:auto; position:relative; margin:0; padding-left:50px; } pre code { position:relative; display:block; overflow-x:auto; margin:4.4px 0.px .4px 1px; padding:0; max-height:500px; padding-left:3.5em } .img-square { transition: all 0.3s; } .img-square:hover { transform: rotate(360deg); } .glyphicon-fire { color: #ff0000; } .nav-tabs-alt .glyphicon-comment { color: #495dc3; } .glyphicon-transfer { color: #0e5458; }44、鼠标路过头像时放大并旋转 /* 鼠标经过头像旋转放大 */ .img-circle { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: all 0.5s; } .img-circle:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0% { box-shadow: 0 0 4px #f00; } 25% { box-shadow: 0 0 16px #0f0; } 50% { box-shadow: 0 0 4px #00f; } 75% { box-shadow: 0 0 16px #0f0; } 100% { box-shadow: 0 0 4px #f00; } }45、评论边框 /*评论边框*/ .comment-parent { margin: 20px; padding: 20px; border-radius: 25px; border: 1px solid rgba(255,255,255,.3); }46、网站背景添加海浪背景 /* 海浪背景CSS部分 */ #wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;} .waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; } .parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } @keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }添加至后台主题设置-开发者设置-自定义输出head 头部的HTML代码 <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use> <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use> <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use> <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use> </g> 47、标题卖萌 var OriginTitile = document.title, titleTime; document.addEventListener("visibilitychange", function() { if (document.hidden) { document.title = "网页已崩溃！"; clearTimeout(titleTime) } else { document.title = "(/≧▽≦/)你又回来了！ " ; titleTime = setTimeout(function() { document.title = OriginTitile }, 2000) } });更多参考[scode type="blue"]handsome主题美化汇总教程TuJun's Blog[/scode]
分享你我，少走弯路网上教程一大堆，能给你讲明白的，只有我前言关于小雅Alist就不多介绍了，懂的都懂，于是今天就和大家分享一下，流程同样非常简单，一行命令就能实现。操作前提刷好Casa OS的 N1盒子进入到SSH模式准备工作在部署小雅alist前需要获取阿里云盘token和Open toke，以及转存目录folder idToken获取[collapse status="false" title="阿里云盘token"]进入Alist官方文档网站点击图示按钮，会出现二维码，用阿里云盘APP扫码登录后继续点击按钮获取32位的Token,并记录保存备用[/collapse][collapse status="false" title="阿里云盘Open token"]通过Alist官方提供的链接进行登录点击 I have scan 获取335位的Open Token记录保存备用[/collapse][collapse status="false" title="阿里云盘转存文件夹的ID"]这里说明一下，阿里云盘对资源盘位置定义进行了更新，新版本没有了资源库目录，默认除备份盘（备份文件）、相册、密码箱外都是资源目录在根目录新建一个文件夹，这里我将它命名为 小雅资源库进入该文件夹，复制地址栏中最后一个斜杠后的字符串，这个就是需要准备好的最后一个转存目录id，把它复制下来保存好。[/collapse]这三个数据保存好，即可进入下一步部署小雅alist了部分可参考小雅指南挂载部署Alist 挂载 阿里云盘主要对以下这些设置进行配置与修改即可：挂载路径：阿里云盘（随意起名，自己能分辨且不和其他网盘名字相同即可）web代理：选项打开WebDAV 策略：选择本地代理刷新令牌：键入之前获取的32位Token点击保存状态显示显示Work即表示成功在Docker的Casa OS中部署 小雅Alist打开CasaOS终端 键入以下一键安装和更新容器命令部署小雅AListbash -c "$(curl http://docker.xiaoya.pro/update_new.sh)" -s host按照提示依次键入之前保存的阿里云盘token、阿里云盘OpenToken、转存文件夹ID第一次安装会出现下面的Error提示，可忽略部署完成后，我们回到Casa OS界面，可以看到新增了待重建的xiaoya应用，重建即可点击进行重建：IP地址栏输入Casa OS主机IP（在路由器查看），端口输入5678：然后点击既可在浏览器打开小雅web界面，显示获取设置失败，正在加载存储，这是正常现象，因为资源较多，稍等几分钟再刷新页面即可部署小雅守护，用以及时删除网盘缓存终端准备输入命令bash -c "$(curl -s https://xiaoyahelper.zengge99.eu.org/aliyun_clear.sh | tail -n +2)" -s 5 -tg回到Casa OS , 进行重建应用即可Alist 挂载 小雅Alist首先，我们需要在Casa OS 终端中执行下方命令创建一个在AList中挂载小雅所需要的token：docker exec -i xiaoya sqlite3 data/data.db <<EOF select value from x_setting_items where key = "token"; EOF上边命令中的xiaoya要以你部署的小雅NAMES为准，如果你有更改，请对应变更命令中的相关部分回到AList的web界面,添加存储驱动选择AList V3主要对以下这些设置进行配置与修改即可：挂载路径：随意，中英文都可以，我这里演示使用：/小雅影集根文件夹路径：斜杠即可链接：输入小雅alist的地址，即为http://主机ip:5678令牌：输入刚才获取的小雅挂载token即可保存状态显示显示Work即表示成功回到AList的主页，即能在这里对小雅alist和其他网盘中的资源进行管理可以直接点开文件夹中的资源，进行高清播放：成功在本地N1盒子上的Casa OS容器中部署了小雅AList并挂载到了AList中进行管理如有内网穿透需求，可搭配Cpolar实现，后期补充或自行百度
2024-10-12T16:51:52.pngSSH命令删除docker ps 查看容器docker stop 容器id #停止当前正在运行的容器 例：docker stop 6a758e4d9010docker rm 容器id #删除容器最后清理未使用的镜像包：docker system prune -a
C#使用WSDL服务前言做上位机，难免遇到需要和总控/MES等系统进行对接，那必然少不了接口的调用。例如WebServices；简单的用法请参考以下文章[post cid="58" /]可站在标准的开发过程，考虑到后期的扩展性、可维护性，那就需要做到类模块抽离，以满足后期的维护等。因此考虑到使用WSDL的方式来调用接口。环境鉴于我使用的是VS2022这个IDE，所以以下内容均以VS2022为例展开介绍如何在C#项目中高效使用WSDL。一、 获取wsdl介绍一种最简单的获取方法：运行并打开接口服务在地址栏后面添加?wsdl,并回车即可得到wsdl内容鼠标右击另存为wsdl文件二、 根据WSDL接口生成XXX.cs文件打开开始菜单内的VS 2022的开发人员命令提示符（这里注意用管理员身份） ：在刚刚打开的命令提示符内键入指令：wsdl /language:c# /n:GeneralControlService /out:C:\ApiService.cs C:\api.wsdl参数说明：序号参数作用1/language:C#指定编程语言为 C#2/n:GeneralControlService指定名称空间为 GeneralControlService3/out:指定文件保存路径和文件名 ApiService.cs，可以使用绝对路径也可以使用相对路径4C:\api.wsdlwsdl文件路径，也可以是网络路径（如：http://www.xxx.com/ApiService?wsdl）完成此步骤后，就可以看到ApiService.cs文件了三、根据XXX.cs文件生成XXX.dll文件还是步骤一的控制台（命令提示符）不要关，键入指令：csc /t:library ApiService.cs 在相同路径下，生成了ApiService.dll文件，拷贝到项目下，添加引用就可以了。四、使用方法项目的引用中添加引用：代码中使用：using GeneralControlService; GeneralControlServiceis = new GeneralControlService();或者GeneralControlService.WebServiceTask webService = new GeneralControlService.WebServiceTask();调用webService.XXX();点个赞再走呗
[scode type="green"]推荐阅读[post cid="226" /][/scode]开始Git安装完成后，桌面右键出现Git GUI、Git bash选项，说明已安装：也可以在cmd中输入git命令,enter回车，若如下所示，说明安装成功啦！Git的环境配置GitHub或Gitee官网上注册一个账号，注册好后，桌面右键选择Git Bash，进行账号配置，命令如下：# 配置用户名("username"是自己的用户名) git config --global user.name "username" # 配置邮箱("username@email.com"是注册账号时所用的邮箱) git config --global user.email "username@email.com"执行完以上命令后，可用git config --global --list查看是否配置成功。继续，执行: ssh-keygen -t rsa ，(注意ssh-keygen无空格)，生成SSH(你的电脑与Gitee通信的安全连接)# 生成ssh ssh-keygen -t rsa # 命令执行后，连敲3次回车键执行完后到系统盘users目录(win: C:\Users\你的用户名.ssh\），查看生成的ssh文件：将公钥（ id_rsa.pub），添加到Github或Gitee平台中，这里以Gitee为例：4.1 gitee登录成功后，点击个人账户、找到设置，点击SSH公钥；4.2 左侧菜单栏找到SSH公钥4.3 将公钥（ id_rsa.pub）文件中的内容复制到key中，title随便起，或者key复制完后会自动生成title,点击确定就配置完成啦。回到Git bash命令窗口，输入 ssh -t git@gitee.com，如下所示，说明配置成功！顺便一提，如果执行上条命令，出现了下图情况：说明.ssh文件夹下缺少known_hosts文件，如果已经存在，那也在问答的时候输入yes,就可以了：
前言运行Vue项目时出现Git问题，果断安装一个 ::aru:discovertruth::Git安装Git 的下载以下 git-scm 是 Git 的官方，里面有不同系统不同平台的安装包和源代码，而 gitforwindows.org 里只有 windows 系统的安装包Git 官网下载对应系统的软件，下载地址为 git-scm.com或者gitforwindows.org上述下载地址国内访问没问题，但是下载就不友好了，所以推荐国内镜像源下载[scode type="blue"]找到最新日期的版本，即为当前最新版本。国内镜像下载：https://npm.taobao.org/mirrors/git-for-windows/[/scode]Git 的安装使用许可声明双击下载后的 Git-2.36.1-64-bit.exe，开始安装，这个界面主要展示了 GPL 第 2 版协议1的内容，点击 [next] 到第二步。选择安装目录可点击 “Browse…” 更换目录，也可直接在方框里面改，我一般直接将 “C\Program Files” 改为 “D”，这样就直接安装在 D 盘里了。点击 [next] 到第三步。选择安装组件图中这些英文都比较简单，我已经把大概意思翻译出来了，大家根据自己的需要选择勾选。点击 [next] 到第四步。选择开始菜单文件夹方框内 Git 可改为其他名字，也可点击 “Browse...” 选择其他文件夹或者给"Don't create a Start Menu folder" 打勾不要文件夹，点击 [next] 到第五步。选择 Git 默认编辑器Git 安装程序里面内置了 10 种编辑器供你挑选，比如 Atom、Notepad、Notepad++、Sublime Text、Visual Studio Code、Vim 等等，默认的是 Vim ，选择 Vim 后可以直接进行到下一步，但是 Vim 是纯命令行，操作有点难度，需要学习。如果选其他编辑器，则还需要去其官网安装后才能进行下一步，因为我本地已经安装VS Code ，所以我直接选择VSCode。下图为默认编辑器 Vim.可直接点击 [next] 到第六步。决定初始化新项目(仓库)的主干名字第一种是让 Git 自己选择，名字是 master ，但是未来也有可能会改为其他名字；第二种是我们自行决定，默认是 main，当然，你也可以改为其他的名字。一般默认第一种，点击 [next] 到第七步。注： 第二个选项下面有个 NEW！ ，说很多团队已经重命名他们的默认主干名为 main . 这是因为2020 年非裔男子乔治·弗洛伊德因白人警察暴力执法惨死而掀起的 Black Lives Matter(黑人的命也是命)运动，很多人认为 master 不尊重黑人，呼吁改为 main.调整你的 path 环境变量该页翻译过来是这样的：[scode type="yellow"][tabs][tab name="翻译" active="true"][/tab][tab name="释义"]第一种是仅从 Git Bash 使用 Git。这个的意思就是你只能通过 Git 安装后的 Git Bash 来使用 Git ，其他的什么命令提示符啊等第三方软件都不行。第二种是从命令行以及第三方软件进行 Git。这个就是在第一种基础上进行第三方支持，你将能够从 Git Bash，命令提示符(cmd) 和 Windows PowerShell 以及可以从 Windows 系统环境变量中寻找 Git 的任何第三方软件中使用 Git。推荐使用这个。第三种是从命令提示符使用 Git 和可选的 Unix 工具。选择这种将覆盖 Windows 工具，如 “ find 和 sort ”。只有在了解其含义后才使用此选项。一句话，适合比较懂的人折腾。[/tab][/tabs][/scode]选择 SSH 执行文件[scode type="yellow"][tabs][tab name="翻译" active="true"][/tab][tab name="释义"]默认吧！[/tab][/tabs][/scode]选择HTTPS后端传输[scode type="yellow"][tabs][tab name="翻译" active="true"][/tab][tab name="释义"]这两种选项有什么区别呢？来自https://stackoverflow.com/questions/62456484/whats-the-difference-between-openssl-and-the-native-windows-secure-channel-libr如果在具有企业管理证书的组织中使用 Git，则将需要使用安全通道。如果你仅使用 Git 来访问公共存储库（例如 GitHub ），或者你的组织不管理自己的证书，那么使用 SSL 后端（它们只是同一协议的不同实现）就可以了。也就是说，作为普通用户，只是用 Git 来访问 Github、GitLab 等网站，选择前者就行了。点击 [next] 到第十步。[/tab][/tabs][/scode]配置行尾符号转换[scode type="yellow"][tabs][tab name="翻译" active="true"]Checkout Windows-style, commit Unix-style line endings Git will convert LF to CRLF when checking out text files. When committing text files, CRLF will be converted to LF. For cross-platform projects, this is the recommended setting on Windows("core. autocrif"is set to "true").签出 Windows 样式，提交 Unix 样式的行结尾Git 签出文本文件时，会将 LF 转换为 CRLF。提交文本文件时，CRLF 将转换为 LF。对于跨平台项目，这是 Windows 上的建议设置（"core.autocrif" 设置为 "true"）。Checkout as-is, commit Unix-style line endings Git will not perform any conversion when checking out text files. When committing text files, CRLF will be converted to LF. For cross-platform projects, this is the recommended setting on Unix("core.autocrif" is set to "input").按原样签出，提交 Unix 样式的行结尾Git 在签出文本文件时不会执行任何转换。提交文本文件时，CRLF 将转换为 LF。对于跨平台项目，这是在 Unix 上的建议设置（"core.autocrif" 设置为 "input"）。Checkout as-is, commit as-is Git will not perform any conversions when checking out or committing text files. Choosing this option is not recommended for cross-platform projects("core. autocrif"is set to "false").按原样签出，按原样提交Git 在签出或提交文本文件时不会执行任何转换。不建议跨平台项目选择此选项（"core.autocrif" 设置为 "false"）。[/tab][tab name="释义"]这三种选择分别是：-签出 Windows 样式，提交 Unix 样式的行结尾。-按原样签出，提交Unix样式的行结尾。-按原样签出，按原样提交。点击 [next] 到第十一步。[/tab][/tabs][/scode]配置终端模拟器以与 Git Bash 一起使用[scode type="yellow"][tabs][tab name="翻译" active="true"]Use MinTTY(the default terminal of MSYS2) Git Bash will use MinTTY as terminal emulator, which sports a resizable windownon-rectangular selections and a Unicode font.Windows console programs(suchas interactive Python) must be launched via 'winpty' to work in MinTTY.使用 MinTTY（MSYS2的默认终端）Git Bash 将使用 MinTTY 作为终端仿真器，该仿真器具有可调整大小的窗口非矩形选择和 Unicode 字体。Windows 控制台程序（例如交互式 Python）必须通过 "winpty" 启动才能在 MinTTY 中运行。Use Windows' default console window Git will use the default console window of Windows("cmd.exe"), which works vwith Win32 console programs such as interactive Python or node. js, but has avery limited default scroll-back,needs to be configured to use a Unicode font in order to display non-ASCII characters correctly, and prior to Windows 10 its window was not freely resizable and it only allowed rectangular text selections.使用 Windows 的默认控制台窗口Git 将使用 Windows 的默认控制台窗口（"cmd.exe"），该窗口可与 Win32 控制台程序（例如交互式Python 或 node.js）一起使用，但默认回滚非常有限，需要将其配置为使用 Unicode 字体才能正确显示非 ASCII 字符，并且在 Windows 10 之前，其窗口不可随意调整大小，并且仅允许选择矩形文本。[/tab][tab name="释义"]建议选择第一种，MinTTY 3功能比 cmd 多，cmd 只不过 比 MinTTY 更适合处理 Windows 的一些接口问题，这个对 Git 用处不大，除此之外 Windows 的默认控制台窗口（cmd）有很多劣势，比如 cmd 具有非常有限的默认历史记录回滚堆栈和糟糕的字体编码等等。相比之下，MinTTY 具有可调整大小的窗口和其他有用的可配置选项，可以通过右键单击的工具栏来打开它们 git-bash 。点击 [next] 到第十二步。[/tab][/tabs][/scode]选择默认的 “git pull” 行为[scode type="yellow"][tabs][tab name="翻译" active="true"]ODefault(fast-forward or merge)This is the standard behavior ofgit pull": fast-forward the current branch to the fetched branch when possible, otherwise create a merge commit.默认（快进或合并）这是 "git pull" 的标准行为：在可能的情况下将 当前分支 快进到 获取的分支，否则创建合并提交。ORebase Rebase the current branch onto the fetched branch. If there are no local commits to rebase, this is equivalent to a fast-forward.变基将当前分支变基到获取的分支上。如果没有本地提交要变基，则等同于快进。Oonly ever fast-forward Fast-forward to the fetched branch. Fail if that is not possible.只能快进快进到获取的分支。如果不可能，则失败。[/tab][tab name="释义"]“git pull” 是什么意思呢？git pull 就是获取最新的远程仓库分支到本地，并与本地分支合并上面给了三个 “git pull” 的行为：第一个是 merge第二个是 rebase第三个是 直接获取第一种 git pull = git fetch + git merge第二种 git pull = git fetch + git rebase第三种 git pull = git fetch ？(这个没试过，纯属猜测一般默认选择第一项，git rebase 绝大部分程序员都用不好或者不懂，而且风险很大，但是很多会用的人也很推崇，但是用不好就是灾难。git pull 只是拉取远程分支并与本地分支合并，而 git fetch 只是拉取远程分支，怎么合并，选择 merge 还是 rebase ，可以再做选择。[/tab][/tabs][/scode]选择一个凭证帮助程序[scode type="yellow"][tabs][tab name="翻译" active="true"]Git Credential Manager Use the cross-platform Git Credential Manager.See more information about the future of Git Credential Manager here.Git 凭证管理使用跨平台的 Git 凭证管理。在此处查看有关 Git 凭证管理未来的更多信息。None Do not use a credential helper.不使用凭证助手。[/tab][tab name="释义"]一共两个选项：Git 凭证管理不使用凭证助手第一个选项是提供登录凭证帮助的，Git 有时需要用户的凭据才能执行操作；例如，可能需要输入用户名和密码才能通过 HTTP 访问远程存储库（GitHub，GItLab 等等）。点击 [next] 进到十四步。[/tab][/tabs][/scode]配置额外的选项[scode type="yellow"][tabs][tab name="翻译" active="true"]Enable file system caching File system data will be read in bulk and cached in memory for certain operations("core.fscache" is set to "true"). This provides a significant performance boost.启用文件系统缓存将批量读取文件系统数据并将其缓存在内存中以进行某些操作（"core.fscache” 设置为 "true"）。这可以显着提高性能。Enable symbolic links Enable symbolic links(requires the SeCreateSymbolicLink permission).Please note that existing repositories are unaffected by this setting.启用符号链接启用符号链接（需要SeCreateSymbolicLink权限）。请注意，现有存储库不受此设置的影响。[/tab][tab name="释义"]有两个选项：启用文件系统缓存启用符号链接启用文件系统缓存就是将批量读取文件系统数据并将其缓存在内存中以进行某些操作，可以显著提升性能。这个选项默认开启。启用符号链接 ，符号链接是一类特殊的文件， 其包含有一条以绝对路径或者相对路径的形式指向其它文件或者目录的引用，类似于 Windows 的快捷方式，不完全等同 类Unix（如 Linux） 下的 符号链接。因为该功能的支持需要一些条件，所以默认不开启。点击 [next] 到第十五步。[/tab][/tabs][/scode]配置实验性选项[scode type="yellow"][tabs][tab name="翻译" active="true"]Enable experimental support for pseudo consoles.(NEW!) This allows running native console programs like Node or Python in a Git Bash window without using winpty, but it still has known bugs.启用对伪控制台的实验性支持。(新功能!) 这允许在不使用 winpty 的情况下在 Git Bash 窗口中运行诸如 Node 或 Python 之类的本机控制台程序，但是它仍然存在已知的 bug。Enable experimental built-in file system monitor(NEW!) Automatically run a built-in file system watcher, to speed up common operations such as ' git status', ' git add', ' git commit', etc in worktrees containing many files.启用实验性内置文件系统监视器（新！）自动运行内置文件系统监视器，以加快包含许多文件的工作树中的常见操作，例如 'git status'、'git add'、'git commit' 等.[/tab][tab name="释义"]这是实验性功能，可能会有一些小错误之类的，建议不用开启。点击 [install] 进行安装。[/tab][/tabs][/scode]安装完成本文转自：原文地址
[scode type="green"]推荐阅读[post cid="181" /][/scode]总结了一些大家在安装及环境配置时容易出现的一些问题，分享给大家，希望对大家有帮助。一、运行npm install 时，卡在sill idealTree buildDeps没有反应.解决方案： 更换淘宝镜像可以使用如下命令设置为淘宝的镜像源：npm config set registry https://registry.npm.taobao.org使用如下命令检验是否成功：npm config get registry再次 npm install二、Error: EPERM: operation not permitted, mkdir ‘C:\node\node_cache’解决方案：提升操作权限，在任务栏搜索cmd，打开的时候右键以管理员身份运行就好。三、更改环境变量容易出现的问题[collapse status="true" title="环境变量更改"]环境变量需要使用配置正确，C:Users\用户名\AppData\Roaming\npm这个用户变量需要改掉,否则问题很大。环境变量需要有三处配置:用户变量node_ global, 例 C:\Program Files\nodejs\node_global环境变量NODE_ PATH，例 C:\Program Files\nodejs\node_global\node_modules记得path中增加%NODE_ PATH%path中配置nodejs的安装目录，例 C:\Program Files\nodejs[/collapse][scode type="blue"]更改完成后，可用以下指令验证：npm config get prefix //查看npm下载的模块存储路径 npm config get cache //查看缓存存储路径[/scode]四、npm install报错 npm ERR以下提供四种解决方法：错误一:npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\nanyi\AppData\Roaming\npm-cache_logs\2021-09-17T08_58_23_413Z-debug.l查看错误日志，错误日志就在上面展示的C:\Users…这里如果发现错误日志里有err mkdir错误原因：权限不足解决办法：关闭VsCode并以管理员权限启动VsCode即可（网上还有说在VsCode属性兼容性中直接配置管理员权限，但本人的VsCode配置后启动黑屏）错误二:npm ERR! code EINVALIDPACKAGENAME错误原因：npm版本问题解决办法：npm install --global npm错误三: npm : 无法加载文件 D:\nodejs\cnpm.ps1，因为在此系统上禁止运行脚本。解决办法：删除报错信息中无法加载的文件即可错误四npm ERR! Cannot read properties of null (reading ‘package’)解决办法：换用cnpm
本篇教程，主要介绍如何在windows 64操作系统上教科书式的安装Node.js一、介绍Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。二、下载[scode type="yellow"]主要提示：建议使用16.X及以下版本，截止当前（2022年5月25日）最新版本为18.2.0。16.X以上版本可能会引起项目报错，新建项目不影响。[/scode][scode type="blue"]官网地址：https://nodejs.org/zh-cn/下载地址：https://nodejs.org/zh-cn/download/历史下载：https://nodejs.org/zh-cn/download/releases/[/scode]三、安装双击下载后的安装包，如下所示： 若出现如下提示，不用管，继续点击运行（Win10安装机制） 继续点击下一步（NEXT），如下界面： 勾选接受协议选项，点击 next（下一步） 按钮 : 选择安装目录（默认C盘，建议其他盘，因为后期会下载很多东西，比较占用空间，我是D:\nodejs） 点击树形图标来选择你需要的安装模式（一般情况下默认，不需要改动） , 然后点击下一步 next（下一步）[scode type="share"]Node.js runtime 表示运行环境npm package manager表示npm包管理器online documentation shortcuts 在线文档快捷方式Add to PATH添加到环境变量[/scode] 到以下界面，默认可以不选，看个人需要。[scode type="share"]表示一些附带工具的安装，一般包括Python、VS等，还有其他等[/scode] 点击Install开始进行安装 点击 Finish（完成）按钮退出安装向导。 四、验证我们以管理员权限打开命令提示符（CMD），检验一下node、npm的版本。node -v npm -v出现Nodejs以及npm工具包的版本号说明安装成功！五、软件环境配置[scode type="blue"]环境配置的目的主要是为了改变安装Nodejs依赖的下载位置，更加方便日后的包管理，以及配置缓存Cache的路径。因为Nodejs在执行安装语句时，会将安装的模块默认安装到C:\Users\用户名\AppData\Roaming\npm，从而占用C盘的空间。[/scode]创建npm模块安装目录首先分别在Nodejs安装目录下创建node_cache和node_global两个文件夹，创建文件夹后，打开dos命令窗口，分别执行下面两行命令。npm config set prefix "D:\NodeJS\node_global"npm config set cache "D:\NodeJS\node_cache"配置环境变量点击我的电脑->右键->属性->高级系统设置->高级->环境变量（或者直接在任务栏搜素环境变量，点击编辑系统环境变量->环境变量）新建NODE_PATH系统变量我们需要新建一个系统变量(NODE_PATH):D:\NodeJS\node_global\node_modules更改用户path变量这里我们需要将其中默认的C:\Users\用户名\AppData\Roaming\npm更改为：C:\Program Files\nodejs\node_global测试配置我们安装一个webpack模块进行测试，打开dos命令窗口，执行下面的命令.npm install -g webpack如图说明运行成功.打开D:\NodeJS\node_global\node_modules目录，可以发现多了一个webpack 的文件夹，说明安装成功！
插件ErcerLink[scode type="blue"]一个Typecho插件，仅适用于Handsome主题，通过此插件，你可以自助申请友链，效果见本站友链[button color="info" icon="paperclip" url="https://blog.snwl0311.cn/index.php/Links.html" type=""]直达友链[/button][/scode][collapse status="true" title="插件说明"]启用插件需要博客开启伪静态（宝塔直接伪静态选择 - Typecho）申请后会自动提交到你typecho程序的links数据库中管理员只需要打开 后台-管理-友情链接在此页面，可看到朋友萌提交滴友链默认提交的状态是失效链接，不会在任何位置输出，用于标注暂时失效的友链你需要手动设置链接输出位置（达到审核友链的目的）[/collapse]演示插件下载我的友链页面代码模板下载