JavaScript全局修改代码修饰器CSS 网站添加prettify代码高亮教程

😂 这篇文章最后更新于1587天前,您需要注意相关的内容是否还可用。
目录导航
  • 不同主题高亮不统一问题
    • 代码高亮代码
  • 代码复制功能
  • 文章页面编辑功能
  •  不同主题高亮不统一问题

    本站由于之前曾用不同编辑器插件编辑文章,因此代码高亮区域的CSS都点不同,不同主题之间对<pre>标签的处理也都不一样,造成每个主题都有不同的代码高亮形式。之前我的解决方法是改插件的CSS实现CSS内容统一,但这样面临两个问题:

    1. 操作麻烦 需要手动修改CSS源文件

    2. 破坏插件CSS 当插件更新时会修改可能会被覆盖恢复

        感叹之前想得太麻烦,其实很简单解决这个问题,首先引入相关js、css代码(没有可在商店下载):

    <link rel="stylesheet" type="text/css" href="/zb_users/plugin/FY_Prettify/prettify.css" />     
    <script src="/zb_users/plugin/FY_Prettify/prettify.js"></script>

    然后通过js遍历标签节点强制更改pre标签为指定样式:

        <script type="application/javascript">
    		var tags= document.getElementsByTagName("pre");
    		for (let s of tags) {
    			s.setAttribute("class","fy-prettyprint linenums");
    		}
    	</script>

    最后将这段代码放在主题设置的统计代码中即可,即以下:

    代码高亮代码

    <link rel="stylesheet" type="text/css" href="/zb_users/plugin/FY_Prettify/prettify.css" />     
    <script src="/zb_users/plugin/FY_Prettify/prettify.js"></script>
    <script type="application/JavaScript">
    	var tags= document.getElementsByTagName("pre");
    	for (let s of tags) {
    		s.setAttribute("class","fy-prettyprint linenums");
    	}
    	prettyPrint();
    </script>

    其中本站已在prettify.js中调用了prettyPrint()方法,因此可以删除prettyPrint()避免重复调用。但是鄙人发现调用后还是没效果,发现可能是jq版本造成的错误,原错误代码:

    /*初始化prettyPrint*/
    jQuery(window).load(function(){
        jQuery("pre").addClass("prettyprint");
         prettyPrint();
    })

    改成下列即可

    /*初始化prettyPrint*/
    $(window).on('load',function(){
        jQuery("pre").addClass("prettyprint");
         prettyPrint();
    })

    代码复制功能

    代码复制引用相关js即可。Z-Blog用户可在应用商店搜索“复制代码”

    <script src="/zb_users/plugin/copycode/clipboard.min.js"></script>
    <script src="/zb_users/plugin/copycode/copycode.js" type="text/javascript" /></script>

    将如下代码放在网站任意共通页面中即可。

    文章页面编辑功能

    给每篇文章页面添加编辑功能,很简单,在文章显示页的PHP主题模板文件中添加:

    <span>{if $user.ID>0}<i class="fi fi-edit"></i><a href="{$host}zb_system/cmd.php?act=ArticleEdt&id={$article.ID}" rel="nofollow">Edit &nbsp;</a>{/if}</span>

    当然最简单是将上述封装成js文件直接引用就行,可以省去修改PHP模板的困扰,也减少代码侵入:

    var tags = document.getElementsByTagName("pre");
    for (let s of tags) {
    	s.setAttribute("class", "fy-prettyprint linenums");
    }
    function getCookie(cookieName) {
    	var cookieValue = "";
    	if (document.cookie && document.cookie != '') {
    		var cookies = document.cookie.split(';');
    		for (var i = 0; i < cookies.length; i++) {
    			var cookie = cookies[i];
    			if (cookie.substring(0, cookieName.length + 2).trim() == cookieName.trim() + "=") {
    				cookieValue = cookie.substring(cookieName.length + 2, cookie.length);
    				break;
    			}
    		}
    	}
    	return cookieValue;
    }
    if (getCookie('username')) {
    	var pathName = window.location.pathname;
    	if (pathName.indexOf('post/') > -1) {
    		var endNum = pathName.length - 5;
    		var articleNo = pathName.substring(6, endNum);
    		if (!$('.article-info .fr .edits').html()) {
    			var editStr =
    				'<span><i class="fi fi-edit"></i> <a href="/zb_system/cmd.php?act=ArticleEdt&id='+articleNo+'"rel="nofollow">Edit &nbsp;</a></span> ';
    			$('.article-info .fr').prepend(editStr);
    		}
    	}
    }

    以上代码思路也很简单,判断当前cookie中是否有用户名字段,有就在页面指定位置添加编辑按钮,这里编辑按钮的articleNo是根据当前页面Url来的,你的页面伪静态策略可能不一样,因此根据实际需求修改吧,关于编辑框插入位置的css选择器也根据实际情况进行修改即可。