首页 > 技术文章 > 博客园修改首页title、description、favicon的代码公开

f6056 2019-07-11 18:35 原文

博客园的默认模板虽然受众接受率还算较高,但是对于有强迫症的同学来说,其中像title、description以及favicon显示仍然比较呆板。有没有自定义的方式呢?答案当然是肯定的。下面是我自己捣腾的博客园首页三个标签自定义的代码,喜欢的同学赶紧拿走吧。

( ᖛ ̫ ᖛ )ʃ)上代码:

window.addEventListener('load', function () {

    /* 为网页添加favicon图标
     *  lLink为创建的link标签,vRel为rel属性值,vHref为href属性值。
     */
    var lLink = document.createElement('link');
    var vRel = "shortcut icon";
    var vHref = "https://statichome.weimob.com/favicon.ico";
    var vType = "image/x-icon";
    lLink.setAttribute('rel', vRel);
    lLink.setAttribute('href', vHref);
    lLink.setAttribute('type', vType);
    document.head.appendChild(lLink);

    /* 判断:如果页面URL是https://www.cnblogs.com/f6056/或https://www.cnblogs.com/f6056,那么说明该页面博客首页,执行下面的代码。blogPageUr是获取的当前页面URL。
     *根据当日按页面URL的字符串长度来作为判断的基准
     */
    var blogPageUrl = window.location.href;

    var a = 'https://www.cnblogs.com/f6056/';
    console.log(a.length)
    var l = blogPageUrl.length;

    if (l <= 30) {
        /* 修改网页的标题 */
        document.title = '喜好捣腾代码的业余前端爱好者_弹幕猴子';
        /*  添加首页description元数据meta标签
         *创建一个meta元素,sName为该meta元素的name值, sDescription为该meta元素的description值。  
         */
        var dMeta = document.createElement('meta');
        var sName = 'description';
        var sDescription = "( ᖛ ̫ ᖛ )ʃ) 不怕慢,就怕站!弹幕猴子开通博客园的博客主要为JavaScript、CSS、HTML、网络营销相关内容。我的CSDN博客首页https://blog.csdn.net/weimob258616 ";
        dMeta.setAttribute('name', sName);
        dMeta.setAttribute('content', sDescription);
        document.head.appendChild(dMeta);
    }

}, false);