前言 之前写过一篇教程，那个时候经验有限，很多地方讲的不是很明白 所以这是一篇重制版教程 计划每周一更，每次30min左右，大纲讲完以后会讲解一些例程 教程大纲 大概会涉及到的内容，顺序未定 开发环境配置（P0 文章 视频） VS Code Git 使用基础 远程 Git 仓库 脚本分发（P0 文章 视频） Greasyfork 使用 使用 WebHook 自动更新 开发者工具简介（P1 文章 视频） 元素 控制台 源代码 网络 应用 JavaScript基础 （P1 文章 视频） 变量与常量 作用域 数据类型与类型转换 执行流 Window 对象 Document 对象 Node 对象 Element 对象 初识油猴脚本 (P2 文章 视频) 两个简单的脚本源码解析 油猴脚本组成 (P2 文章 视频) 元信息 脚本 DOM 元素操作 数据持久化 localStorage 自定义 CSS 油猴脚本组成 元信息 脚本 库 CSS选择器与XPath语法基础 DOM元素操作 Event事件 数据持久化 序列化与反序列化 自定义CSS 库的使用与开发 正则表达式基础 同步函数与异步函数和并发 网络请求（XHR/Fetch） 油猴API 开发实战…… 联系方式 有任何问题直接留言或者私信即可 博客留言（Chrxw.com） B站私信 （Chr_@5805394） 电子邮件（chr@chrxw.com）
前言 记录一下本博客针对Handsome 6.0主题的修改 handsome 7.X 的修改记录参见： [post cid="1315"/] !> 修改前务必备份 博客图标修改 feathericon图标修改方法：搜索data-feather，把后面的值改掉即可 顶部图标： 文件路径：/usr/themes/handsome/component/headnav.php 图标(从左往右)：music，message-square，log-in 右栏图标： 文件路径：/usr/themes/handsome/component/sidebar.php 我使用的图标： 图标1(从左往右)：thumbs-up，message-square，coffee 图标2(从上往下)：archive，message-square，calendar，activity 右侧悬浮按钮： 文件路径：/usr/themes/handsome/component/sidebar.php，/usr/themes/handsome/component/footer.php 图标(从上往下)：list，arrow-up 原图标改成feathericon以后会有轻微的位移，所以在自定义CSS里修正： /*右侧悬浮按钮*/ .pos-abt svg { margin-top: 2px; } 超链接特效 (与5.3.1相同) 修改/usr/themes/handsome/assets/css/handsome.min.css，删掉下面的内容： .comment-content-true a:hover,.wrapper-lg .entry-content a:hover{ color:#222;border-bottom-color:#222 } .comment-content-true a,.wrapper-lg .entry-content a{ color:#58666e;border-bottom-color:#222;border-bottom:1px solid #999;word-wrap:break-word;word-break:break-all } 自定义CSS： /*超链接特效*/ .comment-content-true a:not(.light-link):not(.post_inser_a), .wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a) { position: relative; margin: auto 4px; color: #23b7e5; -webkit-transition: color 0.3s; transition: color 0.3s; -webkit-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 50% 100%; perspective-origin: 50% 100%; word-wrap: break-word; word-break: break-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: inherit; width: inherit; } .comment-content-true a:not(.light-link):not(.post_inser_a):hover, .comment-content-true a:not(.light-link):not(.post_inser_a):focus, .wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover, .wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus { color: #fff; } .comment-content-true a:not(.light-link):not(.post_inser_a)::before, .comment-content-true a:not(.light-link):not(.post_inser_a)::after, .wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::before, .wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::after { position: absolute; top: 0; left: -4px; z-index: -1; box-sizing: content-box; padding: 0 4px; width: 100%; height: 100%; content: ''; } .comment-content-true a:not(.light-link):not(.post_inser_a)::before, .wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::before { background-color: #23b7e5; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .comment-content-true a:not(.light-link):not(.post_inser_a):hover::before, .comment-content-true a:not(.light-link):not(.post_inser_a):focus::before, .wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover::before, .wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus::before { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .comment-content-true a:not(.light-link):not(.post_inser_a)::after, .wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::after { border-bottom: 1px solid #23b7e5; } 自定义光标 (与5.3.1相同) 炫彩鼠标插件下载【链接】 因为这个插件不支持PJAX，效果不好，所以我把光标资源提取出来手写了个CSS。 以下内容放进自定义CSS里，光标路径改对，nomral.cur是默认光标，link.cur是手掌光标。 /*自定义光标*/ *{ cursor: url("/usr/customize/normal.cur"),auto !important; } a,a *,button,button *,.OwO-item,.OwO-logo,.OwO-logo *,.OwO-packages *{ cursor: url("/usr/customize/link.cur"),auto !important; } 修改版滑稽表情，微调表情栏 (与5.3.1相同) 打开/usr/themes/handsome/assets/js/features/OwO.min.js 删除这句： OwO 我个人给每个表情加上了注释，略微修改了顺序。 √> 下载链接：改版滑稽表情包.zip 食用方方法： 解压 把huaji文件夹丢进/usr/themes/handsome/usr/img/emotion/里 用OwO.json替换掉/usr/themes/handsome/usr/OwO.json 如果嫌表情太大，可以在自定义CSS里加上 img[class^="emotion-"] { max-height: 3em !important } 404页面按钮修改 打开/usr/themes/handsome/404.php 在第132行左右，把 到 之间改成下面这样： <?php _me("返回") ?> <a href="<?php $this->options->rootUrl(); ?>" class="list-group-item"> <?php _me("首页") ?> <?php if (!@in_array('hideLogin',$this->options->featuresetup)): ?> <a href="<?php $this->options->rootUrl(); ?>/admin/login.php" class="list-group-item"> <?php _me("登录") ?> <a href="<?php $this->options->rootUrl(); ?>/admin/register.php" class="list-group-item"> <?php _me("注册") ?> <?php endif; ?> ## Mac风格代码框 (与5.3.1相同) 插件下载&食用方法：【[链接](https://www.xcnte.com/archives/523/)】 略微修改了黑色主题的css，减少了代码框的外阴影，微移了复制按钮的位置 文件路径：`/usr/plugins/CodePrettify/static/styles/BlackMac.css` ```css code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;background:#313238;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:2;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}pre[class*="language-"]{padding:.5em;margin:.5em 0;overflow:auto;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#21252a}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999;}.token.punctuation{color:#ccc;}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a;}.token.function-name{color:#6196cc;}.token.boolean,.token.number,.token.function{color:#f08d49;}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555;}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd;}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699;}.token.operator,.token.entity,.token.url{color:#67cdcc;}.token.important,.token.bold{font-weight:bold;}.token.italic{font-style:italic;}.token.entity{cursor:help;}.token.inserted{color:green;}pre.line-numbers{padding-bottom:.8em;padding-left:3.3em;counter-reset:linenumber}pre.line-numbers>code{white-space:inherit font-size:15px}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-.1em;width:3em;letter-spacing:-1px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.9em;text-align:right;background:#272c33}div.code-toolbar{font-size:100%;border-radius:4px;position:relative;box-shadow:0 0 10px 1px rgba(0,0,0,.4);padding-top:30px;background-color:#161616;margin:20px 4 20px 4}.code-toolbar:before{content:" ";position:absolute;-webkit-border-radius:50%;border-radius:50%;background:#fc625d;width:11px;height:11px;left:10px;top:10px;-webkit-box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;z-index:2}div.code-toolbar>.toolbar{padding-right:.4em;position:absolute;top:.09em;right:0;width:100%;text-align:center;}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar>.toolbar .toolbar-item{padding:0 1px 1px 3px;display:inline-block}div.code-toolbar>.toolbar button{cursor:pointer;transition:all .3s;position:absolute;background-color:transparent;right:4px;top:4px;font-size:12px;line-height:12px;padding:3px 5px;border:1px solid;border-radius:6px;opacity:0;color:#FFF;}div.code-toolbar:hover button{opacity:1;}div.code-toolbar>.toolbar:hover{text-decoration:none!important}div.code-toolbar>.div.code-toolbar>.toolbar button,div.code-toolbar>.toolbar span{font-family:'Ubuntu',sans-serif;font-weight:bold;font-size:.9em;opacity:0;color:#FFF;}div.code-toolbar:hover .toolbar span{opacity:1;}#post-content .code-block-fullscreen{padding-top:32px;position:fixed;width:80vw;height:80vh;min-height:80vh;top:0;left:0;right:0;bottom:0;margin:auto;z-index:9999999;box-shadow:0 0 20px 0 rgba(255,255,255,.4);animation:elastic 1s;overflow:hidden;background:#21252a;}.code-block-fullscreen code{--widthA:100%;--widthB:calc(var(--widthA) - 30px);height:var(--widthB);min-height:99%;overflow-y:scroll;height:100%;}.code-block-fullscreen-html-scroll{overflow:hidden;}.shelter{width:6.5px;height:6.5px;z-index:100;background:#313238;position:absolute;bottom:0;right:0;}.max-img::-webkit-scrollbar-track-piece{background:#eee}.max-img::-webkit-scrollbar{width:8px;height:6px}.max-img::-webkit-scrollbar-thumb{border-radius:6px;background-color:#777}.max-img::-webkit-scrollbar-thumb:hover{background-color:#bbb}pre::-webkit-scrollbar-track-piece{}pre::-webkit-scrollbar{width:8px;height:6px}pre::-webkit-scrollbar-thumb{border-radius:4px;background-color:#cbcbcb}pre::-webkit-scrollbar-thumb:hover{background-color:#bbb}code::-webkit-scrollbar-track-piece{}code::-webkit-scrollbar{width:6px;height:6px}code::-webkit-scrollbar-thumb{border-radius:6px;background-color:#777}code::-webkit-scrollbar-thumb:hover{background-color:#bbb}html::-webkit-scrollbar-track-piece{background:#eee}html::-webkit-scrollbar{width:8px;height:6px}html::-webkit-scrollbar-thumb{border-radius:4px;background-color:#cbcbcb}html::-webkit-scrollbar-thumb:hover{background-color:#bbb} 复制后提示 (与5.3.1相同) 下载layer【链接】 解压后把layer文件夹丢进/usr/themes/handsome/assets/js/下 在主题外观设置里添加自定义javascriptdocument.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');}; 赞赏图标动画 (与5.3.1相同) 放进自定义CSS里： /*赞赏按钮动画*/ .btn-pay { border-radius: 15px 5px; transition: border-radius .1s } .btn-pay:hover { border-radius: 5px 15px; transition: border-radius .2s } 微调底栏 添加到自定义CSS里： /*底栏*/ .wrapper { padding: 10px } 其他微调 /* 时光机 */ .img-square { border-radius: 50%; } .list-group-item .thumb-sm .img-square { border-radius: 5px; } /* TAB部件 */ .post_tab li.active>a { background-color: #ebf9fd !important; } /* 其他文章部件 */ div.preview { transition: all 0.3s; } div.preview:hover { box-shadow: 0px 0px 10px rgba(30, 30, 30, 0.2); }