博客样式优化

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 这个插件，插件基本使用方法如下，更多功能设置可看官方文档。

1. 安装依赖：cnpm install --save @easyops-cn/docusaurus-search-local

   若文章内容为中文的话，需要安装 nodejieba ：cnpm install --save nodejieba

2. 将插件添加到配置文件中：

   docusaurus.config.js

   module.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.     },   ], ],};

3. 配置文件中有一个 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": "啥也没找到，换一个关键词吧😵"       },     },   ], ],

---