橘子Blog Loading

博客园主题 Silence的配置

博客园主题 Silence

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

配置步骤

  • 4.修改博客皮肤为 Custom

    上图已标记

  • 5.禁用模板默认css

    上图已标记

  • 6.申请js权限

    上图已标记

  • 7.进入 https://i.cnblogs.com/files, 将项目下 ./dist/silence.min.js 文件进行上传, 上传完毕, 鼠标移动到文件, 点击鼠标右键,复制文件链接, 在博客侧边栏中引入

     // src替换成自己的链接, 不过这个链接也能用
     <script src="https://blog-static.cnblogs.com/files/juzia/silence.min1.js"></script>
    

  • 8.根据官方文档自行在 博客侧边栏 中进行配置

    官方文档

  • 9.我个人的配置

    <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 搜索 <div class="bars"><i 在此处添加如下代码 (可直接复制粘贴,格式已经控制好了), 重新上传该文件即可

ps: 如果嫌麻烦可以在第7步时, 直接引用我的js文件即可 (采用第一种方案)

在新的页面打开

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

在当前页面打开

  ondblclick=window.location.href="https://i.cnblogs.com/posts/edit;postId="+((window.location.pathname).substring((window.location.pathname).lastIndexOf("/")+1,(window.location.pathname).lastIndexOf(".")))   
  • 可以在 博客侧边栏 中引入js文件时引入我已经修改好的js文件

在新的界面打开

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

在当前界面打开

<script src="https://blog-static.cnblogs.com/files/juzia/silence.min3.js"></script>
posted @ 2020-10-30 22:56  juziia  阅读(1492)  评论(16编辑  收藏  举报