谁还不会写前端呢？
请注意，本文编写于 1070 天前，最后修改于 1070 天前，其中某些信息可能已经过时。
前端页面修修改改，最后还是又回到了最初的起点。以后再也不折腾了！
.articleBody h2::before {
content: '#';
color: #2ECC71;
position: absolute;
left: -17px;
top: 50%;
transform: translateY(-50%);
}评论框样式调整
代码语言：javascript复制#comments form .comment-buttons .OwO .OwO-body .OwO-items-image .OwO-item {
max-width: calc(25% - 10px)!important
}
#comments form .comment-buttons .OwO {
left: 12px;
width: auto;
top: -60px
}
.comment-reply {
border: 3px solid #ff5268;
color: #ff5268;
line-height: 22px
}
#comments form .comment-buttons {
margin: 1.5rem 0
}
#comments form #textarea, #comments form .comment-info-input input {
border-radius: 0
}评论框随机昵称
代码语言：javascript复制<div>
<input aria-label="称呼(必填)" type="text" name="author" id="author" required placeholder="称呼(必填)" value="<?php $this->remember('author'); ?>"/>
<div id="get-nickname">随机昵称</div>
</div>
<style>
.comment-info-input>div {
position: relative;
flex: 1;
}
.comment-info-input #author {
width: 100%;
}
.comment-info-input #get-nickname {
height: 2em;
padding: .1em;
border: 3px solid #DC7633;
border-radius: 5px;
color: rgba(0, 0, 0, .6);
background: 0 0;
float: right;
font-family: inherit;
font-size: .8em;
text-align: center;
line-height: 1.3em;
cursor: pointer;
transition: all .5s;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
user-select:none;
}
.comment-info-input #get-nickname:hover {
background: #DC7633;
color: white;
}
</style>
<script>
$('#get-nickname').click(function(){
var nickNameArr = ['路人甲', '炮灰已', '流氓丙', '土匪丁', '龙套戊']
$(this).prev().val(nickNameArr[parseInt(nickNameArr.length*Math.random())]);
})
</script>评论提交快捷键
代码语言：javascript复制<!--利用 Ctrl Enter 发送评论-->
document.querySelector('#textarea').addEventListener('keydown', function() {
if (event.ctrlKey && event.keyCode == 13) {
document.querySelector("#comment-submit-button").click();
}
})网站主页样式微调
代码语言：javascript复制main .wrapper section:first-of-type {
margin-top: 1rem
}
section#index-list {
margin-bottom: 1rem
}
header .container {
padding: 0 5px
}
.container.wide {
padding: 0 5px
}
section#index-list>ul>li {
margin-bottom: 15px;
padding-bottom: 0px;
}
section#index-list>ul>li article .post-meta-index {
font-size: 10px
}
main .lazy-wrap .banner-title .post-title {
font-size: 1.5rem
}
section#index-list>ul>li article .title {
font-size: 1.3rem!important
}
section#index-list>ul>li article p.headline {
font-size: 16px;
margin-bottom: 5px
}
section#index-list>ul>li article.title {
font-size: 1.3rem
}
#index-list ul li .yue {
font-size: 14px;
}表格样式调整
代码语言：javascript复制.yue table {
margin: 0 auto;
width: max-content
}隐藏站长统计
代码语言：javascript复制a[title='站长统计'] {
display: none
}
#cnzz_stat_icon_1276108172 {
display: none
}文章页面版式
代码语言：javascript复制.articleBody p {
text-indent: 2em
}
article img.biaoqing {
height: 1.5em;
vertical-align: middle
}PC端首页文章盒子动画
代码语言：javascript复制@media screen and (min-width: 767px) {
.comment-ua {
float: right;
}
#index-list li {
transition: all .3s!important;
}
#index-list li:hover {
transition: all .3s;
transform: translateY(-10px);
box-shadow: 8px 8px 10px rgba(0, 0, 0, .25);
}
}即时搜索BUG解决方案
代码语言：javascript复制window.addEventListener("load", function() {
document.querySelector('.ins-search-input').addEventListener('keydown', function() {
if (event.keyCode === 13) {
if (this.value === "") {
VOID.alert("请输入内容后再按回车键！");
} else {
window.location.href = "https://blog.manyacan.com/search/" this.value;
VOID.alert("进行搜索重定向...");
}
}
})
})复制文字提示
代码语言：javascript复制document.addEventListener('copy', function() {
VOID.alert('既然帮到你了，不妨留个言呗~')
})获取userAgent信息
css内容部分
代码语言：javascript复制.ua-icon {
display: inline-block;
width: 1pc;
height: 1pc;
background-size: cover;
background-repeat: no-repeat;
vertical-align: text-top
}
.icon-360 {
background-image: url(https://cdn.manyacan.com/userAgent/360.png)
}
.icon-android {
background-image: url(https://cdn.manyacan.com/userAgent/android.png);
height: 19px
}
.icon-apple {
background-image: url(https://cdn.manyacan.com/userAgent/apple.png)
}
.icon-baidu {
background-image: url(https://cdn.manyacan.com/userAgent/baidu.png)
}
.icon-chrome {
background-image: url(https://cdn.manyacan.com/userAgent/chrome.png)
}
.icon-edge {
background-image: url(https://cdn.manyacan.com/userAgent/edge.png)
}
.icon-firefox {
background-image: url(https://cdn.manyacan.com/userAgent/firefox.png)
}
.icon-google {
background-image: url(https://cdn.manyacan.com/userAgent/google.png)
}
.icon-ie {
background-image: url(https://cdn.manyacan.com/userAgent/ie.png)
}
.icon-liebao {
background-image: url(https://cdn.manyacan.com/userAgent/liebao.png)
}
.icon-linux {
background-image: url(https://cdn.manyacan.com/userAgent/linux.png)
}
.icon-mac {
background-image: url(https://cdn.manyacan.com/userAgent/mac.png)
}
.icon-opera {
background-image: url(https://cdn.manyacan.com/userAgent/opera.png)
}
.icon-qq {
background-image: url(https://cdn.manyacan.com/userAgent/qq.png)
}
.icon-quark {
background-image: url(https://cdn.manyacan.com/userAgent/quark.png)
}
.icon-safari {
background-image: url(https://cdn.manyacan.com/userAgent/safari.png)
}
.icon-ubuntu {
background-image: url(https://cdn.manyacan.com/userAgent/ubuntu.png)
}
.icon-uc {
background-image: url(https://cdn.manyacan.com/userAgent/uc.png)
}
.icon-win1 {
background-image: url(https://cdn.manyacan.com/userAgent/win1.png)
}
.icon-win2 {
background-image: url(https://cdn.manyacan.com/userAgent/win2.png)
}
.comment-ua .ua-icon {
vertical-align: bottom
}php页面内容部分
代码语言：javascript复制 <!-- 显示UserAgent -->
<span class="comment-ua">
<?php getOs($this->agent); ?>
<?php getBrowser($this->agent); ?>
</span>php函数部分
代码语言：javascript复制// 评论显示userAgent
// 获取浏览器信息
function getBrowser($agent)
{
if (preg_match('/MSIEs([^s|;] )/i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-ie"></i><span> Internet Explore</span>';
} else if (preg_match('/FireFox/([^s] )/i', $agent, $regs)) {
$str1 = explode('Firefox/', $regs[0]);
$FireFox_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-firefox"></i><span> FireFox</span>';
} else if (preg_match('/Maxthon([d]*)/([^s] )/i', $agent, $regs)) {
$str1 = explode('Maxthon/', $agent);
$Maxthon_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-edge"></i><span> Microsoft Edge</span>';
} else if (preg_match('#360([a-zA-Z0-9.] )#i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-360"></i> 360极速浏览器';
} else if (preg_match('/Edge([d]*)/([^s] )/i', $agent, $regs)) {
$str1 = explode('Edge/', $regs[0]);
$Edge_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-edge"></i><span> Microsoft Edge</span>';
} else if (preg_match('/UC/i', $agent)) {
$str1 = explode('rowser/', $agent);
$UCBrowser_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-uc"></i><span> UC浏览器</span>';
} else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQBrowser/([^s] )/i', $agent, $regs)) {
$str1 = explode('rowser/', $agent);
$QQ_vern = explode('.', $str1[1]);
$outputer = '<i class= "ua-icon icon-qq"></i><span> QQ浏览器</span>';
} else if (preg_match('/UBrowser/i', $agent, $regs)) {
$str1 = explode('rowser/', $agent);
$UCBrowser_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-uc"></i><span> UC浏览器</span>';
} else if (preg_match('/Opera[s|/]([^s] )/i', $agent, $regs)) {
$outputer = '<i class= "ua-icon icon-opera"></i><span> Opera</span>';
} else if (preg_match('/Chrome([d]*)/([^s] )/i', $agent, $regs)) {
$str1 = explode('Chrome/', $agent);
$chrome_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-chrome""></i><span> Google Chrome</span>';
} else if (preg_match('/safari/([^s] )/i', $agent, $regs)) {
$str1 = explode('Version/', $agent);
$safari_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-safari"></i><span> Safari</span>';
} else{
$outputer = '<i class="ua-icon icon-chrome"></i><span> Google Chrome</span>';
}
echo $outputer;
}
// 获取操作系统信息
function getOs($agent)
{
$os = false;
if (preg_match('/win/i', $agent)) {
if (preg_match('/nt 6.0/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1"></i><span> Windows Vista / </span>';
} else if (preg_match('/nt 6.1/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1"></i><span> Windows 7 / </span>';
} else if (preg_match('/nt 6.2/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i><span> Windows 8 / </span>';
} else if(preg_match('/nt 6.3/i', $agent)) {
$os = ' <i class= "ua-icon icon-win2"></i><span> Windows 8.1 / </span>';
} else if(preg_match('/nt 5.1/i', $agent)) {
$os = ' <i class="ua-icon icon-win1"></i><span> Windows XP / </span>';
} else if (preg_match('/nt 10.0/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i><span> Windows 10 / </span>';
} else{
$os = ' <i class="ua-icon icon-win2"></i><span> Windows X64 / </span>';
}
} else if (preg_match('/android/i', $agent)) {
if (preg_match('/android 9/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i><span> Android Pie / </span>';
}
else if (preg_match('/android 8/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i><span> Android Oreo / </span>';
}
else{
$os = ' <i class="ua-icon icon-android"></i><span> Android / </span>';
}
}
else if (preg_match('/ubuntu/i', $agent)) {
$os = ' <i class="ua-icon icon-ubuntu"></i><span> Ubuntu / </span>';
} else if (preg_match('/linux/i', $agent)) {
$os = ' <i class= "ua-icon icon-linux"></i><span> Linux / </span>';
} else if (preg_match('/iPhone/i', $agent)) {
$os = ' <i class="ua-icon icon-apple"></i><span> iPhone / </span>';
} else if (preg_match('/mac/i', $agent)) {
$os = ' <i class="ua-icon icon-mac"></i><span> MacOS / </span>';
}else if (preg_match('/fusion/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i><span> Android / </span>';
} else {
$os = ' <i class="ua-icon icon-linux"></i><span> Linux / </span>';
}
echo $os;
}获取页面加载时间
代码语言：javascript复制/**
* 加载时间
* @return bool
*/
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;
}页面输出
代码语言：javascript复制<p>加载耗时：<?php echo timer_stop();?><p>一些杂七杂八调整
代码语言：javascript复制#comments p.notice {
border-left: solid 4px #2ECC71
}
#comment-submit-button {
width: inherit;
max-width: none;
}
.OwO .OwO-body .OwO-items .OwO-item {
padding: 0;
}
.MathJax_SVG_Display {
overflow: auto
}
footer a:hover {
border-bottom: 1px solid #ccc
}
.msg {
border-radius: 0
}
.fancybox-bg {
background: rgba(0,0,0,0.8)
}
.douban-single {
border-radius: 0!important
}
.masonry-item.style-2 .content-wrap:hover {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px)
}
main .lazy-wrap .banner-title .subtitle {
margin-top: 0
}
@media screen and (max-width:767px) {
footer .container {
text-align: center
}
footer .container>section:nth-child(2) {
display: none
}
.comment-ua span {
display: none
}
}
.banner-title.index.force-normal>.post-title>.brand {
font-size: 2rem
}
.fancybox-container .fancybox-slide--html {
max-width: 400px;
left: 50%;
transform: translateX(-50%);
width: 60%
}
#comments .comment-list .comment-body .comment-content-wrap .comment-reply a {
padding: .05rem .25rem
}
section#archive-list section.year ul li a {
white-space: normal!important
}
[itemprop=articleBody] p {
text-indent: 2em
}
.TOC {
background: rgba(0, 0, 0, .7)
}
nav>a:nth-child(2):hover {
background-color: rgba(0,0,0,.15)
}
header .container nav a.brand, header .container nav span.dropdown.brand {
padding: 0 10px
}
.btn {
border-radius: 0;
}
.avatar {
border-radius: 0;
}
#setting-panel section#login-panel form div#loggin-inputs input {
border-radius: 0;
}
header .container nav span.search-form-desktop input {
border-radius: 0
}
header .container nav span.search-form-desktop label::after {
content: '';
width: 1px;
height: 1.4em;
background-color: #ccc;
margin-left: .3em
}
main .wrapper section .not-found h1 {
margin-bottom: 0
}
table th, table td {
text-align: center!important
}
#adjust-text-container .adjust-text-item a, #setting-panel section #adjust-text-container .adjust-text-item span {
border-radius: 0
}
section#post .post-pager>div::before {
border-radius: 0
}
#ctrler-panel .ctrler-item {
background-color: rgba(0,0,0,.4)
}代码块增加复制按钮
代码语言：javascript复制<style>
.copyDiv {
position: absolute;
top: 6px;
right: 10px;
color: white;
z-index: 100;
width: 50px;
height: 20px;
border: 1px solid #05F56B;
text-align: center;
cursor: pointer;
background-color: #85C1E9;
border-radius: 3px;
line-height: 18px;
}
</style>
<script>
$(document).ready(function(){
$('pre').prepend('<div class="copyDiv">☑Copy</div>');
function copyHandle(content) {
let copy = (e) => {
e.preventDefault()
e.clipboardData.setData('text/plain', content)
document.removeEventListener('copy', copy)
}
document.addEventListener('copy', copy)
document.execCommand("Copy");
}
$('.copyDiv').click(function() {
copyHandle($(this).next().text());
})
})
</script>随机图片实现
实现函数
代码语言：javascript复制function thumb($obj) {
$rand_num = 10; //随机图片数量，根据图片目录中图片实际数量设置
if ($rand_num == 0) {
$imgurl = "随机图片存放目录/0.jpg";
//如果$rand_num = 0,则显示默认图片，须命名为"0.jpg"，注意是绝对地址
}else{
$imgurl = "随机图片存放目录/".rand(1,$rand_num).".jpg";
//随机图片，须按"1.jpg","2.jpg","3.jpg"...的顺序命名，注意是绝对地址
}
$attach = $obj->attachments(1)->attachment;
if(isset($attach->isImage) && $attach->isImage == 1){
$thumb = $attach->url;
}else{
$thumb = $imgurl;
}
return $thumb;
}php页面调用
代码语言：javascript复制<img src="<?php echo thumb($this); ?>"/>----- END -----
