Carpe Diem and Do what I like.
admin

引入pjax后,由于只是局部刷新,导致支撑评论回复框定位的对象没有被重新加载,从而引起无法将评论框定位到回复区的现象(但是强制刷新一下页面, 又会恢复正常)。

虽然不影响使用,但追求完美是人的天性。搜索了很多资料,大多是对多说(外挂)的支持,且内容同质化,多为转载,操作复制且有代码不完整的可能,无法解决原生评论的问题。

引起这个问题的原因是: window.TypechoComment对象是typecho在head标签里调用$this->header()方法为我们生成的,Pjax加载后window.TypechoComment没有被重新载入进来,且window.TypechoComment里的respondId 没有被重新生成。

解决办法:在Pjax的替换#pjax-container时, 重新载入window.TypechoComment对象,将下面代码加入(post.php&page.php)页面容器(<div id="pjax-container"> </div>)内刷新时重载对象。

 <!--commentReply=1 表示仅输出 window.TypechoComment 对象-->
    <?php $this->header('commentReply=1&description=0&keywords=0&generator=0&template=0&pingback=0&xmlrpc=0&wlw=0&rss2=0&rss1=0&antiSpam=0&atom'); ?>

2022年10月03日
admin

网页背景音乐除了采用框架页面镶套外,想要翻页不被中断播放,一直以来没有什么好的解决办法。今天学到一个新的技能:pjax。

pushState + ajax = pjax ,它带来最直观的效果是整个网站变成类似单页应用。这样的效果将会极大的提升用户体验,并且可以减少https的请求的次数和内容。使用github上面的一个开源项目defunkt/jquery-pjax 可以很轻松的帮助我们实现pjax。

想要在自己的网站上实现pjax功能也很简单,具体步骤如下:
1、js文件引入:

<!-- jQuery引用 -->
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<!-- pjax引入 -->
<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

以上文件的版本太高有时候会失效。将代码复制加入到header或者footer页面代码中不用刷新的位置即可。注意两个JS先后顺序不能放反。
2、限制范围:

<script>

$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {

container: '#pjax-container',
fragment: '#pjax-container',
timeout: 8000

})
</script>

上面代码:<?php Helper::options()->siteUrl()?>是typecho的自带函数,调用本站的首页地址(可根据程序替换)!也就是只对本站的,并且没有_blank属性的,标签里不含no-pjax的链接实行pjax!局部刷新的区域是#pjax-container的部分!

其中#pjax-container是你的局部刷新部分,你可能没有这个div,你自己再添加一个div包裹住你想局部刷新的部分就行了!

<div id="pjax-container">
</div>

3、加载动画:

<script>
$(document).on('pjax:send',
function() {

$('#loader-wrapper').addClass(&quot;in&quot;);

})

$(document).on('pjax:complete',
function() {

$('#loader-wrapper').removeClass(&quot;in&quot;);

})
</script>

上面代码:就是在pjax执行开始的时候,给#loader-wrapper加上in的样式名称。在pjax结束的时候给给#loader-wrapper去掉in的样式名称,这样就有了加载出现动画,加载后动画消失的效果。

以上第3步不是必需,经过处理后,将背景音乐运行代码放置在不被刷新的位置即可流畅的享受页面切换而音乐不被停止。

2022年10月01日
admin

调试主题的时候发现MENU主菜单有时候会一闪而过,然后再隐藏。尝试调整代码运行的先后顺序,发现并没有解决问题。

通过万能的搜索引擎,找到一个有效的解决办法。

v-cloak指令:v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none配合使用。例如:

<div id="app" v-cloak>
{{message}}
</div>
<script>
var app = new Vue({
    el:"#app",
    data:{
        message:"这是一段文本"
    }
})
</script>

这段代码虽然已经加了指令v-cloak,但其实并没有起到任何作用,当网速较慢、Vue.js 文件还没加载完时,在页面上会显示{{message}}的字样,直到Vue创建实例、编译模版时,DOM才会被替换。所以这个过程屏幕还是会有闪动。
接下来只需要在CSS中加一句简单的代码就可以解决这个问题了:

[v-cloak]{

display:none; }

在一般情况下,v-cloak是一个解决初始化慢导致页面闪动的最佳方案,对于简单的项目很实用。效果可以查看本站。

2022年09月28日
admin

夫天地者万物之逆旅也;光阴者百代之过客也。而浮生若梦,为欢几何?古人秉烛夜游,良有以也。

况阳春召我以烟景,大块假我以文章。会桃花之芳园,序天伦之乐事。群季俊秀,皆为惠连;吾人咏歌,独惭康乐。幽赏未已,高谈转清。开琼筵以坐花,飞羽觞而醉月。不有佳咏,何伸雅怀?如诗不成,罚依金谷酒数。

2022年09月28日
admin

轻轻的我走了,正如我轻轻的来;我轻轻的招手,作别西天的云彩。

那河畔的金柳,是夕阳中的新娘,波光里的艳影,在我的心头荡漾。

软泥上的青荇,油油的在水底招摇;在康河的柔波里,我甘心做一条水草!

那树荫下的一潭,不是清泉,是天上虹;揉碎在浮藻间,沉淀着彩虹似的梦。

寻梦撑一支长篙,向青草更青处漫溯,满载一船星辉,在星辉斑斓里放歌。

但我不能放歌,悄悄是别离的笙箫;夏虫也为我沉默,沉默是今晚的康桥!

悄悄的我走了,正如我悄悄的来;我挥一挥衣袖,不带走一片云彩。

2022年09月28日
Copyright © 2025.