博客园主题 Silence的配置

2020-10-30 23:02:40 阅读：521 来源： 互联网

标签：cnblogs 博客园主题博客 Silence https com silence

博客园主题 Silence

本人在写博客时, 一直苦于找不到能够提供一个简洁, 舒适的博客web网站, 而就在前两天, 偶然看到一位博客园博主的网站主题甚得我意, 进一步通过百度搜索得知, 原来博客园的个人网站是可以自己定制的, 然后光速注册了一个博客园账号, 申请了个人网站, 通过开源项目 Silence(感谢开发作者) 对自己的网站进行装修, 期间还踩了不少坑, 请教了主题的开发作者, 才成功的配置好, 在此写一篇博客, 希望如果有小伙伴喜欢这款主题, 看到这篇博客能够快速的搭建自己满意的个人网站

配置步骤

下载项目文件

https://github.com/esofar/cnblogs-theme-silence/archive/master.zip
申请个人网站

进入 https://home.cnblogs.com/ 点击写博即可申请
进入博客园后台设置, 进行网站的配置
1. 进入 https://i.cnblogs.com/settings
2. 将项目cnblogs-theme-silence-master下的 ./dist/silence.min.css 文件中的代码拷贝到页面定制 CSS 代码框中

修改博客皮肤为 Custom
禁用模板默认css

上图已标记

申请js权限

上图已标记

进入https://i.cnblogs.com/files, 将项目下 ./dist/silence.min.js 文件进行上传, 上传完毕, 鼠标移动到文件, 点击鼠标右键,复制文件链接, 在博客侧边栏中引入
```
// src替换成自己的链接, 不过这个链接也能用
<script src="https://blog-static.cnblogs.com/files/juzia/silence.min1.js"></script>
```
根据官方文档自行在博客侧边栏中进行配置

 [官方文档](https://esofar.github.io/cnblogs-theme-silence/#/options)

我个人的配置

<script>
  window.$silence = {
      favicon: 'https://storage.live.com/Users/5510755311915960826/MyProfile/ExpressionProfile/ProfilePhoto:Win8Static,UserTileMedium,UserTileStatic',
       github: 'https://github.com/juziia',
       sponsor: {
        enable: true,
        text: '',
        wechat: '',
        alipay: ''
    },
      showNavAdmin: false,
      catalog: {
        enable: true,
        index: true,
        active: false,
        levels: ['h3', 'h4', 'h5']
      },
      signature: {
        enable: true,
        author: null,
        license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
        remark: '你可以在这里自定义其他内容',
      },
     navbars: [{
            title: '归档',
             // 这里的juzia改成自己的
            url: 'https://www.cnblogs.com/juzia/p/'
        },
        {
            title: '搜索',
            chilren: [{
                title: '百度',
                target: '_blank',
                url: 'https://www.baidu.com',
             }, {
                title: '谷歌',
                target: '_blank',
                url: 'https://www.google.com',
                }]
       }]
  };
</script>
<script src="https://blog-static.cnblogs.com/files/juzia/silence.min1.js"></script>
<img src="https://pic.cnblogs.com/avatar/1415026/20190816215152.png" alt="博客主的头像" class="img_avatar" width="200px" style="border-radius:50%">

对原js文件做了小小的改进

在与网站的交互过程中, 有时需要对文章进行修改, 这时候需要滑动到页面的最上面,点击新随笔跳转到后台, 再对要修改的博客进行更改, 步骤过于繁琐, 所以对silence.min.js 文件进行了修改, 增加了鼠标双击 底部按钮 就快速跳转到修改当前博客的页面

修改方式:

打开silence.min.js文件(用 vs code打开比较好, 有良好格式), ctrl + F 搜索 class="esa-toolbar" 在此处添加如下代码 (可直接复制粘贴,格式已经控制好了), 重新上传该文件即可

  ondblclick=window.open("https://i.cnblogs.com/posts/edit;postId="+((window.location.pathname).substring((window.location.pathname).lastIndexOf("/")+1,(window.location.pathname).lastIndexOf("."))))

标签：cnblogs,博客园,主题,博客,Silence,https,com,silence
来源： https://www.cnblogs.com/juzia/p/13904728.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

博客园主题 Silence的配置

博客园主题 Silence

配置步骤

对原js文件做了小小的改进