halo-theme-dream/src/js/settings.js

梦之城，童话梦境，动漫类型博客主题。

(function () {
  if (!window.initDreamSettings) {
    const styleContent = `
.dream-option {
    display: block;
    position: fixed;
    width: 50px;
    height: 50px;
    z-index: 1000;
    right: 30px;
    border-radius: 50%;
    background: #50bfff;
    padding: 10px;
}
.dream-option svg {
    width: 32px;
    height: 32px;
    stroke-width: 10;
    animation: zy 2.5s .15s linear infinite;
    -moz-animation: zy 2.5s .15s linear infinite; /* Firefox */
    -webkit-animation: zy 2.5s .15s linear infinite; /* Safari and Chrome */
    -o-animation: zy 2.5s .15s linear infinite; /* Opera */
}
.dream-option path {
    stroke-width: 30;
    stroke: #fff;
    fill: #fff;
}
.dream-option:after {
    content: '';
    border-radius: 50%;
    transition: all 0.4s;
}
.dream-option:hover:after {
    text-align: center;
    line-height: 1em;
    white-space: pre;
    display: grid;
    align-items: center;
    font-size: 12px;
    color: #FFF;
    font-weight: 600;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgb(29 98 156 / 30%);
}
.dream-option:hover .option-cover {
    opacity: 1;
    right: 0;
}
.option-cover {
    position: absolute;
    opacity: 0;
    width: 360px;
    max-width: 80vw;
    right: -400px;
    bottom: 60px;
    border-radius: 8px;
    transition: all .5s;
}
.official-account {
    bottom: 120px;
}
.official-account:hover:after {
    content: '微信\\A公众号';
}
.customer {
    bottom: 60px;
}
.customer:hover:after {
    content: 'DREAM\\A交流';
}
@-webkit-keyframes zy{ 
  10% { 
    transform: rotate(15deg); 
  } 
  20% { 
    transform: rotate(-10deg); 
  } 
  30% { 
    transform: rotate(5deg); 
  } 
  40% { 
    transform: rotate(-5deg); 
  } 
  50%,100% { 
    transform: rotate(0deg); 
  } 
}`
    const style = document.createElement('style')
    style.appendChild(document.createTextNode(styleContent))
    document.getElementsByTagName('head')[0].appendChild(style)
    window.initDreamSettings = true
  }

  const officialAccountSvg = '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M947 480.6l-62.9-62.9c-4.2-4.2-9.8-6.5-15.7-6.5-19.8 0-29.7 23.9-15.7 37.9l47.2 47.2c8.7 8.7 8.7 22.7 0 31.4L797.4 630.2v145c0 12.3-9.9 22.2-22.2 22.2h-145L527.7 899.9c-8.7 8.7-22.7 8.7-31.4 0l-89.5-89.5-13-13h-145c-12.3 0-22.2-9.9-22.2-22.2v-145L124.1 527.7c-8.7-8.7-8.7-22.7 0-31.4l102.5-102.5v-145c0-12.3 9.9-22.2 22.2-22.2h145l102.5-102.5c8.7-8.7 22.7-8.7 31.4 0l89.5 89.5 13 13h145c12.3 0 22.2 9.9 22.2 22.2V277c0 12.3 9.9 22.2 22.2 22.2 12.3 0 22.2-9.9 22.2-22.2v-50.4c0-24.5-19.9-44.4-44.4-44.4H648.6L543.4 77c-17.3-17.3-45.5-17.3-62.8 0L375.4 182.2H226.6c-24.5 0-44.4 19.9-44.4 44.4v148.8L77 480.6c-17.3 17.3-17.3 45.5 0 62.8l105.2 105.2v148.8c0 24.5 19.9 44.4 44.4 44.4h148.8L480.6 947c17.3 17.3 45.5 17.3 62.8 0l105.2-105.2h148.8c24.5 0 44.4-19.9 44.4-44.4V648.6L947 543.4c17.3-17.3 17.3-45.5 0-62.8z m-276.6-95.3L464.5 591.2 353.6 480.3c-8.7-8.7-23-8.7-31.7 0s-8.7 23 0 31.7l126.7 126.7c4.4 4.4 10.1 6.5 15.8 6.5 5.7 0 11.5-2.2 15.8-6.5L702.1 417c8.7-8.7 8.7-23 0-31.7s-23-8.7-31.7 0z" fill="#000000" p-id="3321"></path></svg>'
  const customerSvg = '<svg viewBox="0 0 1202 1024" xmlns="http://www.w3.org/2000/svg"><path d="M912.695652 925.829565a512.356174 512.356174 0 0 0 130.671305-161.613913 22.26087 22.26087 0 1 0-39.624348-20.390956 465.964522 465.964522 0 0 1-119.318261 147.589565 22.26087 22.26087 0 1 0 28.226782 34.415304z m186.189913-417.836522a507.191652 507.191652 0 0 0-34.370782-162.014608c-2.092522-5.431652 4.763826-20.925217 32.500869-69.899131 6.455652-11.442087 11.130435-19.945739 15.449044-28.493913 26.267826-51.600696 32.411826-89.666783 7.568695-121.09913-25.86713-32.678957-64.467478-33.391304-118.249739-15.582609a605.94087 605.94087 0 0 0-28.493913 10.462609c-40.559304 15.716174-55.919304 19.990261-55.385043 20.390956A507.325217 507.325217 0 0 0 590.046609 22.26087a507.102609 507.102609 0 0 0-303.371131 100.173913c-4.585739 3.383652-19.856696 1.691826-63.532521-8.459131-10.640696-2.448696-17.764174-4.006957-25.110261-5.520695-49.374609-9.794783-83.344696-7.746783-109.657044 14.959304-32.233739 27.870609-27.202783 65.625043-0.178087 125.551304 2.226087 5.030957 4.630261 10.061913 7.791305 16.829218 21.370435 45.32313 27.158261 61.751652 24.798608 67.361391a507.191652 507.191652 0 0 0-39.846956 181.025391 22.26087 22.26087 0 0 0 44.521739 1.513739c1.914435-57.433043 14.336-113.218783 36.329739-165.175652 10.24-24.175304 5.030957-39.045565-25.510957-103.735652-3.116522-6.544696-5.342609-11.397565-7.479652-16.11687-19.144348-42.340174-22.038261-64.289391-11.308521-73.549913 12.688696-10.952348 34.994087-12.288 71.858087-4.986434 6.811826 1.335652 13.534609 2.849391 23.685565 5.209043 63.22087 14.692174 79.11513 16.473043 100.173913 0.801391A462.58087 462.58087 0 0 1 590.046609 66.782609c111.037217 0 215.974957 39.045565 299.186087 109.078261 20.48 17.229913 26.802087 15.449043 100.129391-13.000348 10.729739-4.140522 18.743652-7.123478 26.490435-9.705739 37.576348-12.466087 58.946783-12.02087 69.231304 0.934956 10.373565 13.133913 6.678261 36.062609-12.332522 73.371826-3.917913 7.791304-8.325565 15.805217-14.469565 26.713044-40.247652 71.056696-45.278609 82.365217-35.216696 108.054261 18.342957 46.881391 28.983652 96.612174 31.343305 147.812173a22.26087 22.26087 0 0 0 44.477217-2.048z" fill="#ABEBEB"></path><path d="M333.913043 400.695652a44.521739 44.521739 0 1 0 89.043479 0 44.521739 44.521739 0 1 0-89.043479 0Z" fill="#ABEBEB"></path><path d="M827.258435 365.879652a11.130435 11.130435 0 1 0-10.818783-19.411478l-131.561739 73.282783 133.476174 44.521739a11.130435 11.130435 0 0 0 7.034435-21.147826l-85.570783-28.493913 87.440696-48.751305zM644.986435 736.077913c37.62087 0 62.998261-23.106783 80.406261-59.481043 10.150957-21.23687 0.623304-42.518261-24.976696-62.152348a11.130435 11.130435 0 0 0-13.534609 17.719652c18.209391 13.935304 23.151304 24.932174 18.432 34.816-14.113391 29.517913-33.124174 46.83687-60.326956 46.836869-21.682087 0-47.014957-16.072348-75.50887-49.285565l-9.171478-10.685217-8.281044 11.353043c-23.952696 32.857043-47.059478 48.617739-69.097739 48.617739-30.853565 0-55.652174-18.432-69.142261-46.836869-5.565217-11.575652 1.113043-22.038261 25.644522-33.613913a11.130435 11.130435 0 0 0-9.527652-20.123826c-34.281739 16.161391-48.217043 38.066087-36.240696 63.309913 16.918261 35.617391 49.107478 59.525565 89.266087 59.525565 27.38087 0 53.559652-15.983304 78.758957-46.881391 28.93913 30.942609 56.542609 46.881391 83.300174 46.881391zM845.913043 1001.73913a66.782609 66.782609 0 1 1 0-133.565217 66.782609 66.782609 0 0 1 0 133.565217z m0-44.521739a22.26087 22.26087 0 1 0 0-44.521739 22.26087 22.26087 0 0 0 0 44.521739zM137.216 540.493913l52.090435 170.295652-69.632 21.281392c-18.209391-10.50713-33.168696-32.144696-43.898435-67.450435-11.53113-37.932522-12.243478-72.43687-2.671304-104.537044l64.111304-19.589565z m-13.04487-42.607304l-64.066782 19.589565a44.521739 44.521739 0 0 0-29.606957 29.829565c-12.198957 40.781913-11.308522 84.190609 2.671305 130.270609 13.801739 45.32313 35.216696 76.354783 64.333913 93.050435a44.521739 44.521739 0 0 0 35.172174 4.006956l69.587478-21.281391a44.521739 44.521739 0 0 0 29.562435-55.607652l-52.090435-170.295653a44.521739 44.521739 0 0 0-55.563131-29.562434zM1045.504 541.606957l-55.02887 169.360695 69.186783 22.483478c18.387478-10.150957 33.747478-31.565913 45.056-66.649043 12.198957-37.709913 13.534609-72.214261 4.452174-104.492522l-63.666087-20.702608z m13.757217-42.340174l63.666087 20.702608a44.521739 44.521739 0 0 1 29.161739 30.319305c11.486609 40.96 9.794783 84.413217-4.986434 130.181565-14.558609 45.100522-36.507826 75.731478-65.892174 91.981913a44.521739 44.521739 0 0 1-35.305739 3.33913l-69.186783-22.483478a44.521739 44.521739 0 0 1-28.582956-56.097391l55.028869-169.360696a44.521739 44.521739 0 0 1 56.097391-28.582956z" fill="#ABEBEB"></path><path d="M173.81287 188.14887l62.864695 9.349565a22.26087 22.26087 0 0 1 14.959305 34.726956l-9.750261 13.979826a22.26087 22.26087 0 0 1-37.843479-2.226087l-30.23026-55.83026zM1018.212174 199.056696l-59.570087 22.216347a22.26087 22.26087 0 0 0-7.390609 37.131131l12.466087 11.575652a22.26087 22.26087 0 0 0 36.507826-9.972869l17.942261-60.950261z" fill="#ABEBEB"></path></svg>'
  const officialAccountText = `<a class="dream-option official-account" title="微信公众号" target="_blank">${officialAccountSvg}<img class="option-cover" src="/themes/dream/source/img/official-account.png" alt="微信公众号"><a/>`
  const customerText = `<a class="dream-option customer" title="Dream主题交流群" target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=X7p7Bs21cgtkQ0dRfzmBsuWqNNQc10hn&jump_from=webapi">${customerSvg}<a/>`
  function parse2dom(str){
    const div = document.createElement('div')
    div.innerHTML = str
    return div.childNodes[0]
  }
  if (document.getElementsByClassName('dream-option').length === 0) {
    const contentElem = document.getElementsByClassName('content')[0]
    let tabsElems = contentElem.getElementsByClassName('ant-tabs-content')
    for(let elem of tabsElems) {
      elem.classList.add('dream-bg')
    }
    contentElem.appendChild(parse2dom(officialAccountText))
    contentElem.appendChild(parse2dom(customerText))
  }
})()