ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Silence - 博客园主题美化-部署

2020-04-04 17:00:11  阅读:552  来源: 互联网

标签:png String min 博客园 主题 Silence null 美化


部署文档
操作之前请先确保您的博客园账号已正常登陆并且已经成功申请开通了 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
然后使用

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

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

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

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

配置参数说明表:

模块 属性 说明 类型 默认值
公共模块 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 ,是不是有点跟不上队伍了。

标签:png,String,min,博客园,主题,Silence,null,美化
来源: https://www.cnblogs.com/liuyanhang/p/12632538.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有