网站前端修改 - 成就云开发者社区

谁还不会写前端呢？

请注意，本文编写于 1070 天前，最后修改于 1070 天前，其中某些信息可能已经过时。

前端页面修修改改，最后还是又回到了最初的起点。以后再也不折腾了！

为H2标题增加伪元素高亮显示

代码语言：javascript

复制

.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('/MSIE\s([^\s|;]+)/i', agent, regs)) {

$outputer = '<i class="ua-icon icon-ie"></i><span>&nbsp;&nbsp;Internet Explore</span>';

} else if (preg_match('/FireFox/([^\s]+)/i', agent, regs)) {

str1 = explode(&#39;Firefox/&#39;, regs[0]);

FireFox_vern = explode(&#39;.&#39;, str1[1]);

$outputer = '<i class="ua-icon icon-firefox"></i><span>&nbsp;&nbsp;FireFox</span>';

} else if (preg_match('/Maxthon([\d])/([^\s]+)/i', agent, regs)) {

str1 = explode(&#39;Maxthon/&#39;, agent);

Maxthon_vern = explode(&#39;.&#39;, str1[1]);

$outputer = '<i class="ua-icon icon-edge"></i><span>&nbsp;&nbsp;Microsoft Edge</span>';

} else if (preg_match('#360([a-zA-Z0-9.]+)#i', agent, regs)) {

$outputer = '<i class="ua-icon icon-360"></i>&nbsp;&nbsp;360极速浏览器';

} else if (preg_match('/Edge([\d])/([^\s]+)/i', agent, regs)) {

str1 = explode(&#39;Edge/&#39;, regs[0]);

Edge_vern = explode(&#39;.&#39;, str1[1]);

$outputer = '<i class="ua-icon icon-edge"></i><span>&nbsp;&nbsp;Microsoft Edge</span>';

} else if (preg_match('/UC/i', $agent)) {

str1 = explode(&#39;rowser/&#39;,  agent);

UCBrowser_vern = explode(&#39;.&#39;, str1[1]);

$outputer = '<i class="ua-icon icon-uc"></i><span>&nbsp;&nbsp;UC浏览器</span>';

}  else if (preg_match('/QQ/i', agent, regs)||preg_match('/QQBrowser/([^\s]+)/i', agent, regs)) {

str1 = explode(&#39;rowser/&#39;,  agent);

QQ_vern = explode(&#39;.&#39;, str1[1]);

$outputer = '<i class= "ua-icon icon-qq"></i><span>&nbsp;&nbsp;QQ浏览器</span>';

} else if (preg_match('/UBrowser/i', agent, regs)) {

str1 = explode(&#39;rowser/&#39;,  agent);

UCBrowser_vern = explode(&#39;.&#39;, str1[1]);

$outputer = '<i class="ua-icon icon-uc"></i><span>&nbsp;&nbsp;UC浏览器</span>';

}  else if (preg_match('/Opera\s|//i', agent, regs)) {

$outputer = '<i class= "ua-icon icon-opera"></i><span>&nbsp;&nbsp;Opera</span>';

} else if (preg_match('/Chrome([\d]*)/([^\s]+)/i', agent, regs)) {

str1 = explode(&#39;Chrome/&#39;, agent);

chrome_vern = explode(&#39;.&#39;, str1[1]);

$outputer = '<i class="ua-icon icon-chrome""></i><span>&nbsp;&nbsp;Google Chrome</span>';

} else if (preg_match('/safari/([^\s]+)/i', agent, regs)) {

str1 = explode(&#39;Version/&#39;,  agent);

safari_vern = explode(&#39;.&#39;, str1[1]);

$outputer = '<i class="ua-icon icon-safari"></i><span>&nbsp;&nbsp;Safari</span>';

} else{

$outputer = '<i class="ua-icon icon-chrome"></i><span>&nbsp;&nbsp;Google Chrome</span>';

}

echo $outputer;

}

// 获取操作系统信息

function getOs($agent)

{

$os = false;
if (preg_match(&#39;/win/i&#39;, $agent)) {
    if (preg_match(&#39;/nt 6.0/i&#39;, $agent)) {
        $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class= &#34;ua-icon icon-win1&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Windows Vista&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
    } else if (preg_match(&#39;/nt 6.1/i&#39;, $agent)) {
        $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class= &#34;ua-icon icon-win1&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Windows 7&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
    } else if (preg_match(&#39;/nt 6.2/i&#39;, $agent)) {
        $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-win2&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Windows 8&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
    } else if(preg_match(&#39;/nt 6.3/i&#39;, $agent)) {
        $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class= &#34;ua-icon icon-win2&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Windows 8.1&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
    } else if(preg_match(&#39;/nt 5.1/i&#39;, $agent)) {
        $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-win1&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Windows XP&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
    } else if (preg_match(&#39;/nt 10.0/i&#39;, $agent)) {
        $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-win2&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Windows 10&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
    } else{
        $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-win2&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Windows X64&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
    }
} else if (preg_match(&#39;/android/i&#39;, $agent)) {
if (preg_match(&#39;/android 9/i&#39;, $agent)) {
        $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-android&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Android Pie&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
    }
else if (preg_match(&#39;/android 8/i&#39;, $agent)) {
        $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-android&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Android Oreo&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
    }
else{
        $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-android&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Android&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
}
}
else if (preg_match(&#39;/ubuntu/i&#39;, $agent)) {
    $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-ubuntu&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Ubuntu&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
} else if (preg_match(&#39;/linux/i&#39;, $agent)) {
    $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class= &#34;ua-icon icon-linux&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Linux&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
} else if (preg_match(&#39;/iPhone/i&#39;, $agent)) {
    $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-apple&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;iPhone&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
} else if (preg_match(&#39;/mac/i&#39;, $agent)) {
    $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-mac&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;MacOS&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
}else if (preg_match(&#39;/fusion/i&#39;, $agent)) {
    $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-android&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Android&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
} else {
    $os = &#39;&amp;nbsp;&amp;nbsp;&lt;i class=&#34;ua-icon icon-linux&#34;&gt;&lt;/i&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp;Linux&amp;nbsp;/&amp;nbsp;&lt;/span&gt;&#39;;
}
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 . &#34; ms&#34; : 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&gt;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) =&gt; {
            e.preventDefault()
            e.clipboardData.setData(&#39;text/plain&#39;, content)
            document.removeEventListener(&#39;copy&#39;, copy)
        }
        document.addEventListener(&#39;copy&#39;, copy)
        document.execCommand(&#34;Copy&#34;);
    }
    
    $(&#39;.copyDiv&#39;).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 = &#34;随机图片存放目录/&#34;.rand(1,rand_num).".jpg";

//随机图片，须按"1.jpg","2.jpg","3.jpg"...的顺序命名，注意是绝对地址

}

attach = obj->attachments(1)->attachment;

if(isset(attach-&gt;isImage) &amp;&amp; attach->isImage == 1){

thumb = attach->url;

}else{

thumb = imgurl;

}

return $thumb;

}

php页面调用

代码语言：javascript

复制

<img src="<?php echo thumb($this); ?>"/>

----- END -----