正文

博客美化(代码片段)

tingweichen  tingweichen  2023-01-12  234

关键词：

参考链接：https://github.com/esofar/cnblogs-theme-silence

介绍

Silence 是一款界面简洁、运行高效的博客园主题，主要面向于经常混迹博客园的朋友。

简单概括其几个主要特点：

专注阅读、精致漂亮的 UI；
事无巨细的部署文档；
兼容移动端浏览器；
源码结构清晰、易扩展。

安装

step 1：主题下载

通过下面git命令克隆到本地，或者直接下载zip到本地并解压。

git clone https://github.com/esofar/cnblogs-theme-silence.git

进入dist目录，获取发布文件silence.min.css和silence.min.js。

step 2: 上传到博客园

进入博客园『管理』-『文件』，将silence.min.js文件上传到自己的博客。获取上传后的URL地址，然后使用<script>标签生成一个脚本引用。参考示例：

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

进入『博客园』-『管理』-『设置』，将上面生成的引用复制到「博客侧边栏公告」文本域中。

最后处理样式文件，使用记事本工具打开silence.min.css文件，复制其所有代码到「页面定制CSS代码」文本域中即可。

step 3：开始使用

进入『博客园』-『管理』-『设置』，将下面代码复制并追加到「博客侧边栏公告」文本域中。

<script type="text/javascript">
    $.silence();
</script>

该主题新增了三个自动化模块：博客目录、博客签名、支持赞赏，并且支持参数配置，由于可能会稍微影响页面加载速度，默认不启用。如需开启请修改上述代码。参考示例：

<script type="text/javascript">
    $.silence(
        catalog: 
            enable: true,
            move: true,
            index: true,
            level1: ‘h2‘,
            level2: ‘h3‘,
            level3: ‘h4‘,
        ,
        signature: 
            enable: true,
            author: ‘Esofar‘,
            home: ‘https://esofar.cn‘,
            license: ‘署名 4.0 国际‘,
            link: ‘https://creativecommons.org/licenses/by/4.0‘
        ,
        reward: 
            enable: false,
            title: ‘感谢您的支持，我会继续努力‘,
            wechat: ,
            alipay: ,
        ,        
        github: 
            enable: true,
            color: ‘#fff‘,
            fill: ‘#151513‘,
            link: ‘https://github.com/ctwgL‘,
        
    );
</script>

Step4：其他配置

要使主题正常使用，还需要在修改博客园的一些其他配置项

进入『博客园』-『管理』-『设置』，在「标题」文本域中设置博客标题，不支持子标题。
进入『博客园』-『管理』-『设置』，在「博客皮肤」处选择博客园官方标准模板Custom，并且把「禁用模板默认CSS」复选框取消勾选。
进入『博客园』-『管理』-『选项』，在「控件显示设置」需要勾选的模块有：随笔分类、公告、博客园链接、阅读排行榜、我的标签、首页链接、RSS订阅、推荐排行榜、联系，其他模块取消勾选(可选)。

至此，Silence 主题就已经安装完成，赶快打开博客看看效果吧！

全网最全的博客美化系列教程08.自定义地址栏logo(代码片段)

全网最全的博客美化系列教程相关文章目录【全网最全的博客美化系列教程】01.添加Github项目链接【全网最全的博客美化系列教程】02.添加QQ交谈链接【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠【全网最... 查看详情

记一次博客页面美化过程,分享代码.(代码片段)

...热心博主分享的攻略二.进行了哪些美化?1.Markdown美化2.给博客页面加上鼠标停留响应Ⅱ.字体大小font-size发生变化Ⅲ.给容器添加阴影效果3.处理一些细节三.源码分享点击此处跳转到Github注册博客园账号有一个多月了,一直想优化一... 查看详情

博客美化---(代码片段)

这次对博客进行了美化，主要有：背景随机图片增加时钟，音乐等更改标签之间的距离网页模板更换第一次弄，大部分借鉴于各位园友，实际上对CSS/HTML也不是很懂--萌新求照顾，但“万丈高楼平地起”，后期加油，毕竟前... 查看详情

博客园界面美化(代码片段)

博客园界面美化0x00.写在前面皮肤作者：@SevenNight皮肤作者博客：SevenNight修改人：@Ryanjie修改人：Ryanjie前几天无意之中看到了一款特别好看（每个人的眼光都不一样）的博客皮肤“verdant”，皮肤的作者是@SevenNight。当时感觉这款... 查看详情

博客园的美化(代码片段)

前言第一次写博客想从美化页面开始。页首html代码这里引入的是来自https://www.cnblogs.com/jingmoxukong/p/7826982.html的css文件12<linkrel="stylesheet"href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.cs 查看详情

博客园美化(代码片段)

闲着没事对博客皮肤做了些美化，主要是css，js写了些小功能css部分：整体采用蓝色简洁风，有些部分我不用，所以没优化，比如标签，日历，相册，头部固定在顶部，侧边栏固定250px;右边内容主体自适应，支持，收藏和关注按... 查看详情

[博客美化]博客园syntaxhighlighter代码高亮(代码片段)

...ndowsLiveWriter/OpenLiveWriter代码着色太繁琐了，仅仅为了实现博客代码着色功能就要下载新软件和搞一堆配置。Win10用户只能使用OpenLiveWriter。Web端能干的事干嘛多搞功夫。如果不愿意网页登陆账号只想通过OLW软件编辑全文并且发布... 查看详情

全网最全的博客美化系列教程05.公告栏个性时间显示的实现(代码片段)

博客美化(代码片段)

...r/cnblogs-theme-silence介绍Silence是一款界面简洁、运行高效的博客园主题，主要面向于经常混迹博客园的朋友。简单概括其几个主要特点：专注阅读、精致漂亮的UI；事无巨细的部署文档；兼容移动端浏览器；源码结构清晰、易扩展... 查看详情

博客美化--页面点击特效(代码片段)

下面的添加都在博客侧边栏公告添加(要有JS权限）表情特效<scripttype="text/javascript">onload=function()varclick_cnt=0;var$html=document.getElementsByTagName("html")[0];var$body=document.getElementsByTagName("body")[0];$ht 查看详情

博客美化评论带头像，且支持旋转(代码片段)

【博客美化】评论带头像，且支持旋转好久没有更新关于博客园页面美化的文章了，这一次主要是写一下关于评论带头像，且支持旋转的内容，希望各位小伙伴能够喜欢！！！1.效果图2.添加CSS代码设置-页面定制CSS代码.feedbackConi... 查看详情

全网最全的博客美化系列教程06.推荐和反对炫酷样式的实现(代码片段)

美化博客园(代码片段)

设置与我联系侧边栏公告代码<atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=xxxxxxxxxxx&site=qq&menu=yes">　　<imgalign="absmiddle"border="0"src="http://wpa.qq.com/pa?p=2:xxxxxx 查看详情

博客美化篇(代码片段)

公告栏里的立方体：<divid="blog-news"><style>/*最外层容器样式*/.wrapwidth:100px;height:100px;margin:150px;position:relative;/*包裹所有容器样式*/.cubewidth:50px;height:50px;margin:0auto;transform-sty 查看详情

博客园美化-darkgreentrip(代码片段)

1、第一步，样式的形成与博客皮肤的选择有很大关系本文选择darkgreentrip2、代码插入2.1页面定制CSS代码```Objective-C#homemargin:0auto;width:95%;/原始65/min-width:980px;/页面顶部的宽度/background-color:rgba(245,245,245,0.7);padding:30px;margin-top:0px; 查看详情

博客园代码高亮美化教程(代码片段)

先简单展示下效果吧：首先需要导入js代码，在侧边栏公告处将以下代码复制进入：<scripttype="text/javascript">!function()varq=null;window.PR_SHOULD_USE_CONTINUATION=!0;(function()functionS(a)functiond(e)varb=e.charCodeAt(0);if(b!==9 查看详情

2021年wordpress博客装修美化(代码片段)

2021年Wordpress博客装修美化（一）2021年WP博客Blocksy主题安装和基础配置接上篇，2021年Wordpress博客搭建,关于搭建WP的步骤，基本上都已经讲了。看完后，照着操作可以快速的搭建一个高可维护性的属于自己的博客。万里长征，我们... 查看详情

美化博客签名-个人版权声明代码(代码片段)

请粘贴到【博客签名】-【内容】里，可以修改替换代码里的相关文字、链接地址、打开方式。 1<divid="AllanboltSignature">2<div>作者：<ahref="https://www.cnblogs.com/CoolMonthStudy/"target="_blank">月清凉</a></div>34<d 查看详情