从零开始 | Sola主题美化记录

RSS

DIYGOD中有RSS,这也是很实用的一个东西,但是Sola主题中并没有这行代码,所以我们可以在footer.php中通过Ctrl+F 查找 <div class="flex items-center"> 并添加以下代码:
2024-11-07T17:26:26.png

<button aria-label="Subscribe to RSS" type="button" class="flex items-center transition-colors duration-200 sm:hover:bg-sky-600/50 sm:hover:text-white rounded-full p-1 sm:px-4 sm:py-2" onclick="window.open('<?php $this->options->FeedUrl(); ?>', '_blank')">
    <span class="fill-gray-500 flex size-6 text-2xl">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-full text-[#ee832f]">
            <path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75V4.5Zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75v-.75Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd"></path>
        </svg>
    </span>
</button>

复制提醒

2024-11-07T17:25:23.png
拥有一个复制提醒功能,会让网站整体变得更美观、好看,那如何添加?首先我们需要来个js、css套餐,引用CDN资源。将其合并并在主题设置外观中的头部信息或底部信息引用即可~

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css">

然后引用JavaScript代码

<script>
/* 复制提醒 */
document.addEventListener("copy",function(e){
    new Vue({
        data:function(){
            this.$notify({
                title:"嘿!复制成功",
                message:"若要转载请务必保留原文链接! 爱你呦~",
                position: 'bottom-right',
                offset: 50,
                showClose: false,
                type:"success"
            });
            return{visible:false}
        }
    })
})
</script>

评论区

暂无评论,快来抢沙发