博客园皮肤Cnblogs-Theme-SimpleMemory

1.先上图看效果

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

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

需要修改的代码

<!-- 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;width: 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://pic.cnblogs.com/avatar/1334215/20180504110551.png", // 用户头像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://files.cnblogs.com/files/wangyang0210/blog_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‘, ‘[email protected]‘]
        ],
    };
    // 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 -->

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

原文地址:https://www.cnblogs.com/reasonzzy/p/11507519.html

时间: 2024-11-20 15:13:52

博客园皮肤Cnblogs-Theme-SimpleMemory的相关文章

粗制博客园皮肤 SimoCoding CSS 样式 —— 轻 Flat 风格

1 #nav_next_page { 2 line-height: 40px; 3 } 4 #nav_next_page a { 5 -webkit-border-radius: 3px; 6 -moz-border-radius: 3px; 7 border-radius: 3px; 8 background-color: #515151; 9 height: 40px; 10 line-height: 40px; 11 color: #fff; 12 display: inline-bloc

自定义博客园皮肤:暗色流体响应式布局

博客园的皮肤模板虽然有100多套,但我需要的作品却没几套,从布局上看,大多是固定布局,有的使用表格布局,有的将侧边栏在HTML页面的代码顺序放在主内容的前面.这些布局方式不利于页面缩放和不同屏幕尺寸与分辨率的设备浏览,尤其是在当今网页浏览设备屏幕尺寸与分辨率多样化的时代,流体与响应式布局才是最佳的选择.从配色上看,博客园有3款还不错的暗色皮肤,但不符合我布局的要求. 我想要自己的博客皮肤满足以下要求: 模版选择:不能使用表格布局,侧边栏在HTML页面的代码顺序放在主内容 的后面,页面结构和样式简

博客园皮肤美化

以下是全站css代码: 1 .topicListFooter{text-align: right;margin-right: 10px;margin-top: 10px} 2 *{margin: 0;padding: 0} 3 html{height: 100%} 4 body{ background: url(https://i.screenshot.net/p/59q7gu4?3e4d445686cb8ab334d4a44c649df999); 5 -webkit-background-si

博客园皮肤3

预览 css 禁用模板默认CSS /******************** 全局样式 ********************/ * { margin: 0; padding: 0; border: none; background-repeat: no-repeat; font-size: inherit; line-height: inherit; } *, ::before, ::after { box-sizing: inherit; } h1, h2, h3, h4, h5, h6

博客园 装饰

https://blog.csdn.net/wodeai1235/article/details/77825028 https://www.cnblogs.com/imsoft/p/4982400.html (标签分类 很赞) https://www.jianshu.com/p/23b2bfc9a90d [详细图解]一步一步教你自定义博客园(cnblog)界面 https://www.cnblogs.com/yelaiju/p/3185339.html 博客园模板 样式优化 http://blo

博客园美化资源网站链接

详谈如何定制自己的博客园皮肤(禁用css模板级别) 博客美化汇总 NSDog 博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了) 博客园美化教程第二篇----极致个性化你的专属博客(为博客添加背景音乐插件,调整页面布局等) 原文地址:https://www.cnblogs.com/CH520/p/9813646.html

博客园样式目录加代码美化

页面定制 CSS 代码 使用博客园自带的SimpleMemory主题 h1,h2,h3,h4,h5,h6 {font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;} h1 {font-size: 1.8em;} h2 {font-size: 1.5em;} h3 {font-size: 1.3em;} #header h2 { font-w

博客园客户端UAP开发随笔 -- App UI设计的三大纪律八项注意

前言 每一个页面都是这个App的门面,尤其是主页面,看上去干净整洁清爽宜人容易操作,那么你的App就成功了一半.这也反映出了你这个开发团队的基本审美素质和设计理念.如果你不是一个团队,而是一个个人开发者,建议你好好读读以下心得体会,相信会帮助你做出好看而实用的App.用一堆拥有丑陋UI的App充斥Window Store,不是我们高大上的程序员所为,被其他手机开发平台的开发者们耻笑. 三大纪律: 1)不乱用颜色.一个页面内不要超过3种颜色 2)不乱用大图片当背景.你是想让用户看你的背景图片呢,还

如何定制自己博客园的皮肤

1.进入自己博客园网站->管理->设置 皮肤随便选一个,我选的是coffer这款 2.自定义侧边栏代码: <div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="https://files.cnblogs.com/files/jingmoxukong/mous