搜索到
8
篇与
Handsome
的结果
-
Handsome主题使用文档 相册创建相册新建分类：分类的缩略名称为image（这个是固定的，标识该分类是相册）。分类描述会输出到相册列表页面创建属于该分类的一篇文章，即创建了一个新的相册。文章的标题即相册的标题。在文章的自定义字段中添加字段名album，值为你的相册描述上传相片在属于相册分类新建一篇文章，在编辑器中添加图片即可。添加图片：允许以下的几种方式：使用自带的附件功能，上传并插入编辑器中使用markdown的图片语法，支持外站链接使用html语法，支持外站链接举例： <img src="图片地址" alt="图片描述">  <img src="http://localhost/build/usr/uploads/2018/05/1374653827.png" alt="奔跑的日子">主题代码会自动解析代码，并显示为相片格式，编辑器内多余的文字将不会显示*相关问题：编辑器无法解析HTML代码*内容加密handsome已经支持很多种内容加密方式，用最灵活的方式保障写作者的写作隐私问题。这篇文章是一个综合介绍全站加密加密后网站任何内容只有输入密码才能阅读，选择此种方式不知道密码的用户无法通过任何方式获取内容，包括无法通过feed订阅方式适合非常私密站点，比如日记本博客【加密方式】：外观设置——高级设置——全站访问密码分类加密v5.2.0及以上版本支持,必须配合最新版本主题插件对于分类加密下面的文章，是不能有多个分类的！否则加密失效！！加密分类输入密码才能阅读内容【加密方式】：第一步：在分类设置里面按照下面格式填写分类描述（下面四种方式只能且只需要填一种！）：//第一种方式：只是配置加密和对应的密码“1234” {"lock":true,"password":"1234"}</p><p> //第二种方式：还可以继续配置分类描述 {"lock":true,"password":"1234","desc":"一个加密的分类，输入密码后可见内容"}</p></li></ul></li></ul><pre v-pre="" data-lang=""><code class="lang-"> //第三种方式：还可以继续配置分类的图标 {"lock":true,"password":"1234","desc":"一个加密的分类，输入密码后可见内容","img":"https://i.loli.net/2019/05/01/5cc95872929ef.jpeg"} //第四种方式：也可以直接简单的填写文字表示分类描述，此时该分类不会加密 一个普通的分类描述而已。第二步：在links插件设置里面填写需要加密的分类的mid，这一步不完成的时候别人仍然可以通过feed查看到加密内容分类隐藏v5.2.0及以上版本支持,必须配合最新版本主题插件在主题插件中填写需要隐藏的分类mid即可分类隐藏仅仅是在首页不显示该分类的文章，游客仍然可以根据文章地址查看内容，左侧边栏的分类列表仍然会显示隐藏分类【适用场景】：比较适合自己的一些小片段笔记，不希望直接显示在首页文章加密整篇文章加密是typecho提供的功能，不多说【加密方式】：在文章编辑页面右侧的高级功能，里面有密码选项【相关问题】：输入正确密码显示密码错误为什么？文章部分内容回复可见游客回复并且评论通过审核后可以可见一般可以用在资源分享的帖子，增加内容的参与度【加密方式】：文章部分内容隐藏文章部分内容登录用户可见对于单用户的博客，也就是博客主人可见，这里可以写一写比较隐私的内容。【加密方式】：文章部分内容登录可见万物皆可RSS 配置 想法来源于熊猫小A的博客。 能做哪些事情？可以把任何有RSS源网站内容可以聚合在时光机页面内。比如微博、微信公众号、（前两个需要RSShub的开源服务支持）另一个博客的内容等等。对代码不了解的伙伴们直接看下一个说明（简单配置微博），后面的都不要看了！！简单配置微博{"id":"weibo","name":"微博","url":"https://rsshub.app/weibo/user/5631723091"}直接把上面的代码复制到配置框中，https://rsshub.app/weibo/user/5631723091 最后的一串数字5631723091是你的微博UID，打开你的微博的主页的地址中有的配置项填写id ：rss标识符，任何字母（id请勿重复）。比如微博，可以是weiboname ：rss内容标题，一般是中文。如果是微博，就直接填微博url ：rss源地址比如微博，就是https://rsshub.app/weibo/user/5631723091（这个源有时候不稳定，可以用另一个）或者https://rsshub.app/weibo/user2/5631723091比如别的博客内容：一般的博客系统都支持生成RSS订阅地址的，比如我的博客就是https://www.ihewro.com/feed/只要是RSS源地址，都是支持的img （非必填项）：代表该栏目的图片，以头像形式显示。建议是正方形的。填写图片的url地址即可type（非必填项）：显示的内容形式discription 仅显示文章摘要（有的RSS源摘要中包含整个文章内容）（不填的话，默认是这个）title 仅显示文章标题mix 显示标题+摘要 （暂不支持）RSS 源禁止跨域怎么办？最简单的解决办法是：在原有的RSS源地址前面加上https://cors-anywhere.herokuapp.com/举例：https://api.fanfou.com/statuses/user_timeline/~k40sgjV_6kg.rss 该源是禁止跨域的，所有无法请求到（浏览器可以正常访问，但是无法通过代码获取数据），修改后的源地址为：https://cors-anywhere.herokuapp.com/https://api.fanfou.com/statuses/user_timeline/~k40sgjV_6kg.rss填url属性就填后者即可。（可能速度会有些影响） 独立页面主题内置了五套自定义模板 时光机、文章归档、友情链接和留言板和豆瓣书单。使用方法在后台了撰写——创建页面的右下角的自定义模板选择相应的自定义模板即可。下面简单介绍自定义模板的使用方法。时光机关注微信公众号ihewro（我要起飞啦熬）按照微信公众号发送时光机 即可通过微信公众号同步发送到handsome主题的博客中填写地址的时候，必须填写为 cross.html（是地址，不是标题！！！标题随便写，但是地址要固定的，否则首页无法读取内容）外观设置——初级设置——首页左侧边栏头像的链接地址 默认是时光机页面的地址，你可以修改内容框里面不用填任何东西，这个页面在前台（就是直接打开这个独立页面，然后在登录的状态下）就可以发布“说说”，用来记录你的日常和心情的~看不到输入框：请确保你已经登录了，并且该独立页面允许评论（只有管理员登录后才会显示输入框，游客是看不见的，请放心）如何删除说说：在后台的评论管理中删掉该页面的对应评论即可。说说不能发表图片： 见常见问题文章归档地址随意填写。内容框不用填任何内容。这个页面会自动把你所有文章以时间树的形式显示出来。友情链接地址随意填写。这个页面自动输出links插件里面设置的友情链接。（具体用法见插件设置）友情链接页面的本博信息在独立页面的输入框中填写即可，会和链接一起输出。留言板地址随意填写。这个页面会自动输出评论数最多的前15名。如果需要填写自定义内容在输出框中填写即可，会一起输出。豆瓣清单地址随意填写。这个页面会自动输出你的豆瓣书单（已读的书）、电影清单（已看的电影）。在自定义字段中填写：名称为doubanID,值为你的豆瓣ID。访问该网址以检查的ID是否正确：https://www.douban.com/people/你的豆瓣ID/，填写的是豆瓣ID，不是整个url地址因为需要写入缓存文件，请确保你的主题下的aseets/cache目录可写请确保的你的豆瓣有已看的电影和已读的书的数据，不然会显示错误。图书数据不能显示，一直显示“数据已添加成功，请刷新一次”，刷新了还是显示不了的话，一般是全站静态缓存了，请修改你的cdn缓存策略，不要全站静态缓存，缓存静态资源（.jpg .css .js）之类文件即可 ![3.jpg][2]github项目地址随意填写这个页面会输出你所想要输出的github项目名称你有两种方式显示你的github项目：输出所有的你的github项目受限制与github提供的api限制，你只能显示30个你的github项目清单在自定义字段中填写：名称为github，值为你的github用户名自定义输出项目（待开发，暂不能使用）在编辑器中按照下面的格式填写：[github="用户名/仓库名"] //举例： [github="ihewro/typecho-theme-leaf"] 评论系统主题内置Typecho原生评论系统，同样支持任何第三方评论服务（如：多说，disqus，畅言等）。使用原生评论系统你可以通过后台外观设置中这些开关来加强原生评论系统：「评论系统——原生评论框的背景图片」设置评论框的背景图片。「评论系统——默认评论者头像」设置默认的gravatar头像。「主题增强功能——启用ajax评论」获取无刷新评论体验。Q：如何更好的防止垃圾评论？A：推荐SmartSpam 使用畅言在后台外观设置——评论设置 选择 畅言，填写畅言appid和填写畅言conf参数。使用其他第三方评论系统在后台外观设置——评论设置 选择 其他第三方评论系统。找到主题目录下的usr/third_party_comments.php，增加第三方评论系统的代码。（不推荐，第三方评论不仅不稳定，而且不一定与主题的pjax兼容，如果不兼容，请在后台外观设置中关闭pjax！）关闭评论适用于部分特殊情况需要关闭。 增强功能博文头图分为两种：首页头图：首页每篇文章顶部的图片文章头图：每篇文章详情页面顶部的图片具体见上图指示。在文章的编辑页面可以对单篇文章的头图进行控制在后台的外观设置中可以对这两部分进行整体个性化设置： 1. 个性化首页头图样式： 大版式头图小版式头图图片版式头图在后台外观设置——外观设置开关中选择。缩小版头图显示即所有文章默认显示小版式头图。每篇文章的编辑页面都可以选择首页头图样式，这里的设置会无视掉上面设置中的效果（仅对该篇文章有效），这样就实现大版式和小版式头图交叉的效果。 2. 个性化头图来源： 在后台主题增强功能——博客头图来源设置中选择。提供四种方式：只显示随机图片显示顺序：thumb自定义字段——文章第一个附件——文章第一张图片显示顺序：thumb自定义字段——文章第一个附件——文章第一张图片——随机图片(推荐)显示顺序：thumb自定义字段——随机图片以第三种为例，当thumb字段为空的时候，会寻找文章的第一个附件，附件不是图片，会继续寻找文章中第一张图片，文章中如果没有图片的话再去加载随机图片。其他选项亦是同理。文章的随机头图的图片存放位置为： 主题目录下的usr/img/sj 右侧边栏的随机图片的存放位置为：usr/img/sj2 3. 个性化头图显示： 不显示文章页面头图不显示首页头图在后台外观设置——外观设置开关选择文章页面不显示头图或首页不显示头图，将会默认不显示文章页面或者首页文章顶部的头图。每篇文章的编辑页面底部的自定义字段中，字段名为thumb,当值为no的时候，会不显示当前文章的头图（首页头图和文章头图）（仅对当前文章有效）,这里的设置同样会无视上面的设置。灯箱插件文章中如果某个图片不想显示灯箱效果，可以给图片标签中加入nogallery属性：<img nogallery src="">如果某张图片高度很大，想折叠展示，可以给图片标签加入max属性：<img max src="">DNS预解析这个功能即将被删除DNS prefetching通过指定具体的URL来告知客户端未来会用到相关的资源，告诉客户端可以尽早的解析DNS。更多详细信息，请戳这个文章目录树文章中的目录树已经内置代码，仅当文章有h2 h3 h4标题 才会生成目录树，并且手机端不显示目录树。注意：如果文章中没有h2标题，只有h3 h4标题是不会生成目录树的。侧边栏的标签云需要在新建文章的页面右侧填写标签，才会在首页侧边栏输出的。(回车添加当前标签)自定义摘要字数大版式头图默认摘要字数200字，小版式头图默认摘要字数80字。你可以在后台外观设置->自定义大版式头图摘要/自定义小版式头图摘要来改变这两个默认值。你还可以使用摘要分隔符进行自主截断内容输出，但是自主生成的摘要不会超过默认摘要字数。举例：你的默认摘要字数设置为200字，使用摘要分隔符截断的摘要为230字，则摘要只会显示200字。<!--more-->添加自定义图标主题已经内置的图标列表，详见图标列表如果不能满足你的图标需求，可以使用以下方法扩充主题图标：方法一：傻瓜式扩充fontawesome图标直接引入全套的fontawesome图标：在主题外观设置——开发者设置——自定义输出head 头部的HTML代码，填入：<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">上面的fontawesome 的css文件来自bootcdn.css 公共cdn提供，你可以替换成自己的文件。方法二：自定义添加iconfont图标列表主题内置fontello图标来自网站http://fontello.com/你可以在该网站中导入主题目录下的assets/fonts/fontello的config.json，然后重新生成字体文件。覆盖到assets/fonts/fontello下，并且需要修改assets/css/handsome.css中形如.fontello-*:before，替换为下载的新的标签。（难度较大，不推荐……）文章中插入按钮handsome支持以下类型的按钮：矩形文字按钮椭圆形文字按钮矩形图标文字按钮[button]矩形按钮文字[/button] [button color="succees"]矩形按钮文字[/button] [button type="round" color="success"]椭圆形按钮文字[/button] [button color="success" icon="glyphicon glyphicon-eur"]图标按钮文字[/button]type：选填，不填默认为矩形按钮。可选值：round：椭圆形按钮 color： 选填，不填默认为success（绿色），可选值：light：白色info：蓝色dark：深色success：绿色black：黑色warning：黄色primary：紫色danger：红色icon：选填，不填默认为文字按钮，可用按钮见图标列表url:选填，填写点击的链接。举例：如果你的链接是http://www.baidu.com，请手动将/前面加一个反斜杆\，即http:\/\/www.baidu.com举例：[button color="danger" icon="fontello fontello-gratipay" url="http:\/\/wpa.qq.com\/msgrd?v=3&uin=535425690&site=qq&menu=yes"]点击QQ咨询购买（√推荐）[/button] [button color="success" icon="glyphicon glyphicon-send" url="mailto:ihewro@163.com"]ihewro#163.com[/button]文章内插入音乐点击编辑器的插入音乐图标可以在文章内可以插入音乐歌曲地址，支持云解析和本地MP3地址两种方式：时光机的音乐插入按钮也是同样的操作 云解析歌曲：暂时支持解析单曲，不支持歌单，支持以下媒体： 网易云音乐：http://music.163.com/#/song?id=40147556QQ音乐：https://y.qq.com/n/yqq/song/000jDQWP4JiB3y.html虾米音乐：http://www.xiami.com/song/bf08DNT3035f酷狗音乐：http://www.kugou.com/song/#hash=09E8DE70A24C97B92A29F6A19F3528A2百度音乐：http://music.baidu.com/song/268275324 本地mp3地址播放： 示例：直接在输入框中输入.mp3结尾的地址，并填写歌曲名和歌手的名称。[hplayer title="歌曲名" author="歌手" url="http:\/\/xxx.com\/xxx.mp3" size="large" /]文章页面插入播放器size默认为large时光机插入播放器size默认为small你也可以手动改动这个标签的内容以选择不同的播放器样式:)文章内插入视频点击编辑器的插入音乐图标可以插入视频，只支持本地的视频地址的播放时光机的视频插入按钮也是同样的操作直接在输入框中输入视频的地址即可，一般以.mp4结尾的资源地址。示例：[vplayer url="http://xxx.com/xxx.mp4" pic="http://xxx.com/xxx.png"]url：视频地址pic：视频背景图片相关问题：默认的播放器比较简单，复杂需求可以尝试DPlayer-Typecho，主题已经内置适配代码。文章内调用其他文章点击编辑器的调用文章的按钮可以调用其他文章并显示。[post cid="1" /] [post cid="1" cover="http:\/\/localhost\/build\/usr\/themes\/handsome\/usr\/img\/sj\/6.jpg"/] cid：必填，是文章的唯一编号，在后台的编辑文章的地址可以看到，比如http://localhost/build/admin/write-post.php?cid=23,值为23cover：可选项，调用文章显示的封面，如果不填则默认显示随机缩略图。文章内调用外链网站v5.0及其以上版本支持调用外链[post url="https:\/\/www.ihewro.com" title="友人C" intro="一个个人博客" cover="http://www.ihewro.com/img/xxx.jpg" /]title：必填，外链的名称/标题url：必填，外链的地址（请填写绝对地址，就是浏览器地址栏什么样的就填什么样的）intro：（可选）外链网站的简介/介绍cover：（选填）外链网站的介绍图片地址文章内插入相册v5.1 版本及其以上支持使用方法：[album](插入图片，支持图片的HTML格式或者是markdown语法都可以，支持外链或者附件上传均可)[/album]举例：//方式1（markdown语法） [album] ![图片描述1][1] ![图片描述2][2] [/album] [1]: http://xxx.com/xxx1.jpg [2]: http://xxx.com/xxx2.jpg //方式2（markdown语法） [album]   [/album] //方式3（HTML语法） [album] <img src="http://xxx.com/xxx1.jpg" alt="图片描述1" /> <img src="http://xxx.com/xxx2.jpg" alt="图片描述2" /> [/album]相关问题：typecho1.1版本编辑器无法解析HTML代码文章中使用mathJax公式需要在后台外观设置——主题增强功能中启用公式（MathJax）选项。语法格式：//块级公式： $$ 公式内容 $$ $$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$ // 行内公式： $ 行内公式内容 $ \\( 行内公式内容 \\) $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ \\( x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} \\)文章内部分隐藏回复可见在文章使用使用标签包裹住你想要隐藏的内容，游客必须先回复后才能查看隐藏内容。文章内部分内容登录可见为什么增加这样的功能呢？因为有时候一篇文章并不想完全的加密，部分内容由于隐私问题需要加密。该部分内容仅登录用户（如果是个人博客就是仅博主）可见。在文章中使用文章中插入短代码高亮文本[scode type="share"]这是灰色的短代码框，常用来引用资料什么的[/scode] [scode type="yellow"]这是黄色的短代码框，常用来做提示，引起读者注意。[/scode] [scode type="red"]这是红色的短代码框，用于严重警告什么的。[/scode] [scode type="lblue"]这是浅蓝色的短代码框，用于显示一些信息。[/scode] [scode type="green"]这是绿色的短代码框，显示一些推荐信息。[/scode]文章中插入收缩框示例代码：[collapse title="标题" status="false"]一些文字内容[/collapse] [collapse title="标题"]一些文字内容[/collapse]其中status为false 表示默认不显示文字内容，为true表示默认显示内容。不写status 属性，默认是展开内容的。文章内插入标签卡示例代码：[tabs] [tab name="标签页 1" active="true"]内容 1[/tab] [tab name="标签页 2"]内容 2[/tab] [/tabs]每个tab 都必须包括name属性，只能有一个tab 添加active属性，表示默认显示该tab的内容。此外tab支持更多css的属性，比如颜色，字体粗细等：[tab name="标签页 2" color:"#000" font-weight="bold"]高级内容文本示例[/tab]文章内插入标签示例代码：[tag]默认白色文字[/tag] [tag type="primary"]紫色文字[/tag] [tag type="info"]蓝色文字[/tag] [tag type="warning"]黄色文字[/tag] [tag type="danger"]红色文字[/tag] [tag type="success"]绿色文字[/tag] [tag type="dark"]黑色文字[/tag]文章内插入图集示例代码：默认样式是pc端一行最多显示3个，根据屏幕尺寸调整每行显示的图片个数[alubm] [普通的图片插入，支持markdown语法和html语法，混合也可以] [/album]增加type="photos" 则album下的图片排成一行，并根据图片的长高比自动排列[alubm type="photos"] [普通的图片插入，支持markdown语法和html语法，混合也可以] [/album]博客时间友好格式化 使用效果 几小时前 几天前 几月前 几年前当时间不是整小时/天/月/年 时会显示默认的时间格式 开启方法 后台选择设置——评论——评论日期格式 内填写natural。在这里同样可以修改博客的时间格式为你需要的时间格式，值为标准的php格式。如标准时间格式：Y-n-j H:i:s 首页轮播图设置样例代码：{"title":"第一篇文章","link":"","cover":"","desc":""}, {"title":"第一篇文章","link":"","cover":"","desc":""}{"title":"handsome —— 一如少年般模样","link":"http://www.ihewro.com", "cover":"xxx.jpg","desc":"在复杂中，保持简洁。 一款精心打磨后的typecho主题。"}, {"title":"Focus——不只是RSS订阅器","link":"","cover":"xxx.jpg","desc":"拒绝信息化的算法推送"}属性介绍：title: 文章标题link: 文章的地址cover: 文章图片地址，比例建议8：3，不要太小，否则显示的不清楚desc: 简单描述（不要太长）最后一个}后面不要加上英文逗号 评论表情只需要修改主题目录下面的usr/OwO.json文件修改表情主题内置三个栏目颜文字和阿鲁和推特直接在原有的代码上面做一些修改即可，比如图片替换，文字替换等。（具体代码含义见下面 ）增加新的表情栏目"新的表情栏目名称": { "name": "表情包文件夹名称",//只有图片表情类型才需要加这一项 "type": "emoticon/emoji/image", "container": [ { "icon": "OωO", "text": "Author: DIYgod" }, { "icon": "OωO", "text": "Author: DIYgod" }, ] }评论表情图片存储在主题目录下的usr/img/emotion表情名称name：该项只有当表情类型为图片表情时候才需要添加name的值对应了emotion文件夹下的表情包文件夹名称。如值为aru，文件夹名称对应为aru。建议填写英文表情类别type有三种:emoticon: 颜文字emoji: emoji表情（比如这些图标，typecho的数据库类型默认不支持emoji编码）image: 图片表情，只支持.png 后缀的图片container下存储的是表情的具体内容：icon：表示的表情具体内容：颜文字就填具体的颜文字emoji表情就填具体的emoji图标图片表情填写对应图片的文件名，如angry.png，填angrytext:指的是鼠标悬停在表情上面显示的提示文字，一般为中文提示 图标列表主题内置了大量的网页图标 (非图片格式)，方便在 自定义栏目中使用。可用图标handsome v4.3.1 由原来的fa fa- 修改为fontello fontello-，是为了避免与fontawesome库冲突，你可以自行引入该图标库，以便使用更多图标，但是会带来一定的加载体积。引入更多图标1. 主题内置的iconfont图标：2. 主题内置的fontello图标： 3. bootcss自带的Glyphicons字体图标： 详细见Glyphicons 字体图标4. 主题内置的feather图标支持 feather的所有图标。第一项和第二项的图标很少，如果找不到相应图标，建议在第三项的图标库中寻找相关问题：自定义栏目的图标使用使用方法举个例子： <!--首页名称左侧的图标设置项，直接填写class的内容即可，如：--> <!--iconfont图标--> iconfont icon-xxx <!--Glyphicons图标--> glyphicon glyphicon-eur <!--fontello图标--> fontello fontello-xxx <!--feather图标--> xxx <!--下面三种是一般的HTML用法，一般是使用不到的--> <!--iconfont图标--> <i class="iconfont icon-xxx"></i> <!--Glyphicons图标--> <i class="glyphicon glyphicon-eur"></i> <!--fontello图标--> <i class="fontello fontello-xxx"></i> <!--feather图标--> <i data-feather="xxx"></i> 使用用途：直接修改主题内的图标，主题的所有图标都是使用的是网页图标，你可以更换图标的类名来更换图标。 （不推荐，因为更新后会覆盖修改内容）在 自定义左侧边栏栏目 和 自定义顶部导航按钮 和 首页名称左侧的图标设置项 中使用。具体见：自定义栏目 速度优化本地图片云存储(镜像)加速4.3.0 进行了升级，请务必重新更新配置在配置框按照格式填写（镜像空间的自定义域名）| (域名商)如：http://assets.ihewro.com | UPYUN实现思路就是：将博客服务器本地图片资源地址都转换为镜像空间的地址，访问云服务商的镜像空间，通常能获得更快的速度。下面分别写下又拍云和七牛云的配置过程： 又拍云举例： 创建服务——CDN按照下图配置创建完成后，需要在域名解析中，将刚才的加速域名解析到给定分配的cname地址 在服务配置的——回源管理——开启源站资源迁移 七牛云举例： 选择对象存储——镜像存储——填写镜像空间地址注意：你的七牛空间必须在镜像存储的设置项中填写你的博客地址(例如：https://www.ihewro.com/)，这样才能达到加速的效果。云存储选项其实主题外观设置那里写的比较清楚了。webp格式目前主要是Chrome支持，所以一般正确的用法是，不要在后台启用webp图片格式。而是去云服务器商的图片处理设置里开启webp的自适应（比如又拍云的就是在性能优化——WebP自适应选项，开启了就可以了），会自动根据浏览器支持情况来是否转换为webp格式。将本地静态资源上传到你的cdn上如果设置了本地图片云存储(镜像)加速，这个选项无需再配置了。因为上面的选项就相当于全站镜像到云服务器商，博客的静态资源会直接访问镜像空间的资源。请在你的云存储服务商设置允许资源的跨域访问，否则会导致字体文件无法访问而显示页面图标。如果不知道如何设置，可以发工单问客服（这是最简单的方法，因为不同服务器提供商具体设置我也不是很清楚），一般能够得到解决方法。需要在后台外观设置——将本地静态资源上传到你的cdn上中配置：使用该项设置前，你必须有自己搭建的cdn服务器（不是指当前服务器）主题目录下的/assets/目录下有 css、js、fonts、img四个静态资源文件夹。你需要把asset目录上传到你的cdn服务器上，比如CDN服务器的 handsome目录里，地址即为 https://cdn.ihewro.com/handsome/assets/在当前框中就填入该地址，主题就会引用你搭建的cdn上面的资源，而不再引用当前服务器上的资源热心用户提供的静态资源服务器地址 星路博客 为了提高各位使用Handsome主题的用户的加载速度，星路博客的博主将Handsome主题的静态文件全部处理后存放在阿里云CDN上，未设置防盗链。供各位博主使用。为了节约钱财（博主穷），请不要大量访问。Handsome主题的后台设置-速度优化-将本地静态资源上传到你的cdn上中填写：//格式： https://asset.starroad.top/handsome/{版本号}/ //举例： https://asset.starroad.top/handsome/5.0.0 https://asset.starroad.top/handsome/5.1.0 https://asset.starroad.top/handsome/5.1.1提供5.0.0-5.1.1的静态文件。如有其他问题，请参见本博客博文。 Peter Peng //格式： https://ufile.goldpetergood.top/HandSome/版本号/assets //举例： https://ufile.goldpetergood.top/HandSome/5.2.0 https://ufile.goldpetergood.top/HandSome/5.3.0 多语言设置主题内置了多语言包，默认选择根据浏览器自动选择语言，后台外观设置可以手动修改语言。多语言分为两部分：主题默认集成多语言文件（在主题的根目录的lang文件夹下）用户自定义语言文件（在主题的根目录usr/lang文件夹下）用户自定义语言文件优先级最高，请勿修改默认翻译文件（lang/目录下面的语言文件），只要修改usr/lang下的语言文件即可。通过修改相应的语言文件，可以更改主题里面**任何词组**和**时间格式**。在本文最后会举几个例子方便大家自行修改。 语言显示规则Auto ：自动根据用户浏览器的语言设置显示相应的语言文件。简体中文 ：显示顺序依次是：usr/lang/zh_CN.php —> lang/zh_CN.php，其他的语言文件（如zh_TW.php）则不会生效。其他语言设置同理。修改主题默认翻译以语言设置中选择了使用简体中文为例比如：文章页面的「浏览次数」默认显示为「200次浏览」，希望改成「200次小伙伴来过」在usr/lang/zh_CN.php修改如下：/** * @return array 返回包含翻译文本的数组 */ public function translated() { return array( '次浏览' => '次小伙伴来过' //添加翻译的词汇,每两组之间，用英文逗号隔开 ); }注意，语言文件的翻译，是针对**已存在的词组**进行重新翻译，**而不是对任意汉字或不存在的词组翻译**。打开`lang/zh_TW.php` 可以看到所有可以翻译的词组。（目前所有翻译词组没有分类，有些凌乱，v4.0.0会进行整理） 再比如：文章顶部的「最后修改时间的时间格式」，默认为：「Y 年 m 月 d 日 h : i A」，想要修改为24进制时间在相应的语言文件的翻译函数里面增加：'Y 年 m 月 d 日 h : i A' => 'Y 年 m 月 d 日 G : i "修改其他语言同上所述，是完全一样的。增加自定义语言文件主题默认集成了中文简体、中文繁体、英语三种语言设置。首先需要了解多语言文件的命名规则：多语言文件名称 = Locale Code + .php。如 zh_CN.php和en.php一些常见语言的Local Code：zh_CN: 中文简体 zh_HK: 中文繁体，港澳 zh_TW: 中文繁体，台湾 en : 英语 en_US: 英语，美式 en_CA: 英语，加拿大 en_AU: 英语，澳洲 ja : 日语 ko : 韩语如果你想再增加一份新的语言文件，比如 日语首先在usr/lang目录下创建语言文件：ja.php文件初始化内容如下：<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; /** * ja.php * Author : Your name * Date : * Version : * Description: */ class Usr_Lang_ja extends Lang { /** * @return string 返回语言名称 */ public function name() { return "日语"; } /** * @return array 返回包含翻译文本的数组 */ public function translated() { return array( '首页' => '家', '分类' => '分類' ); } public function dateFormat() { return "月のM Y D日"; } }在文件中的translated函数里面，按照格式填写翻译内容即可。最后在后台语言设置中选择日语即可。自己创建的语言文件中，需要对所有的**已存在的词组进行翻译**，否则将默认返回简体中文默认的词组。这项工作量要远远大于修改主题默认翻译。 自定义栏目主题外观设置中提供了非常简单的自定义设置，无需修改主题源码即可配置以下自定义栏目。配置中可以实现两个功能，一种是 添加自定义栏目/按钮，另一种是隐藏主题默认栏目/按钮。1. 左侧导航栏目 2. 顶部导航按钮 3. 时光机的社会化图标 4. 时光机的联系方式内容下面配置中所有的可用网页图标列表，参考[图标列表](/icons) 左侧边栏导航添加自定义栏目：name：代表显示栏目/按钮的名称class：使用图标库中的第1-3种的图标的classfeather：使用图标库第4种图标使用该属性link：代表栏目/按钮的链接target（可选）: 代表定在何处打开链接文档，如_blank:浏览器总在一个新打开、未命名的窗口中载入目标文档。_self:代表在当前窗口打开。不填则为：_blank。更多介绍{"name":"音乐","class":"glyphicon glyphicon-music","link":"xxx.com"}, {"name":"音乐2","feather":"music","link":"xxx.com"}, {"name":"笔记","class":"glyphicon glyphicon-book","link":"xxx.com"}, {"name":"相册","class":"fontello fontello-picture","link":"xxx.com","target":"_self"}每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。检查配置语法是否正确的方法：将配置内容复制到json校验 网站中，可以检查你的填写配置语法是否正确。不显示图标，原因可能是语法错误或者图标根本就不在图标列表中，只能使用图标列表中的图标。如果想要链接ajax（无刷新）的点击效果，确保你的链接是绝对地址（浏览器地址栏什么样的就是怎么填）而且是本站地址，并且target属性为_self。隐藏默认栏目：左侧边栏目默认加载首页按钮。隐藏方法：{"name":"home","status":"hide"}顶部导航栏目添加自定义栏目：与左侧边栏导航配置的书写规则完全相同：{"name":"音乐","class":"fa fa-music","link":"xxx.com"}, {"name":"相册","class":"fontello fontello-picture","link":"xxx.com","target":"_self"}每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。检查配置语法是否正确的方法：将配置内容复制到json校验 网站中，可以检查你的填写配置语法是否正确。不显示图标，原因可能是语法错误或者图标根本就不在图标列表中，只能使用图标列表中的图标。如果想要链接ajax（无刷新）的点击效果，确保你的链接是绝对地址（浏览器地址栏什么样的就是怎么填）而且是本站地址，并且target属性为_self。隐藏默认栏目：顶部导航按钮默认加载闲言碎语按钮。隐藏方法：{"name":"talk","status":"hide"}时光机社会化图标默认已经填入了配置，书写规则和上面基本类似：name：代表显示按钮的名称class：表示按钮的网页图标的样式link：代表按钮的链接status：当status值为single时，特指页面中的绿色文字按钮，此时无需填写class项。{"name":"twitter","class":"fa fa-twitter","link":"#"}, {"name":"facebook","class":"fa fa-facebook","link":"#"}, {"name":"googlepluse","class":"fa fa-google-plus","link":"#"}, {"name":"github","status":"single","link":"#"}简单配置，只需要修改"value"和"link"的值（修改# 那个位置的值，不要修改错位置！！）。高级配置，模仿上面的写法，增加或者删除相应的项目即可。每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号！！时光机联系方式默认已经填写email、QQ、微博以及网易云音乐的配置：name：代表显示栏目的名称img：表示该联系方式的图标（图片格式）link：代表联系方式的地址{"name":"email","img":"https://ww4.sinaimg.cn/large/a15b4afegy1fg2pmtjbaej201s01s0aw","value":"ihewro@163.com","link":"#"}, {"name":"QQ","img":"https://ww4.sinaimg.cn/large/a15b4afegy1fg2pnirhr2j201s01va9u","value":"535425690","link":"#"}, {"name":"微博","img":"https://ww4.sinaimg.cn/large/a15b4afegy1fg2pofbz5fj201s01swe9","value":"@i超级男孩","link":"http://weibo.com/hewro"}, {"name":"网易云音乐","img":"https://ww4.sinaimg.cn/large/a15b4afegy1fg2pouholzj201s01s0ja","value":"@许多年以后我依然是我","link":"http://music.163.com/#/user/home?id=83271175"}简单配置，只需要修改"value"和"link"的值（修改# 那个位置的值，不要修改错位置！！）。高级配置，模仿上面的写法，增加或者删除相应的项目即可。每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号！！ 个性化修改以下模块由勤劳的使用者提供的关于handsome主题的自定义修改内容，你可以应用到自己的主题中来。欢迎投稿，感谢！ handsome用户分享社区用户可以在「handsome自助授权平台」中添加教程，可以添加任何你觉得不错的教程本博客基于Handsome主题的一些小修改教程这篇文章主要是typecho下的彩色标签云实现方式一个追番列表独立页模板把可爱的 Pio 捉到博客上吧！Typecho 在主题与 EditorMD 前台解析冲突的情况下使用其样式ColorHighlight插件实现Mac风格代码高亮Typecho下实现一键评论打卡功能安利一款Hansome主题专用的UserAgent插件神代綺凜式魔改出现的相关问题解决附魔改教程handsome主题美化/修改教程 typecho相关以下内容与主题无关，是为了方便typecho新手更快熟悉这个博客系统而创建的。以下内容不断补充，如果你有更好的推荐和建议，欢迎一起充实。好用的编辑器插件 插件名称 介绍 Editor.md for Typecho Markdown 编辑器，主要是支持markdown语法的 UEditor-for-Typecho 这款是html编辑器，适合新手用，简单方便，功能强大 MyEditor:MyEditor 是一款采用TinyMCE核心，支持切换编辑器、插入图片的Typecho编辑器插件。 邮件通知插件插件 插件名称 介绍 Mailer typecho 创始人对typecho1.1 适配的插件，必须是1.1+版本才可以，因为文字中给的是Mailer.tar.gz 后缀，我解压了上传到百度云的是zip包，直接下载百度云那个即可。 CommentToMail（羽飞原版） 老牌的typecho评论通知插件，可是很多小伙伴们说后台怎么配置都无法发信，韩红听了都想打人，我用的可以。 CommentToMail（更新版1） 王忘杰更新版本： 更新了PHP Mailer版本关闭了使用SMTP发信的证书认证（QQ邮箱证书加密级别太低） CommentToMail（更新版2） 致远博客更新版本：使用网址监控方法避免异步触发失败 个人喜欢的其他插件 插件名称 介绍 SmartSpam 非常强大的一款Typecho智能评论过滤插件，就此别过垃圾评论的入侵者吧。 AutoTags 标签自动生成插件，避免了手动填写Tag，对我这种懒得填tag的人很有帮助。 Parsedown Plugin 弥补了typecho1.0正式版本md语法不支持表格的缺陷。 Sticky 一个小巧的文章置顶插件。 APlayer 是在原作者ZGQ394基础上由FaithPatrick修改而来。一款很好看的音乐播放器插件。 主题外观配色指南主题支持单栏、双栏、三栏。主题布局非常丰富，通过后台的外观设置，轻松搭配不一样的博客风格。布局单栏——极简模式外观设置——置顶导航 开启（最侧边栏置顶）外观设界面——页面元素显示设置——右侧边栏元素控制——不显示整体（不显示右侧边栏）双栏模式上面的两个操作执行一个即可三栏模式默认，显示更多的信息配色选择在外观设置——主题色调选择，可以看到主题默认内置了14种配色。如默认的dark-white-dark分别代表：「左侧边栏和上导航栏的交集部分（logo位置）」、「上导航栏」、「侧导航栏」。自定义主题色调自定义搭配已有的颜色（后续考虑提供更多的配色）:black纯黑色white白色info蓝色success绿色danger深红色dark深色light灰白色primary紫色其中dker 表示当前颜色增强搭配样例：全白配色即填写：white-white-white 其他配色举例：white-white-white white dker-white-white dark-light-light分别代表：「左侧边栏和上导航栏的交集部分（logo位置）」、「上导航栏」、「侧导航栏」的颜色。 -
Handsome主题静态资源加速 - 星路博客 前言为了提高各位使用Handsome主题的用户的加载速度，博主将Handsome主题的静态文件全部处理后存放在阿里云CDN上，未设置防盗链。供各位博主使用。提供版本Updata 2020-01-03已经为各位博主大佬准备好了V5.3.1的更新。Updata 2019-12-06已经为各位博主大佬准备好了V6.0.0的更新。Updata 2019-09-19已经为各位博主大佬准备好了V5.3.0的更新。Updata 2019-07-21已经为各位博主大佬准备好了V5.2.0的更新。使用方法Handsome主题的后台设置-速度优化-将本地静态资源上传到你的cdn中填写你所需版本链接：https://asset.starroad.top/handsome/5.0.0/ https://asset.starroad.top/handsome/5.1.0/ https://asset.starroad.top/handsome/5.1.1/ https://asset.starroad.top/handsome/5.2.0/ https://asset.starroad.top/handsome/5.3.0/ https://asset.starroad.top/handsome/5.3.1/ https://asset.starroad.top/handsome/6.0.0/注意事项提供5.0.0-6.0.0的静态文件，其余版本若有需求，请提供文件并评论。谢谢！[button color="success" icon="glyphicon glyphicon-link" url="https://www.starroad.top/archives/184.html" type=""]星路博客[/button]
-
自定义Handsome主题默认头图（支持多站点） 想法因为handsome主题的默认头图有点单调，想加点图片，想了几个需求，总结了下来。能添加多个站子的图片不用自己的blog存储资源尽量少更改主题代码，便于更新主题的时候恢复用法首先把文章最后的代码存到一个php文件里，位置任意，我这里的位置为/code/get_img.php打开/usr/themes/handsome/libs/Content.php文件找到whenSwitchHeaderImgSrc函数附近注释掉$randomNum = unserialize(INDEX_IMAGE_ARRAY);和$random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';添加一行$random = '/code/get_img.php?_='.rand(999, 3000);修改完的Content.php文件whenSwitchHeaderImgSrc函数附近应该是长这样的。public static function whenSwitchHeaderImgSrc($index =0,$howToThumb,$attach,$content,$thumbField){ $options = mget(); //$randomNum = unserialize(INDEX_IMAGE_ARRAY); // 随机缩略图路径 //$random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined $random = '/code/get_img.php?_='.rand(999, 3000); $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';配置文件根据我代码里的样式添加图片的配置就可以了，最好找用id区分图片的网站，配置项会短小很多。list里面是图片idfun里面是当前数组的url生成函数，想通过参数修改图片大小在这里面修改就搞定了。代码<?php /* 直接请求将随机跳转到一个图片 */ $imgArr = []; //https://www.pexels.com/zh-cn/ $imgArr[0] = [ 'list'=>[267371,230477,1115680,838413,235922,1560424,1056251,416160,96938,2194261, 666839,1133957,1269025,1089932,338711,573910,670061,3113124,247431,434090, 1209843,1684187,358312,1536619,96380,164821,373945,1547248,301920,256468, 1653823,59106,556665,461198,376464,321588,3193917,1040157,189349,396547, 3145552,220067,285173,409701,917076,255464,735911,2120016,1162540,], 'fun'=> function($id){return "https://images.pexels.com/photos/{$id}/pexels-photo-{$id}.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";} ]; //https://i.keaitupian.net/ // $imgArr[1] = [ // 'list'=>[ // 'up/40/c0/7c/ec2caa4f7b67d2b44a95bece4e7cc040.jpg', // 'up/38/05/17/57ae05cdfe607c1f877a7881ea170538.jpg' // ], // 'fun'=> function($id){return "https://i.keaitupian.net/".$id;} // ]; function oneImg($id=false){ global $imgArr; //求图片总数 // echo $count; //随机选择一个 if($id == false){ $count = 0; foreach($imgArr as $item){ $count += count($item['list']); } $id = rand(0, $count - 1); } //累积下标 $key = 0; foreach($imgArr as $item){ if(isset($item['list'][$id - $key])){ return $item['fun']($item['list'][$id - $key]); }else{ $key += count($item['list']); continue; } } } header('Location: '.oneImg(isset($_GET['id'])?$_GET['id']:false));exit;本文转自：拯救夜猫
-
Typecho代码高亮插件Code Prettify 起始最初基于 Highlight 插件，开发一款名为ColorHighlight插件但因为插件本身存在不少BUG，自己又不想重写结构，于是便重新基于CodeHighlighter开发了一款依旧在原有的代码高亮样式上新增了Mac风格，修改了部分JS代码下载插件最新更新时间：2019/11/18（go语言高亮支持）handsome.min.css更新时间：2020/2/05[button color="info" icon="glyphicon glyphicon-download" url="https://github.com/Xcnte/Code-Prettify-for-typecho" type=""]进入Github下载/button进入码云下载[/button]激活以Handsome主题为例，其它主题可能出现样式错误第 1 步：下载本插件，解压，放到 usr/plugins/ 目录中；第 2 步：文件夹名改为 CodePrettify；第 3 步：登录管理后台，激活插件（请勿与其它同类插件同时启用，以免互相影响）第 4 步：设置：选择主题风格，是否显示行号等。第 5 步：修改（替换）/usr/themes/handsome/assets/css/下的handsome.min.css文件[button color="info" icon="glyphicon glyphicon-download" url="https://pan.baidu.com/s/1MFRCbOIq-9FQSYIvwAmpnA" type=""]Handsome 6.0.0 版本/buttonHandsome 5.3.1 版本(提取码a0d8)[/button]如果事先有对handsome.min.css进行过魔改的同学，按照以下步骤修改handsome.min.css下新增以下代码.page 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 } .page .code-toolbar 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 } .page pre { padding: 0; border-radius: 0; overflow: hidden }#post-content pre code改成#post-content 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 }删除#post-content button删除#post-content pre:before删除code::-webkit-scrollbar-track-piece删除code::-webkit-scrollbar用法\```php(语言类型选填) <?php echo 'hello jrotty!'; ?> \``` 删除上边代码中的\若不填写语言类型效果如下：<?php echo 'hello jrotty!'; ?> //此代码高亮样式可在 主题外观设置-->代码高亮的风格里自行设置Pjax如果你的网站有开启Pjax（handsome主题默认开启）请把以下代码添加到回调函数的地方，在你使用的主题设置里看看以Handsome主题为例：主题 --> 设置外观 --> Pjax --> PJAX回调函数if (typeof Prism !== 'undefined') { var pres = document.getElementsByTagName('pre'); for (var i = 0; i < pres.length; i++){ if (pres[i].getElementsByTagName('code').length > 0) pres[i].className = 'line-numbers';} Prism.highlightAll(true,null);}若插件里设置不显示行号，PJAX函数要改为if (typeof Prism !== 'undefined') { Prism.highlightAll(true,null);}重要说明可设置项选择高亮主题风格 (官方提供的 6 种风格切换，本人自己新增了三种（Mac风格）)coy.cssdark.cssBlackMac.css（黑色Mac风格）GrayMac.css（默认选中：Mac风格（灰色））WhiteMac.css（白色Mac风格）twilight.csstomorrow-night.css是否在代码左侧显示行号 （默认开启）后记很多人反馈插件在其它主题上没有效果或是样式不正常抱歉，实在做不到完全兼容有些主题自带代码高亮，小白又不懂怎么删除。只能尽量做好handsome主题完美兼容若真的很喜欢这款插件可以在本文留言，博主有时间会帮忙解决有任何意见或发现任何BUG也欢迎留言 [button color="success" icon="glyphicon glyphicon-link" url="https://www.xcnte.com/archives/523/" type=""]作者Xcnte博客[/button]
-
安利一款Hansome主题专用的UserAgent插件 食用指南1.操作前请做好相应备份工作2.此插件只适用于Handsome主题，未对其它主题优化！！！3.请先将插件置于Typecho的plugins目录下，且插件目录名应为UserAgent，注意大小写，否则将无法正常食用！！！4.修改Handsome主题，component目录下的comments.php代码文件，大概第60~80行左右，<span class="comment-author vcard"> <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?> </span>添加代码<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?> 修改后代码如下：<span class="comment-author vcard"> <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?> </span>获取真实IPTypecho开启CDN后，可能无法获取访客真实IP，只能取得CDN节点IP，为此可以在Typecho博客网站的根目录的config.inc.php插入下面的代码：//** 防止CDN造成无法获取客户真实IP地址 */ if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) { $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']); $_SERVER['REMOTE_ADDR'] = $list[0]; }[button color="info" icon="glyphicon glyphicon-download" url="https://doge.uk/wp-content/uploads/2020/03/1583421311-1902984185.zip" type=""]UserAgent-1.1.1.zip[/button][button color="info" icon="glyphicon glyphicon-download" url="https://doge.uk/wp-content/uploads/2020/03/1583421390-1651853883.zip" type=""]UserAgent-1.1.0.zip[/button][button color="success" icon="glyphicon glyphicon-link" url="https://doge.uk/coding/useragent-modify.html" type=""]作者松鼠博客[/button]
-
记录Typecho和Handsone主题修改（不断更新） 本来不想做这个记录的，但发现主题好像被我修改出了一点问题，所以必须要记录一下所修改的地方，方便查找问题。除了自用也会搜集一些备用。1.开启伪静态并隐藏index.php[collapse status="false" title="点击查看"]登录后台-设置-永久链接-是否使用地址重写功能-是登录后台-设置-永久链接-自定义文章路径-个性化定义-/{slug}.html服务器的rewrite规则nginx配置BT面板-配置文件（伪静态）-添加以下代码：非BT在网站根目录新建一个.htaccess然后加入以下代码：if (!-e $request_filename) { rewrite ^(.*)$ /index.php$1 last; }apache配置在网站根目录新建一个.htaccess然后加入以下代码：<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /index.php/$1 [L] </IfModule>[/collapse]2.开启网页压缩加速[collapse status="false" title="点击查看"]将以下代码加到Typecho主程序index.php文件/** 载入配置支持 */上面即可/** 开启gzip压缩 */ ob_start('ob_gzhandler');[/collapse]3.不让移动端后台导航栏点击自动跳转[collapse status="false" title="点击查看"]修改方法：https://www.ddg.ink/26.html[/collapse]4.首页文章版式圆角化[collapse status="false" title="点击查看"]下面代码放到设置外观-开发者设置-自定义CSS/*首页文章版式圆角化*/ .panel{ border: none; border-radius: 8px; } .panel-small{ border: none; border-radius: 8px; } .item-thumb{ border-radius: 8px; }[/collapse]5.打赏图标跳动[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义CSS/* 打赏图标跳动 */ .btn-pay { animation: star 0.5s ease-in-out infinite alternate; } @keyframes star { from { transform: scale(1); } to { transform: scale(1.1); } }[/collapse]6.彩色标签云[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义JavaScript// 彩色标签云 let tags = document.querySelectorAll("#tag_cloud-2 a"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; });如果你开启了PJAX，还需要在设置外观-PJAX-PJAX回调函数 填入相同JS代码[/collapse]7.利用主题自带弹窗增加提示[collapse status="false" title="点击查看"]复制版权提示设置外观-开发者设置-自定义JavaScriptkaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){ $.message({ message: "尊重原创，转载请注明出处！<br> 本文作者：低调哥<br>原文链接："+sitesurl, title: "复制成功", type: "warning", autoHide: !1, time: "10000" }) }}加载完成提示设置外观-开发者设置-自定义输出body 尾部的HTML代码<script> function kaygb_referrer(){ var kaygb_referrer = document.referrer; if (kaygb_referrer != ""){ return "感谢您的访问！ 您来自：<br>" + document.referrer; }else{ return ""; }} $.message({ message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(), title: "网站加载完成", type: "success", autoHide: !1, time: "6000" }) </script>注意，要放在广告异步推送代码之前，放在后面可能会影响加载。独立页面提示<script> $.message({ message: "想对博主说一些什么呢？", title: "欢迎给我留言！", type: "info", autoHide: !1, time: "10000" }) </script>如果开启了PJAX，还需要在设置外观-PJAX-PJAX回调函数 填入kaygb_copy();title：弹窗的标题message：弹窗标题下方的文字type: 弹窗类型autoHide：默认即可time：停留时间（毫秒，1秒为1000毫秒）[/collapse]8.透明背景下文章目录Bug[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义CSS/*透明背景下文章目录bug*/ #toc { background-color:rgba(255, 255, 255, .15) !important; }[/collapse]9.透明背景下时光机右侧Bug[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义CSS/*透明背景下时光机右侧bug*/ .bg-light .lter, .bg-light.lter { text-align: justify; }[/collapse]10.博主头像设置成QQ头像[collapse status="false" title="点击查看"]设置外观-初级设置-头像图片地址QQ头像接口地址https://q1.qlogo.cn/g?b=qq&nk=10001&s=640 https://q.qlogo.cn/g?b=qq&nk=10001&s=100 https://q.qlogo.cn/headimg_dl?bs=qq&dst_uin=10001&src_uin=gordsky.cn&fid=blog&spec=100 https://q.qlogo.cn/headimg_dl?dst_uin=10001&spec=640 https://q2.qlogo.cn/headimg_dl?spec=100&dst_uin=10001 http://q3.qlogo.cn/g?b=qq&nk=10001&s=100把10001修改成你的QQ号即可。[/collapse]11.Pjax无刷新加载后百度统计失效解决办法[collapse status="false" title="点击查看"]设置外观-PJAX-PJAX回调函数_hmt.push(['_trackPageview', document.location.pathname+document.location.search+document.location.hash]);上面写法是记录整个URL信息，即包含查询参数以及hash锚点。如果想要像网络上其他教程一样只记录页面地址，可以换成如下代码：_hmt.push(['_trackPageview', document.location.pathname]);[/collapse]12.评论一键打卡赞踩[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义JavaScript//打卡赞踩 function a(a, b, c) { if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus(); else if (a.selectionStart || "0" == a.selectionStart) { var l = a.selectionStart, m = a.selectionEnd, n = m; c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length); c ? n += b.length + c.length : n += b.length - m + l; l == m && c && (n -= c.length); a.focus(); a.selectionStart = n; a.selectionEnd = n } else a.value += b + c, a.focus() } var b = (new Date).toLocaleTimeString(), c = document.getElementById("comment") || 0; window.SIMPALED = {}; window.SIMPALED.Editor = { daka: function() { a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~") }, zan: function() { a(c, "写得好好哟,我要给你生猴子！") }, cai: function() { a(c, "骚年,我怀疑你写了一篇假的文章！") } };PJAX回调函数也加入以上代码在主题目录component/comments.php里面搜索<div class="OwO" style="display: inline;"></div>（126行到144行左右）下面添加如下代码。<!-- 打卡代码开始 --> <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"> <div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div> </div> <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"> <div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div> </div> <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"> <div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div> </div> <!-- 打卡代码结束 -->设置外观-开发者设置-自定义CSS/*私密评论按钮位置*/ .secret_comment { top: 5px; } .OwO.OwO-open .OwO-body { display:table }[/collapse]13.自定义pjax动画[collapse status="false" title="点击查看"]设置外观-PJAX-选择pjax动画-选择自定义pjax动画自定义pjax动画的HTML结构<section id="loading" class="loading hide"> <div class="containerss"> <div class="one common"></div> <div class="two common"></div> <div class="three common"></div> <div class="four common"></div> <div class="five common"></div> <div class="six common"></div> <div class="seven common"></div> <div class="eight common"></div> </div> </section>自定义pjax动画的CSS代码@charset "utf-8";.loading{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;}.containerss{width:40vw;height:40vw;left:0;right:0;top:0;bottom:0;margin:auto;}.common{height:5vw;max-height:100%;overflow:auto;width:2vw;margin:auto;max-width:100%;position:absolute;background-color:;border-radius:0vw 10vw 0vw 10vw;box-shadow:inset 0vw 0vw 0vw .1vw #E645D0,0vw 0vw 1.5vw 0vw #E645D0;}.one{transform:rotate(45deg);left:0;right:0;top:0;bottom:7.5vw;}.two{transform:rotate(90deg);left:5.5vw;right:0;top:0;bottom:5.5vw;}.three{transform:rotate(135deg);left:7.5vw;right:0;top:0;bottom:0;}.four{transform:rotate(180deg);left:5.5vw;right:0;top:5.5vw;bottom:0;}.five{transform:rotate(225deg);left:0;right:0;top:7.5vw;bottom:0;}.six{transform:rotate(270deg);left:0;right:5.5vw;top:5.5vw;bottom:0;}.seven{transform:rotate(315deg);left:0;right:7.5vw;top:0;bottom:0;}.eight{transform:rotate(360deg);left:0;right:5.5vw;top:0;bottom:5.5vw;}.one{animation:one 1s ease infinite;-moz-animation:one 1s ease infinite;-webkit-animation:one 1s ease infinite;-o-animation:one 1s ease infinite;}@keyframes one{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.two{animation:two 1s .125s ease infinite;-moz-animation:two 1s .125s ease infinite;-webkit-animation:two 1s .125s ease infinite;-o-animation:two 1s .125s ease infinite;}@keyframes two{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.three{animation:three 1s .25s ease infinite;-moz-animation:three 1s .25s ease infinite;-webkit-animation:three 1s .25s ease infinite;-o-animation:three 1s .25s ease infinite;}@keyframes three{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.four{animation:four 1s .375s ease infinite;-moz-animation:four 1s .375s ease infinite;-webkit-animation:four 1s .375s ease infinite;-o-animation:four 1s .375s ease infinite;}@keyframes four{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.five{animation:five 1s .5s ease infinite;-moz-animation:five 1s .5s ease infinite;-webkit-animation:five 1s .5s ease infinite;-o-animation:five 1s .5s ease infinite;}@keyframes five{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.six{animation:six 1s .625s ease infinite;-moz-animation:six 1s .625s ease infinite;-webkit-animation:six 1s .625s ease infinite;-o-animation:six 1s .625s ease infinite;}@keyframes six{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.seven{animation:seven 1s .750s ease infinite;-moz-animation:seven 1s .750s ease infinite;-webkit-animation:seven 1s .750s ease infinite;-o-animation:seven 1s .750s ease infinite;}@keyframes seven{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.eight{animation:eight 1s .875s ease infinite;-moz-animation:eight 1s .875s ease infinite;-webkit-animation:eight 1s .875s ease infinite;-o-animation:eight 1s .875s ease infinite;}@keyframes eight{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.containerss{animation:containerss 5s linear infinite;-moz-animation:containerss 5s linear infinite;-webkit-animation:containerss 5s linear infinite;-o-animation:containerss 5s linear infinite;}@keyframes containerss{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}[/collapse]14.时光机RSS动态内容配置[collapse status="false" title="点击查看"]设置外观-时光机配置-RSS动态内容配置{"id":"guanzhi","name":"每日一文","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/guanzhi"}, {"id":"zgdxmooc","name":"慕课","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/icourse163/newest"}, {"id":"juejin","name":"掘金","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/juejin/category/frontend"}, {"id":"bilibili_zf","name":"追番","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/bilibili/user/bangumi/21462274"}[/collapse]15.首页轮播设置[collapse status="false" title="点击查看"]{"title":"Handsome主题夜间模式插件 fo Typecho","link":"https://www.ddg.ink/69.html","cover":"https://cdn.jsdelivr.net/gh/freecdn/images/usr/uploads/2020/05/797406831.png","desc":"白天演示图片"}, {"title":"Handsome主题夜间模式插件 fo Typecho","link":"https://www.ddg.ink/69.html","cover":"https://cdn.jsdelivr.net/gh/freecdn/images/usr/uploads/2020/05/888696165.png","desc":"夜晚演示图片"}[/collapse]16.删除顶部博客名称[collapse status="false" title="点击查看"]打开/usr/themes/handsome/index.php搜索<h1 class="m-n font-thin text-black l-h"><?php $this->options->title(); ?></h1>删除或注解掉[/collapse]17.博客信息添加全站字数和加载耗时[collapse status="false" title="点击查看"]在/usr/themes/handsome/functions.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; } //加载耗时 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; }对Handsome主题functions.php加密的解决办法：1.可以将上面的代码存放到usr/themes/handsome/libs/Content.php中class Content的上边。2.在/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; } //加载耗时 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的博客信息处，选择合适位置加入以下代码（位置大概在 90 多行） <li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i></span><span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li> <li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>[/collapse]18.删除左侧边栏的分割线和组成二字[collapse status="false" title="点击查看"]打开跟目录/usr/themes/handsome/component/aside.php搜索<?php if (@!in_array('component',$this->options->asideSetting)): ?>（在125行左右）将以下代码删除或注解掉 <li class="hidden-folded padder m-t m-b-sm text-muted text-xs"> <span><?php _me("组成") ?></span> </li>如果你想把导航二字也去掉，搜索<div class="line dk hidden-folded"></div>（在78行左右）下面代码删除或注解掉 <li class="hidden-folded padder m-t m-b-sm text-muted text-xs"> <span><?php _me("导航") ?></span> </li>[/collapse]19.左侧边栏导航栏二级菜单[collapse status="false" title="点击查看"]①添加判断字段打开跟目录/usr/themes/handsome/component/aside.php搜索$asideItemsOutput = "";（第87行左右）在下面添加asideGongjuItemsOutput的定义：$asideGongjuItemsOutput = "";搜索if (trim($itemFeather)!==""){（105行左右）将其删除掉或注解掉，在下面添加status字段的判断： if (strtoupper($itemStatus) === 'GJX'){ //判断status字段 if (trim($itemFeather)!==""){ $asideGongjuItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i data-feather="'.$itemFeather.'"></i></span><span>'._mt($itemName).'</span></a></li>'; }else if (trim($itemClass)!==""){ $asideGongjuItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i class="'.$itemClass.'"></i></span><span>'._mt($itemName).'</span></a></li>'; } } else if (trim($itemFeather)!==""){ //判断status字段结束②添加二级菜单输出搜索<?php if (@!in_array('component',$this->options->asideSetting)): ?>（在132行左右）上面添加： <!--工具菜单--> <?php if (@$asideGongjuItemsOutput): ?> <li><a class="auto"><span class="pull-right text-muted"> <i class="fontello icon-fw fontello-angle-right text"></i> <i class="fontello icon-fw fontello-angle-down text-active"></i> </span> <span class="nav-icon"><i class="glyphicon glyphicon-wrench"></i></span><span><?php _me("工具"); ?></span></a><!-- 可修改默认图标与名称 --> <ul class="nav nav-sub dk"><li class="nav-sub-header"><a data-no-instant><span><?php _me("工具"); ?></span></a></li> <?php echo @$asideGongjuItemsOutput ?> </ul></li> <?php endif; ?>使用方法设置外观-高级设置-左侧边栏导航{"name":"图床","class":"fontello fontello-picture","link":"https://tuchuang.ddg.ink/","status":"gjx"}, {"name":"在线扒站","class":"fontello fontello-emo-sunglasses","link":"https://wget.ddg.ink/","status":"gjx"}其中"status":"gjx"即表示将该条目放置于二级菜单中。[/collapse]20.开启全站灰色（黑白模式）[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义CSS<!--开启黑白模式--> html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); } html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);} <!--黑白模式结束-->[/collapse]21.美化主页文章列表宽度[collapse status="false" title="点击查看"]设置外观-开发者设置-自定义CSS/* 非盒子模式页面宽度 */ .no-container #post-panel, .no-container .blog-posts { max-width: 90%; }PS：需关闭盒子类型，不然没效果。[/collapse]22.使用CDN后获取用户真实IP[collapse status="false" title="点击查看"]打开网站根目录config.inc.php，在最下方加入以下代码：//防止 CDN 造成无法获取客户真实 IP 地址 if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) { $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']); $_SERVER['REMOTE_ADDR'] = $list[0]; }[/collapse]23.比删除线更高级的伪装[collapse status="false" title="点击查看"]效果演示→被你发现了~设置外观-开发者设置-自定义CSSspan.heimu a.external,span.heimu a.external:visited,span.heimu a.extiw,span.heimu a.extiw:visited { color: #252525 } .heimu,.heimu a,a .heimu,.heimu a.new { background-color: #252525; color: #252525; text-shadow: none } body:not(.heimu_toggle_on) .heimu:hover,body:not(.heimu_toggle_on) .heimu:active,body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #fff } body:not(.heimu_toggle_on) .heimu:hover a,body:not(.heimu_toggle_on) a:hover .heimu,body:not(.heimu_toggle_on) .heimu.off a,body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #add8e6 } body:not(.heimu_toggle_on) .heimu.off .new,body:not(.heimu_toggle_on) .heimu.off .new:hover,body:not(.heimu_toggle_on) .new:hover .heimu.off,body:not(.heimu_toggle_on) .heimu.off .new,body:not(.heimu_toggle_on) .heimu.off .new:hover,body:not(.heimu_toggle_on) .new:hover .heimu.off { transition: color .13s linear; color: #ba0000 }如果你使用其他主题，请在CSS头尾分别添加<style type="text/css">和</style>放在主题post.php或其他文件内。使用方法:<span class="heimu" title="被你发现了！">伪装内容</span>[/collapse]24更改博客评论显示日期格式[collapse status="false" title="点击查看"]后台设置→评论→修改成Y-m-d H:i:s[/collapse]25.将头图默认模式改为图片样式[collapse status="false" title="点击查看"]Handsome作者加密了Config.php所以无法将此加入后台设置，只能改Content.php方法：打开主题文件夹libs/Content.php在967行后加入以下代码即可实现头图默认为图片样式：$parameterArray['thumbStyle'] = "PICTURE";[/collapse]26.自定义Handsome主题默认头图（支持多站点）[collapse status="false" title="点击查看"][post cid="116" /][/collapse]27.首页文章标题居中显示[collapse status="false" title="点击查看"]主题设置-开发者设置-自定义CSS/*文章标题居中*/ .panel h2{ text-align: center; } .post-item-foot-icon{ text-align: center; }[/collapse]28.手机端隐藏广告和标签云等…[collapse status="false" title="点击查看"]主题后台-开发者设置-自定义CSS/*手机端不显示内容*/ @media (max-width:767px) { #blog_info,#tag_cloud-2,#tabs-4,#a_d_sidebar { display: none; } } /* #tag_cloud-2为标签云，#tabs-4为博客评论随机文章，#a_d_sidebar为广告，#blog_info为博客信息，可自行组合显示或隐藏*/[/collapse]29.魔改文章盒子及标题修改[collapse status="false" title="点击查看"]主题设置-开发者设置-自定义CSS@charset "utf8"; /*Modifi-css for handsome 4.5.x*/ /*main*/ .entry-content{background-color:transparent}.panel-small .post-meta{padding:25px 30px 15px 25px!important}.panel-small .pos50t-meta{padding-left:25px;padding-right:25px}.b-light{border-color:#bbb4}.tip:before{margin-top:0!important}.wrapper-md .panel:not(.b-a),.wrapper-md .panel-small{transition:all .2s;box-shadow:1px 1px 3px 1px rgba(0,0,0,0.2)!important}.wrapper-md .panel:not(.b-a):hover,.wrapper-md .panel-small:hover{box-shadow:1px 1px 5px 2px rgba(0,0,0,0.3)!important}.list-group-item{background-color:rgba(255,255,255,.8)}.thumb-lg{width:130px}#widget-tabs-4-comments .list-group-item,#tag_toc,#post-panel,#sidebar,#post-content{background-color:transparent!important}#alllayout.app-aside-folded .tooltip{display:none!important}.standpage{width:100%;height:calc(100% - 50px);position:fixed;top:50px;left:0}.standpage,aside,aside *{transition:all .3s}.wrapper-md>#comments,.wrapper-md>.blog-post,.wrapper-md>.breadcrumb,.m-t-lg.m-b-lg,.wrapper-md>.no_search_result{max-width:800px;margin-left:auto;margin-right:auto}.wrapper-md .panel,.wrapper-md .panel-small,.wrapper-md>#comments,.wrapper-md>.breadcrumb{background-color:rgba(255,255,255,.9)}.wrapper-md article,.wrapper-md>#comments{border-radius:5px;overflow:hidden}.bg-auto:before{bottom:51px}@media screen and (min-width:992px){aside.col.w-md.b-l{background-color:rgba(255,255,255,.7)}aside.col.w-md.b-l:hover{background-color:#fff}}header.wrapper-md{background-color:rgba(246,248,248,.93)!important}.blog-post>.panel,.blog-post>.panel-small{border:0;border-radius:5px}.index-post-img,.index-post-img-small{border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden}.blog-post>.panel .index-post-img .item-thumb,.panel-small .index-post-img-small .item-thumb-small,.index-post-title a{transition:all .2s}.blog-post>.panel:hover .index-post-img .item-thumb,.blog-post>.panel-small:hover .index-post-img-small .item-thumb-small{transform:scale(1.05)}#footer>.wrapper{background-color:rgba(237,241,242,.8)}.streamline{margin-left:20px;padding-right:10px}.streamline .comment-body{position:relative}.streamline .comment-body .m-l-lg:before{background-color:rgba(255,255,255,.9);content:" ";position:absolute;width:calc(100%+10px);height:calc(100%+20px);top:-10px;left:0;z-index:-1;border-radius:2px;box-shadow:0 0 2px 2px rgba(0,0,0,.125)}aside.col.w-md.no-border-xs{transition:all .3s}.visible-xs-inline{display:inline-block!important}@media screen and (min-width:768px) and (max-width:1140px){.visible-xs-inline{display:none!important}}.tocify-item{background-color:rgba(255,255,255,.8)}.tocify-item.active{color:#7266ba;font-weight:700}#kotori{position:absolute;left:-15px;bottom:-15px;max-height:110px;transition:all .3s}#kotori:hover{left:0;bottom:0}#kotori.hidekotori{left:-110px;bottom:-110px}@media screen and (max-width:767px){#kotori{display:none}.blog-post>.panel:hover .index-post-img .item-thumb{transform:none!important}}.index-post-title a:hover{color:#2ebaae}.wrapper-md .comment-list .comment-parent,.wrapper-md .comment-list .comment-children{border-top-width:1px;border-top-style:solid;border-top-color:#ddd;padding-top:10px}.max-img{max-height:400px}.navi-wrap .navi.clearfix>ul.nav{padding-bottom:100px}.app-aside-folded.navi-wrap{max-height:calc(100% - 50px)}.lg-backdrop{background-color:rgba(0,0,0,.8)}.skPlayer-name{font-family:"Source Sans Pro","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif}html.fancybox-enabled{overflow-y:auto}.fancybox-bg{background-color:rgba(0,0,0,.95)}.fancybox-arrow:after{background-color:rgba(0,0,0,.8)}.blog-post .post-meta.wrapper-lg{padding-top:15px}.share,.yellow,.red,.lblue,.green{background-position-y:50%}.timeline .tl-date{color:#fff;text-shadow:0 0 4px #000}body.modal-open{overflow-y:auto;padding-right:0!important}.reply2view{background-color:transparent;border:solid 1px #bbb}#content{transition:all .3s}.OwO .OwO-logo{height:28px}#tag_toc.fixed #toc{width:100%}.page-navigator .next a,.page-navigator .prev a{height:31px}.page-navigator>li:last-child>a,.page-navigator>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}#tooltip-1{width:0;height:0;overflow:hidden}.tooltip-2{width:0;height:0;border:0}.item-thumb-small{background-position:left} /*experimental modify 2018-07-19*/ @media screen and (min-width:1200px){.sticky{position: absolute;top: 10px;left: 15px}.panel .item-thumb{height:300px}#post-panel .blog-post{position:relative}#post-panel .panel{overflow:hidden}#post-panel .panel .post-meta{position:relative;margin-top:-300px;height:300px;padding-top:133px!important;padding-bottom:0!important;background-color:rgba(0,0,0,.3);color:#fff!important;transition:all .3s}#post-panel .panel .post-meta,#post-panel .panel-small .post-meta{border-radius:5px}#post-panel .panel .post-meta *,#post-panel .panel-small .post-meta *{color:#fff!important}#post-panel .panel .post-meta>h2,#post-panel .panel-small .post-meta>h2{text-align:center;text-shadow:0 0 3px #fff}#post-panel .panel .post-meta>p,#post-panel .panel .post-meta>div,#post-panel .panel-small .post-meta>p,#post-panel .panel-small .post-meta>div{transition:all .3s;transform:translateY(-10px);opacity:0}#post-panel .panel .post-meta>.text-muted,#post-panel .panel-small .post-meta>.text-muted{position:absolute;bottom:20px}#post-panel .panel .post-meta>.line{position:absolute;bottom:40px;width:740px}#post-panel .panel-small .post-meta>.line{position:absolute;bottom:40px;width:350px}#post-panel .panel .post-meta>.summary{position:absolute;bottom:60px;width:740px}#post-panel .panel-small .post-meta>.summary{position:absolute;bottom:60px;width:350px}#post-panel .panel-small{display:inline-block;height:300px;width:calc(50% - 10px);margin-right:20px}#post-panel .panel-small:nth-child(2n){margin-right:0}#post-panel .panel-small .index-img-small,#post-panel .panel-small .index-img-small .item-thumb-small{height:100%;width:100%}#post-panel .panel-small .post-meta{position:absolute;height:300px;width:calc(50% - 10px);padding:133px 20px 0 20px!important;background-color:rgba(0,0,0,.3);color:#fff!important;transition:all .3s}#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{background-color:rgba(0,0,0,.6)}#post-panel .panel:hover .post-meta>p,#post-panel .panel:hover .post-meta>div,#post-panel .panel-small:hover .post-meta>p,#post-panel .panel-small:hover .post-meta>div{opacity:1;transform:translateY(0)}#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{padding-top:80px!important}#post-panel .ahover{display:block;position:absolute;top:0;left:0;right:0;bottom:0}.blog-post>.panel:hover .index-post-img,.blog-post>.panel-small:hover .index-post-img-small{filter:blur(3px)}}header.bg-light.wrapper-md{margin-top:30px;background-color:transparent!important;border:0;text-align:center;text-shadow:0 0 3px #000}header.wrapper-md *{color:#fff}header.wrapper-md h1{font-size:32px}header.wrapper-md h1{font-weight:bold!important} /*links*/ .link-main{padding:50px 0 50px 20px;text-align:center}.link-main h3{margin-top:0}.link-main .item{display:inline-block;letter-spacing:0;margin-right:20px;margin-bottom:20px;width:289px;height:240px;font-size:14px;overflow:hidden;border-radius:5px;background:rgba(255,255,255,.95);border:1px solid #e1e8ed;transition:background .2s}.link-main .link-bg{position:relative;height:90px;padding:0 1em;background-color:#777}.link-main .link-bg .bg:before{display:block;content:"";position:absolute;left:0;height:100%;width:100%;background:rgba(0,0,0,.5)}.link-main .link-bg .link-avatar{position:absolute;bottom:-50px;border:4px solid #FFF;border-radius:100%;background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.5)}.link-main .link-bg .link-avatar img{border-radius:100%}.link-main .avatar{display:block;object-fit:cover}.link-main .bg,.link-main .link-bg{background-repeat:no-repeat;background-position:center;background-size:cover;display:block}.link-main .bg{position:absolute;top:0;bottom:0;left:0;right:0;filter:blur(1.5px);background-color:#fff}.link-main .meta{padding:.9em 1em;text-align:right}.link-main .info{color:#525766;padding:0 1em 1em}.link-main .info .name{font-weight:600;font-size:16px}@media screen and (max-width:330px){.link-main{padding:50px 0 50px 0}.link-main .item{margin-right:0}}.link-main .item:hover{background:rgba(255,255,255,1)}.link-main .item:hover .bg{filter:blur(0.1px)} /*comments*/ #comments pre code{display:inline}.wrapper-md>#comments{border:solid 1px #fff;padding:10px 30px 20px 30px}.hideContent{background-color:transparent;padding:10px 0} .agent {display: inline-block;margin-left: 5px;padding: 0 3px;border-radius: 2px;color: #58666e;font-size: 12px;opacity: .8} /*img*/ img[mw400]{max-width:400px!important;width:100%}.mw400{max-width:400px}[/collapse]插件[collapse status="false" title="点击查看"]Handsome主题自带插件有啥看的当然官网下载[post cid="113" /][post cid="112" /][post cid="69" /][post cid="33" /][post cid="83" /][post cid="111" /][post cid="168" /][/collapse]
-
Handsome主题夜间模式插件 fo Typecho 前言之前在7°期盼博客看到了Typecho主题添加夜晚日间模式的文章，于是自己给Handsmoe主题添加夜间模式，过程有点费劲，还要修改主题文件，如果以后Handsome主题升级还要重新修改，而且夜间模式时间修改也需要修改代码，对于我这样的懒人，真的有点麻烦。于是我就尝试做了这个插件，方便大家使用。当然如果你动手能力强的话可以参照https://www.ddg.ink/54.html自己修改：）因为是第一次制作插件，也许有少许不足，请大家理解。效果演示下面是PC端和手机端夜间模式以及后台设置图片[album][][/album]插件介绍可后台自定义自动进入夜间模式时间~7°期盼博客给出的修改方法设置成功后，非夜间模式时间手动切换夜间模式会记录缓存，刷新页面后还是夜间模式，不会自动回到设定时间的模式，本插件特修复了这个问题。如果你希望一直使用夜间模式可以将两个时间同时设置为0即可！安装要求只适合Handsome主题哦~安装方法下载解压后将DdgNight文件夹放到/usr/plugins插件文件夹激活即可升级方法后台禁用插件后再安装新版本插件。更新日志版本号更新时间更新内容1.0.52020/06/08增加了自动进入夜间模式的开关 可选手动切换模式1.0.42020/05/24修复在夜间模式下私密评论字体颜色看不清问题1.0.32020/05/14增加主题右侧边栏显示夜间模式切换按钮1.0.22020/05/12增加模式切换按钮手机端是否隐藏到搜索栏菜单内1.0.12020/05/10优化CSS 增加月亮太阳图标颜色设置1.0.02020/05/07第一次根据别人分享的代码制作插件下载地址很多人转载了连个转载链接都没有，更有甚者，拿免费的1.0.0版本用来付费下载，真心醉了。所以免费版只暂提供到1.0.2版本！1.0.2以上版本只象征性收费1元。[scode type="yellow"]如插件存在问题可在下方留言！转载请注明出处谢谢！[/scode]
-
Handsome主题修改夜间模式方法 最近在7°期盼博客看到了Typecho主题添加夜晚日间模式的文章，于是尝试自己给Handsmoe主题添加夜间模式。当然如果你不喜欢自己动手可以使用我做的这款[button color="success" icon="glyphicon glyphicon-link" url="https://www.ddg.ink/69.html" type=""]Handsome主题夜间模式插件[/button]下面把在7°期盼博客看到的修改方法公布：一、夜间模式js和css文件下载上传进入下载下载上面的js和css文件，js和css上传到Handsome主题对应目录下，路径如下：/usr/themes/handsome/assets/css/darkmode.css/usr/themes/handsome/assets/js/darkmode.js二、Handsome主题需要修改的文件打开/usr/themes/handsome/component/footer.php找到<!--主题核心js--> <script src="<?php echo STATIC_PATH ?>js/function.min.js?v=<?php echo Handsome::$version.Handsome_Config::$versionTag ?>"></script> <script src="<?php echo STATIC_PATH ?>js/core.min.js?v=<?php echo Handsome::$version.Handsome_Config::$versionTag ?>"></script>在下面加入<!--darkmode.js--> <script src="<?php echo STATIC_PATH ?>js/darkmode.js?v=dedediy"></script>打开/usr/themes/handsome/component/header.php找到<style type="text/css"> <?php echo Content::exportCss($this) ?> </style>在下面加入<!--darkmode.css--> <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/darkmode.css?v=dedediy" type="text/css" />打开/usr/themes/handsome/component/headnav.php找到<?php if (!in_array('hideLogin',$this->options->featuresetup)): ?>在上面加入<!--darkmode start--> <li> <a class="nav-switch-dark-mode" href="javascript:"> <span class="icon-light-mode" data-toggle="tooltip" data-placement="bottom" title="" data-original-title=" 夜晚模式 "> <i data-feather="sun"></i> </span> <span class="icon-dark-mode" data-toggle="tooltip" data-placement="bottom" title="" data-original-title=" 日间模式 "> <i data-feather="moon"></i> </span> </a> </li> <!--darkmode end-->完成以上操作，夜间模式和跟随系统深色模式就实现了，小伙伴快去试试看吧。三、怎么修改、增加CSS样式和深色模式夜间模式的修改打开/usr/themes/handsome/assets/css/darkmode.css找到/*跟随系统模式*/ @media (prefers-color-scheme: dark) {在它上面增加或者修改你需要的样式即可跟随系统模式的修改（其实就是增加@media (prefers-color-scheme: dark)样式）找到/*跟随系统模式*/ @media (prefers-color-scheme: dark) {在大括号后面(或者文件最后一个大括号上面)增加或者修改你需要的样式即可，注意每一个样式前面尽量加上body （后面的空格注意，参考我写的样式即可）。四、怎样修改自动进入夜间模式的时间打开 darkmode.js 找到if(new Date().getHours() > 22 || new Date().getHours() < 6){数字22和6就是表示在晚上22点和早上6点之间为夜间模式，修改为你需要的时间数字即可。本文转自：7°期盼博客
