• Silence主题美化-部署


    部署文档

    操作之前请先确保您的博客园账号已正常登陆并且已经成功申请开通了 JS 权限。

    主题下载

    点击 下载 本主题最新版本源码包,下载完毕后,使用解压工具解压并进入解压后目录,其结构大致如下所示:

    │  .babelrc                                                   
    │  .gitignore                                                 
    │  LICENSE                                                    
    │  package-lock.json                                          
    │  package.json                                               
    │  README.md                                                  
    │                                                             
    ├─dist                           // 编译发布目录                                      
    │  │  silence.min.js                                          
    │  │                                                          
    │  └─themes                                                   
    │          dark.min.css                                       
    │          default.min.css                                    
    │          goddess.min.css                                    
    │                                                             
    ├─docs                           // 文档相关目录                                       
    │      change.md                                              
    │      logo.png                                               
    │      theme_dark.png                                         
    │      theme_default.png                                      
    │      theme_goddess.png                                      
    └─src                            // 源码存放目录                               
        │  silence.js                                             
        │  silence.less                                           
        │                                                         
        ├─images                                                  
        │      contents.png                                         
        │      follow.png                                   
        │      gotop.png                                            
        │                                                         
        └─themes                                                  
                dark.less                                         
                default.less                                      
                goddess.less                                      
                                                                  
    

    然后打开博客园后台 管理 页面,进行后续操作。

    使用样式

    打开./dist/themes文件夹,选择一款自己心仪的主题风格代码文件。

    default.min.css         // 简约 · 蓝
    dark.min.css            // 暗黑 · 绿
    goddess.min.css         // 女神 · 粉
    

    使用 Notepad++ 等文本编辑工具打开您选择的主题样式文件,全选所有代码,然后复制。

    进入『设置』界面,将复制的代码粘贴到「页面定制CSS代码」文本域中。

    点击「保存」按钮,保存上述操作。

    上传脚本

    打开./dist文件夹,获取主题的 JS 脚本文件silence.min.js

    进入『文件』界面,将该文件上传到自己的博客中。上传完成后,点击文件名便可在浏览器地址栏中获取上传文件的外链,类似如下所示:

    https://blog-static.cnblogs.com/files/esofar/silence.min.js
    

    然后使用<script>标签将外链包裹,生成一个网页脚本引用,类似如下所示:

    <script src="https://blog-static.cnblogs.com/files/esofar/silence.min.js"></script>
    

    注意:

    我在配置这个网页脚本引用的时候,按照上述方法配置,js脚本无法生效,需要将silence.min.js文件,重新命名为silence.js上传,并修改引用js脚本才可以,修改后的js脚本为:

    <script src="https://blog-static.cnblogs.com/files/esofar/silence.js"></script>
    

    进入『设置』界面,将上面生成的网页脚本引用复制到「博客侧边栏公告」文本域中。

    说明:主题脚本文件silence.min.js非必须上传到博客园,也可上传到七牛云等对象存储空间,但必须开启 HTTPS 访问。

    使用脚本

    为了提高园友的阅读体验,主题在博客园原有功能基础上追加了一些辅助阅读、以及人性化的功能模块。其中部分模块做了参数配置,用户可根据自己意愿选择是否启用。若启用,再根据自己的信息或写作习惯设置相关参数。

    进入『设置』界面,将如下脚本代码引用 追加 到「博客侧边栏公告」文本域中,其中配置参数根据下表自行修改。

    <script type="text/javascript">
        $.silence({
            avatar: 'http://images.cnblogs.com/cnblogs_com/esofar/972540/o_avatar.jpg',
            favicon: 'https://files.cnblogs.com/files/esofar/favicon.ico',
            navigation: [
                {
                    title: '标签',
                    url: 'https://www.cnblogs.com/esofar/tag/'
                },
                {
                    title: '归档',
                    url: 'https://www.cnblogs.com/esofar/p/'
                },
                {
                    title: '导航',
                    chilren: [
                        {
                            title: '谷歌',
                            url: 'https://www.google.com/',
                        },
                        {
                            title: '百度',
                            url: 'https://www.baidu.com/',
                        },
                    ]
                },
            ],
            catalog: {
                enable: true,
                move: true,
                index: true,
                level1: 'h2',
                level2: 'h3',
                level3: 'h4',
            },
            signature: {
                enable: true,
                license: '署名-非商业性使用-相同方式共享 4.0 国际',
                link: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
                remark: null
            },
            sponsor: {
                enable: true,
                paypal: null,
                wechat: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_wechat.png',
                alipay: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_alipay.png'
            },
            github: {
                enable: true,
                link: 'https://github.com/esofar',
    	    target: '_self'
            }
        });
    </script>
    

    配置参数说明表:

    模块 属性 说明 类型 默认值
    公共模块 avatar 博主头像 String null
    favicon 网页标题图标 String null
    navigation 自定义导航 Array null
    catalog(博文目录) enable 是否启用 Boolean false
    move 是否允许拖拽 Boolean true
    index 是否显示索引 Boolean true
    level1 一级标题 String h2
    level2 二级标题 String h3
    level3 三级标题 String h4
    signature(博文签名) enable 是否启用 Boolean true
    auther 作者名字 String [Cnblogs Nickname]
    license 共享许可协议名称 String 署名-非商业性使用-相同方式共享 4.0 国际
    link 共享许可协议链接 String https://creativecommons.org/licenses/by-nc-sa/4.0/
    remark 其他备注 String null
    sponsor(博文赞赏) enable 是否启用 Boolean false
    text 标题 String Sponsor
    paypal PayPal 收款地址 String null
    alipay 支付宝收款二维码 String null
    wechat 微信收款二维码 String null
    github(GitHub Corners) enable 是否启用 Boolean false
    fill 背景填充色 String [Silence Theme Color]
    color 章鱼猫颜色 String #fff
    link Github 链接 String null
    target Github 打开方式 String _self

    配置完成后,记得点击「保存」按钮,保存上述操作。

    其他配置

    进入『设置』界面,在「标题」文本框中设置博客标题,注意不支持显示「子标题」;在「博客皮肤」处选择博客园官方标准模板 Custom;把「禁用模板默认CSS」复选框取消勾选。最后,点击「保存」按钮保存上述 3 步操作。

    进入『选项』界面,在「控件显示设置」中需要勾选的博客园官方功能模块如下几个:

    • 必须要勾选:公告、我的标签、随笔分类、阅读排行榜、推荐排行榜
    • 自定义勾选:博客园链接、首页链接、RSS订阅、联系

    其他模块取消勾选(可选操作)。最后,点击「SAVE」按钮保存操作。

    至此,主题部署完成。

    写在最后

    熟悉博客园的朋友都清楚,博客园提供了多种编辑器供我们选择,不同编辑器模式下发表的博文样式可能有所差别,本主题可能无法全面测试覆盖重写,所以本主题肯定会存在一些不足之处,如果您在使用遇到问题欢迎提交 Issues,我会及时响应。

    不过本主题对 Markdown 编辑模式下的博文样式支持相对较好,所以斗胆推荐您使用 Markdown 编辑器编辑发表新的博文,具体设置如下:

    进入『选项』界面,在「默认编辑器」中选择 Markdown 选项,然后点击「SAVE」按钮保存操作。

    如果您还不知道什么是 Markdown ,是不是有点跟不上队伍了。

    如果您在部署遇到任何问题请给我发邮件 esofar@qq.com。

    来源:

  • 相关阅读:
    Java中获取键盘输入值的三种方法
    java多线程处理与数据集合
    Apachetomcat学习
    Java之枚举
    多例设计模式与枚举
    权限管理(数据库部分)
    hdu 2458(最大独立集)
    hdu 1507(最大匹配)
    hdu 1350+hdu 1960(最小路径覆盖)
    hdu 1845(最大匹配)
  • 原文地址:https://www.cnblogs.com/liuyanhang/p/12632538.html
Copyright © 2020-2023  润新知