教程来源至网络

Typecho代码高亮插件Code Prettify

使用方法点开查看

1 步:下载本插件,解压,放到 usr/plugins/ 目录中;

2 步:文件夹名改为 CodePrettify

3 步:登录管理后台,激活插件
(请勿与其它同类插件同时启用,以免互相影响)

4 步:设置:选择主题风格,是否显示行号等。

5 步:修改(替换)/usr/themes/handsome/assets/css/下的handsome.min.css文件
handsome.min.css`可以按照以下手动修改

删除handsome.min.css里的

pre {
    padding:0
}
pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding:15px
}

后添加以下css代码即可

#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
}

用法

\```php(语言类型必填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\

若不填写语言类型,则无效果


Pjax

如果你的网站有开启Pjax(handsome主题默认开启)

请把以下代码添加到回调函数的地方,在你使用的主题设置里看看

Handsome主题为例:

  1. 主题 --> 设置外观 --> 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);}

重要说明

可设置项

1. 选择高亮主题风格 (官方提供的 6 种风格切换,本人自己新增了三种(Mac风格))

  • coy.css
  • dark.css
  • BlackMac.css(黑色Mac风格)
  • GrayMac.css (默认选中:Mac风格(灰色))
  • WhiteMac.css(白色Mac风格)
  • twilight.css
  • tomorrow-night.css

2. 是否在代码左侧显示行号 (默认开启)


后记

很多人反馈插件在其它主题上没有效果或是样式不正常

由于有些主题是自带代码高亮

所以无法对每个主题都完美兼容

精力有限,只能尽量做好handsome主题完美兼容

反馈问题,请给出演示地址

注:C#代码与 C++代码使用 csharpcpp进行标记声明

由于最新版本handsome主题内置的高亮与该插件冲突,请进入后台 --> 设置外观 --> 主题增强功能里关闭主题内置高亮
文章来源

彩色云标签

使用方法点开查看

<!--左侧图标颜色and彩色标签云-->
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;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag => {
    tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.color = tagsColor;
});

如果你的主题开启了pjax,需在后台pjax添加回调函数>pjax添加回调函数

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;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

复制弹窗提醒

使用方法点开查看

将以下代码填入开发者设置 》》 自定义输出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: "5000"
})

</script>

将以下代码填入开发者设置 》》 自定义Javascript

kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创,转载请注明出处!<br> 本文作者:Smjxf<br>原文链接:"+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "15000"
    })
}}

如果你开启了PJAX,那么需要在主题设置》PJAX》PJAX回调函数一栏内填入以下函数,然后保存即可。

kaygb_copy();

独立页面或文章单独调用

此调用方式可实现在文章打开之后弹窗提示,我在我的独立页面秘密基地

使用时,只需要在文章内插入可执行代码,也就是用三个英文感叹号包裹

!!!

<script>
$.message({
    message: "这里有我的实验室,子站点,项目展示和联系方式!",
    title: "欢迎来到秘密基地!",
    type: "info",
    autoHide: !1,
    time: "10000"
})
</script>

!!!

关于弹窗时间
时间以毫秒计算,1000即代表着1秒,如果我们想让他显示十秒钟,time修改为10000即可!

最后一些设置参数
参数

title:弹窗的标题
message:弹窗标题下方的文字
type: 弹窗类型
autoHide:默认即可
time:停留时间(毫秒,1秒为1000毫秒)

侧边栏添加二维码

使用方法点开查看

打开/usr/themes/handsome/component文件夹下的sidebar.php在大概81行的section之后,也就是随机文章那一块之后,博客信息之前。当然具体位置可以按照自己的喜好来。
后面另起一行,填入以下的代码保存即可:

<section  id="blog_qrurl" class="widget widget_categories wrapper-md clear">
<!--<script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
<script type="text/javascript" src="/usr/themes/handsome/assets/js/qrcode.min.js"></script>
          <h5 class="widget-title m-t-none text-md no-in-mb">移动端扫码阅读</h5>
          <style>
              #qrcode img{
                  max-width: 100%;
              }
              @media (max-width: 767px){
                  #qrcode, .no-in-mb{
                      display: none;
                  }
              }

          </style>
          <div id="qrcode" class="widget widget_categories wrapper-md clear"></div>
          <script>
            var elText = window.location.href;
            new QRCode(document.getElementById("qrcode"), elText);
          </script>
          
      </section>

最后修改:2021 年 02 月 17 日 03 : 08 PM
本文结束感谢您的阅读
本文作者:
文章标题:【Handsome]主题美化记录及使用插件
本文地址:https://smjxf.com/Typecho/132.html
版权说明:若无注明,本文皆 - 帅美俊 - 原创,转载请保留文章出处。
如果觉得我的文章对你有用,请随意赞赏