博客园silence主题修改记录

这篇具有很好参考价值的文章主要介绍了博客园silence主题修改记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • 1. 寻找主题
    • 1.1. AwesCnb
    • 1.2. SimpleMemory主题
    • 1.3. Silence主题
  • 2. 修改silence主题
    • 2.1. 开发环境配置
      • 2.1.1. 克隆silence主题
      • 2.1.2. 安装nodejs
      • 2.1.3. 安装nvm
      • 2.1.4. 安装webpack
    • 2.2. 修改页面
      • 2.2.1. 前端的文件结构和作用
      • 2.2.2. 修改过程
  • 3. 结束

博客园作为一个老牌技术博客网站,有着非常浓郁的游戏开发、引擎开发以及图形学氛围。并且没有像其他网站有难以接受的广告。
虽说网站主站看着比较老,但还在接受的范围。并且可以根据自己的喜好来自定义主题。

1. 寻找主题

以下是找的几个常见的主题,因为是技术博客阅读体验是最重要的,所以最终还是选中了silence主题。

1.1. AwesCnb

主题地址:https://github.com/cnbloglabs/awescnb
它是一堆主题的合集,可以通过它快速切换热门主题查看效果。
所有主题介绍:https://www.yuque.com/awescnb/user/kyi19z

1.2. SimpleMemory主题

主题地址:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/

1.3. Silence主题

主题地址:https://github.com/esofar/cnblogs-theme-silence

2. 修改silence主题

但是silence主题看着不太和谐。

  1. body部分也有,两边有很大的空白,很不协调
  2. 没有背景,整体都是白色,不好看

给cnBlog配置主题这部分就不赘述了,在silence主题配置写的很详细。
下面记录下二次开发的过程。

2.1. 开发环境配置

2.1.1. 克隆silence主题

// 克隆代码
git clone https://github.com/esofar/cnblogs-theme-silence.git

// 进入目录
cd cnblogs-theme-silence

后面要用npm安装依赖,需要安装node.js。

2.1.2. 安装nodejs

nodejs官网,安装LTS版本,我同时勾选了安装chocolatey。

安装完成后执行npm install,之后npm start时会报错

PS E:\Github\cnblogs-theme-silence> npm start

> cnblogs-theme-silence@3.0.0 start
> webpack-dev-server --config webpack.config.dev.js

10% building 1/1 modules 0 active(node:1876) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
i 「wds」: Project is running at http://localhost:3050/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from E:\Github\cnblogs-theme-silence
10% building 1/2 modules 1 active E:\Github\cnblogs-theme-silence\src\index.jsnode:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (E:\Github\cnblogs-theme-silence\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (E:\Github\cnblogs-theme-silence\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (E:\Github\cnblogs-theme-silence\node_modules\webpack\lib\NormalModule.js:471:10)
    at E:\Github\cnblogs-theme-silence\node_modules\webpack\lib\NormalModule.js:503:5
    at E:\Github\cnblogs-theme-silence\node_modules\webpack\lib\NormalModule.js:358:12
    at E:\Github\cnblogs-theme-silence\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (E:\Github\cnblogs-theme-silence\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (E:\Github\cnblogs-theme-silence\node_modules\loader-runner\lib\LoaderRunner.js:205:4) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.16.0

这个Issue提到node版本太新,降版本就好了。

2.1.3. 安装nvm

再装个nvm对node.js进行版本控制。


执行下面的代码将nvm切换到对应的版本。

nvm install 15
nvm use 15.14.0

如果报错路径不能带空格,需要新建个nvm的目录,用root命令修改nvm的根目录位置

nvm root D:\Programs\nvm

2.1.4. 安装webpack

silence主题是用webpack构建的,用下面的命令配置webpack的环境

npm init -y
npm install webpack webpack-cli --save-dev

2.2. 修改页面

我对改页面的需求大致有两个:

  1. 修改页面宽度
  2. 修改背景图/颜色

2.2.1. 前端的文件结构和作用

对前端的了解可以近似于0,先分析一下silence主题下的文件的作用。

  • dist目录,它们是使用webpack构建工具生成的,像C++build之后的可执行文件
    • silence.min.css 用于控制页面的样式和布局,主要包括字体、颜色、背景、边框、间距等方面的设计,让页面更加美观和易于阅读
    • silence.min.js 用于实现页面的交互和动态效果,主要包括响应用户操作、修改页面内容、验证用户输入、与后端交互等功能,让页面具有更好的用户体验和功能性
  • src是实现主题的源码
    • index.js是入口文件
    • index.less 和 index.mobile.less 一种CSS预处理器的文件格式,它可以被编译成标准的CSS文件。.less文件提供了许多在CSS中不可用的功能,如变量、嵌套规则、运算、混合和函数等。在这里面可以很方便地修改布局样式
    • templates目录下是静态页面
      • archive.html归档页面
      • index.htlm主页面
      • post.html文章页面

做了一些常识之后,明白了只要修改index.less里的一些样式就可以生成自己想要的效果。

2.2.2. 修改过程

最好能找到参考的网页,这样在不熟悉前端开发的情况可以更快速的完成。

  1. 打开想要修改的网页,按F12呼出开发者工具
  1. 点击最左侧的箭头或者按Ctrl + Shift + C,打开选取网页上元素的功能
  2. 选中网页上的元素,想要调节阅读宽度,就选取到“main”,并在页面上修改width到合适的值
  1. 在index.less中找到main,并把width加进去
#main {
  background: #fff;
  opacity: .98;
  width: 85%;
  margin: auto auto;
  min-height: calc(100% - 135px);
  padding: 75px 10px 0 10px;
  min-width: 950px;
  text-align: left;
}

如果有个参考网页,可以通过开发者工具开关或修改参数来快速确认是否是自己想要的功能。

方法就是这样,后面就是体力活了。

3. 结束

修改完后的效果是这样的,还是比较满意的。
文章来源地址https://www.toymoban.com/news/detail-424200.html

到了这里,关于博客园silence主题修改记录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【网站搭建】3 更换博客主题—butterfly

    可以到官网选择想要更换的主题Themes | Hexo 我选用的是butterfly zhangzeli/hexo-theme-butterfly: A Hexo Theme: Butterfly (github.com)  在Hexo根目录打开终端执行拉去操作 下载配套文件  打开_config.yml文件,更改   重新启动本地服务器即可  

    2024年02月16日
    浏览(36)
  • 主题狗themes.yhz610.com-精选上百种优秀开源网站主题、博客主题、商城模板

    说明 主题狗themes.yhz610.com 精选上百种优秀开源网站主题、博客主题、商城模板。 类型包含 hexo 、jekyll 、hugo 、next 、vuepress 、gatsby 、wordpress 等等 主题狗- themes.dog 支持 PWA ,欢迎添加至手机桌面 为什么做此项目 现在很少有逛到纯网站主题分享的网站,不是付费就是广告或者

    2024年02月19日
    浏览(40)
  • 博客园主题——atum3.0升级发布啦

    这是一款基于VUE3.0 打造的简约型博客主题,兼容各大主流浏览器,适配各个设备与分辨率,PC、平板、手机等均可正常浏览。并且采用响应式设计,提高使用响应速度。 响应式设计,兼容平板、手机端浏览器。 提供多种配置信息,方便各类用户进行个人定制化。 部署文档十

    2024年02月09日
    浏览(27)
  • 多主题自适应知识变现博客论坛,支持docker一键部署

    给大家推荐一个多主题自适应,支持付费收款的博客论坛系统,支持docker一键部署,支持企业微信通知。 日志目录 /opt/logs/blog/ H2 console true 打开 H2数据库 /storage/db_mblog.mv.db 上传文件 /storage/ 体验地址 https://blog.zwapi.cn 前端地址 http://localhost:8080 管理员账号 admin/admin H2 console地址

    2024年02月13日
    浏览(36)
  • 博客搭建教程Github+Hexo+hexo-theme-matery主题

    前情提要 写这篇文的目的 记录自己搭建过程,便于以后快速复用 总结经验和自己踩的坑,给其他小伙伴一些参考(由于是搭建后写的,所以没有参考图片) 介绍 初步效果参考我的博客:hermia的个人博客 本博客基于Hexo框架,使用github托管 使用自定义域名: hermiablog.com hexo主题

    2024年02月19日
    浏览(72)
  • uniapp 微信小程序配置全局主题色、实现动态修改主题色

            本文的实现目标是全局配置小程序的整体主题色,包括本地图标的色调。第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色;第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色。本地图标的主题色调整需要使用svg格式的图片

    2024年02月01日
    浏览(44)
  • Naive ui主题色修改

    新建 theme.ts 文件 App.vue 中引入 theme.ts n-config-provider标签中加入 :theme-overrides=“themeOverrides”

    2024年02月16日
    浏览(57)
  • Jupyter notebook修改背景主题

    打开Anaconda Prompt,输入以下内容 1. pip install --upgrade jupyterthemes 下载对应背景主题包 出现Successfully installed jupyterthemes-0.20.0 lesscpy-0.15.1时,说明已经下载安装完成 2. jt -l 查看背景主题列表 3. jt -t 主题名称(主题名称如上所示) 比如说这里我选择第一个背景主题进行更换,输入

    2024年02月04日
    浏览(42)
  • 【matlab】【函数学习记录】寻找矩阵最大和次大极值点

    求二维矩阵 A 的最大极值点和次大极值点。 返回极值点所在位置。 BW = imregionalmax(A, conn) 用来寻找矩阵的极值点。 返回值 BW 类型为 logical ,和 A 同维度,其用来标示极值点的位置,值为 1 则表示对应位置为极大值点,否则值为 0 。 参数 A 可为向量、矩阵。 参数 conn 表示矩阵

    2024年02月14日
    浏览(37)
  • Postman系列(二)-修改主题和字体大小

     一、修改主题 postman默认的皮肤是白色。白晃晃的,一天工作下来经常看得我头疼、眼睛疼。 现在,每次在工作电脑下载完软件第一件事就是把软件皮肤改成暗黑模式(如果软件支持的话) postman有两种主题有颜色可供选择。具体步骤如下: 1.打开设置界面 2.选择主题标签页

    2024年02月03日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包