博客样式优化
2021-4-09|
#
滚动条优化默认的滚动条比较丑(上) ,优化后的滚动条(下 feel better)


对基于 WebKit 的浏览器,如 Chrome、Safari 可以使用伪类选择器 -webkit-scrollbar 来进行元素选择操作滚动条,主要有:
::-webkit-scrollbar
— 整个滚动条.::-webkit-scrollbar-button
— 滚动条上的按钮 (上下箭头).::-webkit-scrollbar-thumb
— 滚动条上的滚动滑块.::-webkit-scrollbar-track
— 滚动条轨道.::-webkit-scrollbar-track-piece
— 滚动条没有滑块的轨道部分.::-webkit-scrollbar-corner
— 当同时有垂直滚动条和水平滚动条时交汇的部分.::-webkit-resizer
— 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
/* 滚动槽 */body::-webkit-scrollbar { width: 6px; height: 6px;}body::-webkit-scrollbar-track { border-radius: 3px; background: rgba(0,0,0,0.06); /* 使用 inset 添加阴影让滚动条变得更加立体 */ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08);}/* 滚动条滑块 */body::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(0,0,0,0.12); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);}
#
markdown 图片样式优化优化之前的图片效果:

优化后的图片效果:

也就是在自定义 CSS 文件中给 markdown 中的所有图片样式都添加了图片水平居中,添加了边框阴影使其立体化,且由于 <img>
标签是行内元素,因此将其设置为块级元素使其独占一行:display: block
选择器定位:使用子选择器或后代选择器:.markdown img
都可,为了保险起见,使用后代选择器(它包括了子选择器

.markdown img { max-width: 100%; margin: 1.5rem auto; display: block; box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15); border-radius: 3px;}
#
添加离线文章搜索功能主要是使用了search-local 这个插件,插件基本使用方法如下,更多功能设置可看官方文档。
安装依赖:
cnpm install --save @easyops-cn/docusaurus-search-local
若文章内容为中文的话,需要安装 nodejieba :
cnpm install --save nodejieba
将插件添加到配置文件中:
docusaurus.config.jsmodule.exports = { // ... Your other configurations. plugins: [ // ... Your other plugins. [ require.resolve("@easyops-cn/docusaurus-search-local"), { // ... Your options. // `hashed` is recommended as long-term-cache of index file is possible. hashed: true, // For Docs using Chinese, The `language` is recommended to set to: // ``` // language: ["en", "zh"], // ``` // When applying `zh` in language, please install `nodejieba` in your project. }, ], ],};
配置文件中有一个
translations
字段可用于个性化搜索提示信息:{ "search_placeholder": "Search", "see_all_results": "See all results", "no_results": "No results.", "search_results_for": "Search results for \"{{ keyword }}\"", "search_the_documentation": "Search the documentation", "count_documents_found": "{{ count }} document found", "count_documents_found_plural": "{{ count }} documents found", "no_documents_were_found": "No documents were found" }
我的配置如下,
translations
相关字段对应的提示信息出现场合可配合本站搜索功能理解plugins: [ [ require.resolve("@easyops-cn/docusaurus-search-local"), { hashed: true, language: ["en", "zh"], translations: { "search_placeholder": "Search", "see_all_results": "查看所有相关结果👀", "no_results": "抱歉,暂时没有这方面的文章😣.", "search_results_for": "关于 \"{{ keyword }}\" 的所有文章", "search_the_documentation": "从当前站点中查找关键字", "count_documents_found": "一共找到了 {{ count }} 篇相关文章👀", "count_documents_found_plural": "一共找到了 {{ count }} 篇相关文章👀", "no_documents_were_found": "啥也没找到,换一个关键词吧😵" }, }, ], ],