zoukankan      html  css  js  c++  java
  • 博客园皮肤Cnblogs-Theme-SimpleMemory

    1.先上图看效果

     部署文档地址:https://github.com/wangyang0210/Cnblogs-Theme-BNDong

    原作者github地址:https://github.com/BNDong/Cnblogs-Theme-SimpleMemory.git

    页面定制CSS代码 ---> /css/base.min.css(禁用模板默认CSS)

    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/reasonzzy/base.min.css"/>

    博客侧边栏公告 ---> /html/sidebar.html(需要开启JS权限)

    <!-- menu html -->
    <div class="container">
        <div class="menu-wrap optiscroll" id="menuWrap" style="display:none">
            <nav class="menu">
    
                <!-- 个人简介 -->
                <div class="introduce-box">
                    <div class="introduce-head">
                        <div class="introduce-via" id="menuBlogAvatar"></div>
                    </div>
                    <div id="introduce"></div>
                </div>
    
                <!-- 导航 -->
                <div class="nav-title"></div>
                <div class="icon-list">
                    <ul>
                        <li><a href="https://www.cnblogs.com/reasonzzy/" target="_self">首页</a></li>
                        <li><a href="https://msg.cnblogs.com/send/reasonzzy" target="_blank">联系</a></li>
                        <li><a href="https://www.cnblogs.com/reasonzzy/rss" target="_blank">订阅</a></li>
                        <li><a href="https://i.cnblogs.com/" target="_blank">管理</a></li>
                        <li><a href="https://i.cnblogs.com/EditPosts.aspx?opt=1" target="_blank">添加随笔</a></li>
                        <li><a href="https://github.com/Reason0701" target="_blank">GitHub</a></li>
                        <li><a href="https://www.cnblogs.com/" target="_blank">CNBlogs</a></li>
                    </ul>
                </div>
                <!-- 访客来源统计 -->
                <div class="m-list-title" style="display: block;"><span>访客来源</span></div>
                <a href='https://clustrmaps.com/site/1ahcn' title='Visit tracker'>
                    <img src='//clustrmaps.com/map_v2.png?cl=ffffff&w=268&t=t&d=ymyD9S6Gxrh7BknYYgxQi8uzm-aKKsJUuRZX0vBVlZQ&co=000000' />
                </a>
    
                <!-- 最新随笔 -->
                <div class="m-list-title"><span>最新随笔</span></div>
                <div class="m-icon-list" id="sb-sidebarRecentposts"></div>
    
                <!-- 我的标签 -->
                <div class="m-list-title"><span>我的标签</span></div>
                <div class="m-icon-list" id="sb-toptags"></div>
    
                <!-- 随笔分类 -->
                <div class="m-list-title"><span>随笔分类</span></div>
                <div class="m-icon-list" id="sb-classify"></div>
    
                <!-- 随笔档案 -->
                <div class="m-list-title"><span>随笔档案</span></div>
                <div class="m-icon-list" id="sb-record"></div>
    
                <!-- 阅读排行 -->
                <div class="m-list-title"><span>阅读排行</span></div>
                <div class="m-icon-list" id="sb-topview"></div>
    
                <!-- 推荐排行 -->
                <div class="m-list-title"><span>推荐排行</span></div>
                <div class="m-icon-list" id="sb-topDiggPosts"></div>
    
                <!-- 自定义列表 -->
                <span id="menuCustomList"></span>
            </nav>
            <button class="close-button" id="close-button">Close Menu</button>
            <div class="morph-shape" id="morph-shape" data-morph-open="M-7.312,0H15c0,0,66,113.339,66,399.5C81,664.006,15,800,15,800H-7.312V0z;M-7.312,0H100c0,0,0,113.839,0,400c0,264.506,0,400,0,400H-7.312V0z">
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800" preserveAspectRatio="none">
                    <path d="M-7.312,0H0c0,0,0,113.839,0,400c0,264.506,0,400,0,400h-7.312V0z"/>
                </svg>
            </div>
        </div>
        <button class="menu-button" id="open-button">MENU</button>
        <div class="content-wrap" id="content-wrap"></div><!-- /content-wrap -->
    </div>
    <!-- menu html end -->
    
    <!-- banner html -->
    <div class="main-header">
        <canvas id="notHomeTopCanvas" style=" position: absolute;margin: auto; 100%;height: 100%;top: 0;bottom: 0;left: 0;right: 0;"></canvas>
        <div class="vertical">
            <div class="main-header-content inner">
                <link href="https://fonts.googleapis.com/css?family=Playball" rel="stylesheet">
                <h1 class="page-title" style="font-family: 'Playball', cursive;" id="homeTopTitle"></h1>
                <h2 class="page-description" id="hitokoto"></h2>
                <h3 class="page-author" id="hitokotoAuthor"></h3>
            </div>
        </div>
        <a class="scroll-down" href="javascript:void(0);" data-offset="-45">
            <span class="hidden">Scroll Down</span>
            <i class="scroll-down-icon iconfont icon-fanhui"></i>
        </a>
    </div>
    <!-- banner html end -->
    
    <!-- global var -->
    <script type="text/javascript">
        //博客全局配置
        window.cnblogsConfig = {
            // ---- GitHub文件源配置 ----
            GhUserName: 'wangyang0210', // GitHub用户名(不是昵称),注意大小写
            GhRepositories: 'Cnblogs-Theme-BNDong', // GitHub主题仓库名称
            GhVersions : '7230170d646de3ac13f94af7a4f27a51d1d246cb', // GitHub发布版本或提交哈希值,根据版本加载代码,我有时候会提交代码进行调试,大家最好加载我仓库代码此处的版本 https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/commits/master
            // ---- 基础信息配置 ----custom
            blogUser      : "。思索", // 博主名称,文章后缀和主页图片上都会使用此名称
            blogAvatar    : "https://blog-static.cnblogs.com/files/reasonzzy/qiyuan_avatar.gif", // 用户头像URL
            blogStartDate : "2019-5-2", // 入园时间,年-月-日,入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
            // ---- 菜单配置 ----
            menuCustomList: { // 自定义菜单数据,显示在正常数据下方
                "title1": { // 标题
                    "data": [ // 列表数据 ['列表', '链接']
                        ['我的博客1', 'https://www.cnblogs.com/reasonzzy'],
                        ['我的博客2', 'https://www.cnblogs.com/reasonzzy'],
                        ['我的博客3', 'https://www.cnblogs.com/reasonzzy'],
                        ['我的博客4', 'https://www.cnblogs.com/reasonzzy'],
                        ['我的博客5', 'https://www.cnblogs.com/reasonzzy'],
                    ],
                    "icon": "icon-brush_fill" // 配置图标,参考文档:本博客字体图标库及其更换方法
                },
                "title2": { // 标题
                    "data": [ // 列表数据 ['列表', '链接']
                        ['我的博客6', 'https://www.cnblogs.com/reasonzzy'],
                        ['我的博客7', 'https://www.cnblogs.com/reasonzzy'],
                        ['我的博客8', 'https://www.cnblogs.com/reasonzzy'],
                        ['我的博客9', 'https://www.cnblogs.com/reasonzzy'],
                        ['我的博客10', 'https://www.cnblogs.com/reasonzzy'],
                    ],
                    "icon": "icon-brush_fill" // 配置图标,参考文档:本博客字体图标库及其更换方法
                },
            },
            // ---- 网站配置 ----
            webpageTitleOnblur        : "(◍´꒳`◍) Hi, MyFriend", // 当前页失去焦点,页面title显示文字
            webpageTitleOnblurTimeOut : 500, // 当前页失去焦点,页面title变化,延时时间,单位毫秒
            webpageTitleFocus         : "(*´∇`*) 欢迎回来!", // 当前页获取焦点,页面title显示文字,显示后延时恢复原title
            webpageTitleFocusTimeOut  : 1000, // 当前页获取焦点,页面title变化,延时时间,单位毫秒
            webpageIcon : "https://blog-static.cnblogs.com/files/reasonzzy/logo.gif", // 网站图标
            // ---- 进度条配置 ----
            progressBar: {
                id      : 'top-progress-bar',
                color   : '#77b6ff',
                height  : '2px',
                duration: 0.2
            },
            // ---- Loading配置 ----
            loading: {
                rebound: {
                    tension: 16,
                    friction: 5
                },
                spinner: {
                    id: 'spinner',
                    radius: 90,
                    sides: 3,
                    depth: 4,
                    colors: {
                        background: '#f0f0f0',
                        stroke: '#272633',
                        base: null,
                        child: '#272633'
                    },
                    alwaysForward: true, // When false the spring will reverse normally.
                    restAt: 0.5,         // A number from 0.1 to 0.9 || null for full rotation
                    renderBase: false
                }
            },
            // ---- 页面动效配置 ----
            homeTopAnimationRendered: true, // true || false ,是否渲染主页头图动效
            homeTopAnimation: { // 主页头图动效设置
                radius: 15,
                density: 0.2,
                color: 'rgba(255,255,255, .2)', // 颜色设置,“random” 为随机颜色
                clearOffset: 0.3
            },
            essayTopAnimationRendered: true, // true || false ,是否渲染随笔页头图动效
            essayTopAnimation: { // 随笔页头图动效设置
                triW : 14,
                triH : 20,
                neighbours : ["side", "top", "bottom"],
                speedTrailAppear : .1,
                speedTrailDisappear : .1,
                speedTriOpen : 1,
                trailMaxLength : 30,
                trailIntervalCreation : 100,
                delayBeforeDisappear : 2,
                colors: [
                    '#96EDA6', '#5BC6A9',
                    '#38668C', '#374D84',
                    '#BED5CB', '#62ADC6',
                    '#8EE5DE', '#304E7B'
                ]
            },
            bgAnimationRendered: true, // true || false ,是否渲染背景动效
            backgroundAnimation : { // 背景动效设置
                colorSaturation: "60%",
                colorBrightness: "50%",
                colorAlpha: 0.5,
                colorCycleSpeed: 5,
                verticalPosition: "random",
                horizontalSpeed: 200,
                ribbonCount: 3,
                strokeSize: 0,
                parallaxAmount: -0.2,
                animateSections: true
            },
            // ---- 主页配置 ----
            homeTopImg    : [ // 主页图片Url,推荐尺寸>= 1920*1080,支持多张,每次刷新随机设置一张
                "http://cache.wangyangyang.vip/hello.jpg",
                "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-165678.jpg",
                "http://cache.wangyangyang.vip/wallhaven-694674.jpg"
            ],
            homeBannerText: "", // 主页头图上的标语,设置此选项会固定显示文字,默认为空,自动获取一句。
            // ---- 随笔页配置 ----
            essayTopImg: [ // 随笔页图片Url,支持多张,每次刷新随机设置一张
                "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-569548.png",
                "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-651235.png"
            ],
            essayCodeHighlightingType: 'cnblogs', // 代码主题插件类型:cnblogs || highlightjs || prettify
            essayCodeHighlighting: 'cnblogs', // 代码高亮主题,具体主题参考文档
            essaySuffix:{ // 随笔后缀处配置
                aboutHtml    : '', // 关于博主,不配置使用默认
                copyrightHtml: '', // 版权声明,不配置使用默认
                supportHtml  : ''  // 声援博主,不配置使用默认
            },
            // ---- 页脚配置 ----
            bottomBlogroll: [ // 友情链接,[[链接名,链接]....]
                ["程序人生", 'http://anrs.net/'],
                ["申请坑位", 'https://msg.cnblogs.com/send/reasonzzy'],
                ["申请坑位", 'https://msg.cnblogs.com/send/reasonzzy'],
                ["申请坑位", 'https://msg.cnblogs.com/send/reasonzzy'],
                ["申请坑位", 'https://msg.cnblogs.com/send/reasonzzy'],
            ],
            bottomText: {  // 页脚标语
                icon: "❤️",
                left: "学无止境",
                right: "谦卑而行"
            },
            // ---- 控制台输出 ----
            consoleList: [
            ['wangyang0210 CNBlogs', 'https://www.cnblogs.com/reasonzzy'],
            ['wangyang0210 GitHub', 'https://github.com/Reason0701'],
            ['wangyang0210 Email', '1434557977@qq.com']
            ],
        };
        // start cache
        $.ajaxSetup({cache: true});
        // load loadingJs
        $.getScript(getJsDelivrUrl('loading.js'), function () {
            // Loading start
            pageLoading.initRebound();
            pageLoading.initSpinner();
            pageLoading.spinner.init(pageLoading.spring, true);
            $.getScript(getJsDelivrUrl('jquery.mCustomScrollbar.min.js'), function () {
                $.getScript(getJsDelivrUrl('require.min.js'), function () {
                    $.getScript(getJsDelivrUrl('config.js'), function () {
                        var staticResource = [
                            'optiscroll', 'ToProgress', 'rotate',
                            'snapSvg', 'classie', 'main4', 'tools'];
                        require(staticResource, function() {
                            require(['base'], function() {
                                (new Base).init();
                            });
                        });
                    });
                });
            });
        });
        // get file url
        function getJsDelivrUrl(file, directory) {
            file = setFileNameMin(file, directory);
            return 'https://cdn.jsdelivr.net/gh/'+(window.cnblogsConfig.GhUserName)+'/'+(window.cnblogsConfig.GhRepositories)+'@'+(window.cnblogsConfig.GhVersions)+'/' + (file ? file : '');
        }
        // optimization file name
        function setFileNameMin(file, directory) {
            if (typeof file == 'undefined') return '';
            var suffix  = null,fileArr = file.split('.');
            if (fileArr.length > 0 && $.inArray(fileArr[(fileArr.length -1)], ['js', 'css']) != -1)
                {suffix    = fileArr.pop(); directory = suffix;}
            file.search('.min') == -1 && fileArr.push('min');
            suffix != null && fileArr.push(suffix);
            return (typeof directory !== 'undefined' ? (directory + '/' + fileArr.join('.')) : (fileArr.join('.')));
        }
    </script>
    <!-- global var end -->
    View Code

    页首Html代码 ---> /html/pageHeading.html

    <!-- Loading 底层遮罩 -->
    <div id='loading'></div>

    页脚Html代码 ---> /html/pageFooter.html

    <!-- 滚动进度 -->
    <div id="bottomProgressBar"></div>
    
    <!-- 音乐播放器 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
    <div id="aplayer" class="aplayer" data-id="316722029" data-lrctype="0" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true"></div>
    <script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
    
    <!-- 右下角菜单 -->
    <div id="rightMenu"></div>

    主要修改的是js代码中你的首页跟github地址,改成你自己的。

  • 相关阅读:
    lecture 11.4
    lecture 10.30
    boolean functions and beyon
    lecture10.21
    golang hex to string
    golang中 将string转化为json
    ubuntu16报错: add-apt-repository command not found
    ubuntu16的防火墙关闭
    ubuntu 16 解决错误 manpath: can't set the locale; make sure $LC_* and $LANG are correct
    go get 安装时报 (https fetch: Get https://golang.org/x/crypto/acme/autocert?go-get=1: dial tcp 220.255.2.153:443: i/o timeout)
  • 原文地址:https://www.cnblogs.com/reasonzzy/p/11507519.html
Copyright © 2011-2022 走看看