不同主题高亮不统一问题

本站由于之前曾用不同编辑器插件编辑文章，因此代码高亮区域的 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 选择器也根据实际情况进行修改即可。