前言

想在博客里面嵌入一个页面不想跳转，这边给大家带一个教程

ps:如果你的博客开了SSL,下面的链接也需要开SSL，要不然跳转不了。

教程

代码+教程

/*背景图*/
body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://图片链接/) top fixed;}

/*背景色*/body {background: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); background-color: #FFDEE9;}

CSS代码：

/*导航栏字体加粗*/
ul.nav {font-weight: 700;}

子比主题设置—>自定义代码—>自定义javascript代码：,添加以下代码：

//透明复制提示
// by：忧心笔记 www.uxr.cc
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【忧心笔记 www.uxr.cc 】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};

子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码：

<!--透明复制提示开始--> 
<!--by：忧心笔记 www.uxr.cc-->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--透明复制提示结束--> 

效果图

前言

对于许多资源站，在下载时或多或少会设置提取码，由于子比并未设置单独填写提取码的位置，且因为用户需求不同，子比主题需要用户手动复制或输入提取码。

故此写了这段小代码，代码无需修改主题文件，均存放于自定义代码块，无需担心主题更新。

效果

/* 
 *作者：消音
 *请本CSS代码放置子比主题设置->全局&功能->自定义CSS样式中即可
 */
.but-download .badg {
  position: relative;
  cursor:pointer;
}

.but-download .badg::after {
  position: absolute;
  content: " ";
  width: 0;
  height: 0;
  top: -11px;
  left: 50%;
  -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
       -o-transform: translateX(-50%);
          transform: translateX(-50%);
  border-top: 10px solid rgb(236, 235, 235);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -moz-transition: .3s;
  transition: .3s;
  opacity: 0;
}

.but-download .badg::before {
  content: attr(data-before);
  position: absolute;
  width: 100px;
  height: 31px;
  top: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
       -o-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 14px;
  line-height: 31px;
  border-radius: 4px;
  color: #6c6a6a;
  background-color: rgb(236, 235, 235);
  text-align: center;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -moz-transition: .3s;
  transition: .3s;
  opacity: 0;
}

.but-download .badg:hover::after,
.but-download .badg:hover::before {
  opacity: 1;
}

请本JavaScript代码放置子比主题设置->全局&功能->自定义javascript代码中即可

/* 
 *作者：消音
 *请本JavaScript代码放置子比主题设置->全局&功能->自定义javascript代码中即可
 */
if(document.querySelectorAll(".but-download .badg")!=undefined){
     const reg = /[a-zA-z0-9]/ig;
    const copy1 = document.querySelectorAll(".but-download .badg");
    for (let i = 0; i < copy1.length; i++) {
      copy1[i].index = i;
      copy1[i].setAttribute("data-before", "点击复制");
      copy1[i].addEventListener("click", copyOperation);
      copy1[i].addEventListener("mouseout", copyOk);
    }

    function copyOperation() {
      var oInput = document.createElement("input");
      let text = this.innerText;
      text = text.match(reg).join("");
      oInput.value = text;
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.setAttribute("data-before", "已复制");
    }
    function copyOk() {
      setTimeout(() => {
        this.setAttribute("data-before", "点击复制");
      }, 300)
    }
}

在主题设置—》自定义CSS样式，添加下面的CSS代码：

/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://www.uxr.cc/img/pinglu.png) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}

前言

用户评论的时候老是乱评论没有文采，分享一段代码随机语录，这样让你们博客评论都非常有内涵

<script>
$.getJSON("https://www.uxr.cc/api/yan/index.php?encode=json",function(data){
$("#comment").text(data.text);
});
$(function(){
$("#comment").click(function() {
$(this).select();
})
})
</script>

教程

目前适配好的是社长在用的子比主题，如果你也是子比主题的话，直接将上面的代码放置到：

后台–>子比主题设置—>自定义代码—>自定义底部 HTML 代码：,添加以上代码：

如果你有语录api接口，你可以给代码中的https://www.uxr.cc/api/yan/index.php?encode=json替换成你的api

如果想对接别人的的其他语录接口，也是一样的，直接放进接口地址里面接口，需要注意的就是，需要 json 输入格式

当然需要源码一言源码可以看看以下内容：

【PHP】简单的一言API源码

3个月前

1746