Skip to main content

博客样式优化

2021-4-09|
博客搭建

滚动条优化#

默认的滚动条比较丑(上) ,优化后的滚动条(下 feel better)

image-20210407143001608image-20210409113758446

对基于 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": "啥也没找到,换一个关键词吧😵"       },     },   ], ],