搜索到
11
篇与
教程
的结果
-
![更换自己网站的字体]()
更换自己网站的字体 默认的字体看久了，尤其是自己的网站看的比较多的时候，突然就很想换字体，如果要修改的话，需要字体的.eot .woff22个或加上.woff格式的3种文件。下载字体可以在这里下载.ttf格式的字体：http://www.zhaozi.cn/s/all/ttf/格式转换之后去这里转换格式：https://en.m.fontke.com/tool/fontface/（我自己试了一下只要.eot .woff2这2个文件也可以，不行就在加上.woff格式的字体）上传文件把字体文件上传到你的主题里或者根目录wwwroot或其他地方都可以，最后只要填写文件的对应地址就好添加使用上传好后，代码可以放在你的网站主题css文件里面的最下方，不同主题路径不同。Joe主题可以放到/assets/css/joe.normalize.css里面@font-face { font-family: "blockdole"; src: url("/fonts/blockdole.woff2") format("woff2"), url("/fonts/blockdole.woff") format("woff"), url("/fonts/blockdole.eot") format("embedded-opentype"), url("/fonts/blockdole.svg") format("svg"); } body{ font-family: 'blockdole' } blockdole这个是我字体文件的名字，修改成你自己使用的字体名字即可哦，url()括号里面填写自己存放文字的路径地址。没有.svg或.woff的字体不用管，路径地址/blockdole.eot前面填写一样的就好自定义cssjoe主题可以直接填写到 设置外观 - 公共设置 的自定义css里面，或其他主题自带自定义css也可以直接填写~字体下载直接下载：https://pan.baidu.com/s/121Kykhkk2i6fcsR8081DBQ 提取码:unsk -
![给网站挂个新年灯笼]()
给网站挂个新年灯笼 新年快要到啦，之前看到很多群友都在网站挂了个红灯笼，但是这个手机不显示，只显示在电脑哦（手机也显示的话，可能会不太好看）放置位置1.可以放在网站<head></head>内末尾的内容里面2.joe主题可以直接放到设置外观 - 公共设置 - 自定义head标签末尾位置内容里面灯笼代码<style> @media only screen and (max-width: 760px) { .deng-box, .deng-box1 { display:none; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .right { float: left!important; } } .deng-box { position: fixed; top: 20px; left: 10px; z-index: 3; } .deng-box1 { position: fixed; top: 20px; right: 10px; z-index: 3; } .deng-box1 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1); } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: 12px 8px 8px 10px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03; } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: #ffa500; border-radius: 0 0 5px 5px; } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50%; } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: #ffa500; border-radius: 0 0 0 5px; } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng-t { font-family: 华文行楷; font-size: 26px; color: #dc8f03; font-weight: bold; line-height: 44px; text-align: center; } .night .deng-t, .night .deng-box, .night .deng-box1 { background: transparent !important; } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } } </style> <div class="deng-box"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">新年</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div> <div class="deng-box1"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">快乐</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div> -
![Cuteen主题美化修改代码保存]()
Cuteen主题美化修改代码保存 背景图片在Cuteen主题设置外观高级设置的自定义Css样式里添加以下代码，可以添加背景图片：body {background-image:url(这里填写图片地址);}Cuteen翻页4.0发现分类下面文章没有分页，显示不出来打开Cuteen主题文件里的archive.php，最后一个</div>上面添加下方代码即可：<!-- 分页代码 --> <?php if (Helper::options()->首页Ajax加载文章) : ?> <?php $this->pageLink('<button id="NextButton" onclick="Cuteen.ajaxNext()" class="btn btn-primary col-3 mx-auto rounded-pill">点击加载更多</button>', 'next'); ?> <?php else: ?> <?php Ctx::pagination($this) ?> <?php endif; ?> <!-- 分页代码 -->下方为Cuteen3.0的修改标题字体修改站点顶部标题的字体，在自定义Css样式里添加下方代码：.aaa,.bbb{ font-family:'Pacifico',Arial,'Ma Shan Zheng',Helvetica; font-weight:400; }头部自定义内容填写：<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Pacifico&display=swap" rel="stylesheet">最后在基础设置 - 顶部风格设置 - 首页顶部大标题 和 首页顶部小标题 分别填写：<div class="big-title aaa">顶部大标题</div> <div class="sub-title bbb h3">顶部小标题</div>错位问题侧边栏 随便看看错位。在Cuteen主题文件里找到/Static/Js/sidebar-follow-jquery.js文件Ctrl+F搜索跟随滚动，2处elementToTop修改为1386，删掉// 添加占位节点下方的第二行代码即可 -
![让Typecho支持Emoji表情]()
让Typecho支持Emoji表情 之前有留言的小伙伴，发emoji表情，显示不了内容空白了，于是去捣鼓了一下修改编码进入数据库，选择你网站程序的数据库，点击操作，往下滑到排序规则选择utf8mb4_unicode_ci执行修改表编码直接从刚刚的地方最上面点击SQL运行下方代码，点击执行alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_options convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_users convert to character set utf8mb4 collate utf8mb4_unicode_ci;修改配置文件在网站的根目录，找到config.inc.php，把里面这一行'charset' => 'utf8'修改成'charset' => 'utf8mb4'就可以使用emoji表情啦 -
![设置typecho开启伪静态]()
设置typecho开启伪静态 在开启伪静态前，不管用哪个文章路径，文章链接中间都会有一个/index.php/，看起来太长了。开启伪静态去掉之后看起来就会好很多。启用教程1.点击后台设置 - 永久链接，在永久链接设置里面启用重写功能，在选择或填写一个你喜欢的自定义文章路径保存。2.如果出现在下方情况，需要配置一下服务器的伪静态规则，然后在勾选仍然想启用此功能保存即可伪静态规则Apache配置，直接新建一个.htaccess文件，里面内容填写下方代码，上传至网站根目录 <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1] </IfModule>Nginx配置 server { listen 80; server_name yourdomain.com; root /home/yourdomain/www/; index index.html index.htm index.php; if (!-e $request_filename) { rewrite ^(.*)$ /index.php$1 last; } location ~ .*\.php(\/.*)*$ { include fastcgi.conf; fastcgi_pass 127.0.0.1:9000; } access_log logs/yourdomain.log combined; } -
![随机获取头像图片API接口搭建教程]()
随机获取头像图片API接口搭建教程 如果要使用到随机的头像、壁纸图片等，又想用自己喜欢的图片，可以自己搭建一个API接口。搭建教程在根目录下建一个文件夹，名字自取，例如：touxiang，然后在touxiang的文件夹下放你喜欢的图片，在新建一个api.php文件上传到根目录，里面代码填写：<?php $img_array = glob("touxiang/*.{gif,jpg,png}",GLOB_BRACE); $img = array_rand($img_array); $dz = $img_array[$img]; header("Location:".$dz); ?> 上方代码里的touxiang改成自己建的文件夹名，最后接口地址就是：网站地址/api.php外链图片在根目录下建一个touxiang.txt和api.php文件，txt文件名字可自取，修改下方代码里touxiang名称即可，touxiang.txt里填写图片外链地址一行一个，api.php里面填写下方代码：<?php $arr=file('touxiang.txt'); $n=count($arr)-1; for ($i=1;$i<=1;$i++){ $x=rand(0,$n); header("Location:".$arr[$x],"\n"); } ?> 最后接口地址就是：网站地址/api.php二级目录如果要把文件图片放到二级目录的话，文件夹或txt文件，都要和api.php放在同一个二级目录下哦之后接口的访问地址就是：网站地址/二级目录名/api.php -
![typecho评论头像改为QQ头像]()
typecho评论头像改为QQ头像 typecho默认的评论头像Gravatar头像，这个感觉国内用的人比较少，如果是默认头像就很单调，所以我就想修改成QQ头像，评论时填写QQ邮箱自动获取头像。通过不断的网上查找整理出了三种不同的显示方式默认位置默认头像的位置，在主题里的comments.php文件，查找gravatar后可以看到<?php $comments->gravatar('100', ''); ?>修改代码直接把那一行代码删掉，换成下下方的代码<span itemprop="image"><?php $number=$comments->mail; echo '<img src="https://q2.qlogo.cn/headimg_dl? bs='.$number.'&dst_uin='.$number.'&dst_uin='.$number.'&;dst_uin='.$number.'&spec=100&url_enc=0&referer=bu_interface&term_type=PC" width="46px" height="46px" style="border-radius: 50%; float: left;margin-top: 0px;margin-right: 10px;margin-bottom:-2px">'; ?></span>这样填写QQ邮箱会显示QQ头像，填写其他邮箱，因为无法获取，显示的是一个默认QQ企鹅的头像。更新代码修改成这个代码，第二个img src=后面的地址可以填写一个默认的图片地址，也可以填写一个随机头像的api地址<span itemprop="image"><?php $number=$comments->mail; if(preg_match('|^[1-9]\d{4,11}@qq\.com$|i',$number)){ echo '<img src="https://q2.qlogo.cn/headimg_dl? bs='.$number.'&dst_uin='.$number.'&dst_uin='.$number.'&;dst_uin='.$number.'&spec=100&url_enc=0&referer=bu_interface&term_type=PC" width="46px" height="46px" style="border-radius: 50%;float: left;margin-top: 0px;margin-right: 10px;margin-bottom:-2px">'; }else{ echo '<img src="/" width="46px" height="46px" style="border-radius: 50%;float: left;margin-top: 0px;margin-right: 10px;margin-bottom:-2px">'; } ?> </span>那么在用户填写其他邮箱的时候，显示的就是你填写的那个默认头像图片，或者是随机的头像图片了。最后一个找到Typecho目录下的var/Typecho/common.php文件，查找Gravatar大约在932~950 行，修改为下方代码即可public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false) { $reg = "/^\d{5,11}@[qQ][Qq]\.(com)$/"; if (preg_match($reg, $mail)) { $img = explode("@", $mail); $url = "//q2.qlogo.cn/headimg_dl?dst_uin={$img[0]}&spec=100"; } else { if (defined('__TYPECHO_GRAVATAR_PREFIX__')) { $url = __TYPECHO_GRAVATAR_PREFIX__; } else { $url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com'; $url .= '/avatar/'; } if (!empty($mail)) { $url .= md5(strtolower(trim($mail))); } $url .= '?s=' . $size; $url .= '&r=' . $rating; $url .= '&d=' . $default; } return $url; }修改后，就是填写QQ邮箱显示QQ头像，填写其他邮箱显示Gravatar头像。 -
![Pink模板使用代码保存]()
Pink模板使用代码保存 个人使用这个模板，保存整理代码相册调用4张图!!! <div class="pink-img gallery-4"> <a href=""><img src="" alt="Beta"></a> <a href=""><img src="" alt="Beta"></a> <a href=""><img src="" alt="Beta"></a> <a href=""><img src="" alt="Beta"></a> </div> !!!3张图!!! <div class="pink-img gallery-3"> <a href=""><img src="" alt="Beta"></a> <a href=""><img src="" alt="Beta"></a> <a href=""><img src="" alt="Beta"></a> </div> !!!2张图!!! <div class="pink-img gallery-2"> <a href=""><img src="" alt="Beta"></a> <a href=""><img src="" alt="Beta"></a> </div> !!!logo设置成长方形后台主题设置 - 自定义css - 将下面的css复制进去 #moe-logo img { width: 140px; /*宽度*/ height: 50px; /*高度*/ }然后制作logo的时候，就可以按照这个比例去做啦。 -
![typecho博客网站搬移教程]()
typecho博客网站搬移教程 我用的是虚拟主机，试了在主机里备份文件数据，还有typecho博客程序后台自带的备份，迁移到另一个平台的虚拟主机总是出现问题。在百度也搜索了很多，最后无意中看到了木灵鱼儿博客的typecho备份还原教程，下方是跟着这篇教程操作后的搬移步骤。数据库备份这个教程等于把博客的设置信息全部丢弃，只保留文章数据，评论，分类信息，标签。首先要进入数据库管理，找到对应的这6个表：accesscommentscontentsfieldsmetasrelationships如果你用的是默认前缀，那么其完整表名应该就是带typecho_的了，如果你博客没有上传过附件，fields这个表就可以放弃。我的博客搬移的时候没有access，就勾选的其他5个导出导出方式：选择 自定义 - 显示所有可用的选项，然后滑到最下方点击执行，不要动其他地方，然后会显示下载一个sql文件，把他保存到本地。插件和主题备份可以直接在虚拟主机FTP/文件管理 - 数据备份 - 网站文件备份，密码自己记得就好，解压时要用，备份好文件后在文件管理的backup文件里面，点击文件名直接下载。下载好后你可以直接把你自己单独添加的文件，和图片文件压缩备份，如果是你没有修改地址，typecho博客图片默认的地址就在根目录下usr/uploads这个文件里。CommentToMail 这个插件千万不要备份，而是要使用新的数据库还原到新的主机后，重新上传Typecho的官方程序，按照之前的操作步骤重新安装一边即可。然后我们去到新主机的数据管理，勾选你刚刚在旧数据库导出过名字相同的表，删除掉然后我们打开刚刚下载到本地的sql文件，用notepad++或者是vscode这些打开，然后按Ctrl+F找到里面这句话：Database:或数据库：后面的旧数据库名，修改成你新建的博客数据库名后保存，然后在新的数据库管理里面导入导入后可以看下表的表前缀是否一样，因为我安装博客都是默认的，就不用修改了，如果不一样自行修改为和现在的数据库一样的表前缀。插件主题恢复上面的步骤操作完后，文章，评论，分类信息，标签就还原了，在重新上传启用设置你的插件主题和图片即可 -
![WordPress虚拟主机设置伪静态支持、固定链接]()
WordPress虚拟主机设置伪静态支持、固定链接 之前我安装好WordPress博客以及对应主题后，出现了添加文章后显示的文章永久链接是网站首页地址的问题，点击文章直接跳转到首页。之后虚拟主机设置伪静态支持， 然后在网站后台设置一下固定链接就解决了。设置伪静态支持在网站的根目录下，添加一个命名.htaccess文件，文件内容填写：<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>设置固定链接然后在后台设置 - 固定链接里，自定义结构，填写：/%post_id% 即可正常访问文章 -
![Typecho开启Gzip压缩，提升网站速度]()
Typecho开启Gzip压缩，提升网站速度 gzip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序，gzip命令对文本文件有60%～70%的压缩率。可以减少存储空间，通过网络传输文件时，可以减少传输的时间，提高网站的速度。开启Typecho的gzip功能在网站根目录下的index.php文件里面加上下面这个代码就可以了/*开启Gzip*/ ob_start('ob_gzhandler');测速结果网站测试的时间不同，速度可能不一样，仅为参考（添加后隔了十几二十分钟在测试的）测试地址检查压缩地址：http://tool.chinaz.com/Gzips/网站测速地址：http://tool.chinaz.com/speedtest.aspx
