首页 > 其他分享 >博客园css与目录导航

博客园css与目录导航

时间:2023-08-20 14:12:09浏览次数:32  
标签:-- 博客园 list content h2 color var 导航 css


默认配置: 皮肤:BlueSky

页面定制css代码

:root {
  --accent-color: #696969;
  /* nice */
  --primary-colour: #306797;
  /* <> */
  --background-color: white;
  --background-gray: #f5f5f5;
  --border-color: #dbdbdb;
  --code-bg-color: #f8f8f8;
  --font-color: #1f1f1f;
  --codemirror-color: var(--font-color);
  --header-color: #000000;
  --link-color: #2077b2;
  --control-text-color: #667176;
  --side-bar-bg-color: #fafafa;
  --hr-color: var(--primary-colour);
  --body-font: 'PMingLiU','Poppins', "Consolas", "等线", "Times New Roman", "等线", "SimSun", "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  --heading-font: "Consolas",'Poppins', 'STXingkai', "等线", "Times New Roman", "等线", "SimSun", "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif !important;
  --border-radius: 2px;
  --document-horizontal-margin: 80px;
  --document-padding-x: 19ch;
  --font-size: 1rem;
  --navigator-size: 1.1rem;
  --h1-fontsize: 2.7rem;
  --h2-fontsize: 1.9rem;
  --h3-fontsize: 1.5rem;
  --h4-fontsize: 1.4rem;
  --h5-fontsize: 1.2rem;
  --h6-fontsize: 1.1rem;
  --line-height: 1.4;
  --main-content-margin: 0 auto;
  --main-content-max-width: 100ch;
  --monospace-font-size: 15px;
  --monospace-font: "Consolas", "等线", "FiraCode", "Inconsolata", "Consolas", "Menlo", "Liberation Mono", Courier, monospace;
  --code-font: "Consolas", "等线", "宋体", "SimSun", "Arial", "Times New Roman", "Microsoft YaHei", "黑体", sans-serif;
  --monospace-line-height: 1.4;
  --monospace: var(--monospace-font);
  --nav-width: 200px;
  --vertical-padding: 40px;
}
code{
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
}

h2{
  padding:10px !important;
  color: var(--primary-colour);
  background-color: var(--background-gray);
  margin-top: 1.5rem;
  margin-bottom: 0.5em;
  font-size: var(--h3-fontsize);
  padding-right: 2px solid var(--primary-colour);
  border-left: 2px solid var(--primary-colour);
  border-right: 2px solid var(--primary-colour);
}
ul li::marker{
    color: var(--primary-colour);
}

#sideBar{
  position: fixed;
}

#sideBarMain h3{
  padding:10px 0;
  background-color: var(--background-gray));
  color:black;
  text-align: center;
}

页脚代码

<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;
 
    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory" ">';
        content += '<p style="font-size:18px;"><b>目录</b></p>';
        content += '<ul>';
        for(var i=0; i<h2_list.length; i++)
        {
            //回到顶部
            var go_to_top = '<hr><div style="text-align: right;">'
            +'<a name="_label' + i + '"></a>'
            +'<button style="color:#f5f5f5;padding:5px 10px;border:none;">'
            +'<a href="#_labelTop" style="color:#f68a33">回到顶部</a></button></div>';
            $(h2_list[i]).after(go_to_top);
            
            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h2').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li style="list-style-type:none;"><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }
            
            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li style="list-style-type:none;><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li style="list-style-type:none;><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p> </p>';
        content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }   
}

GenerateContentList();
</script>

<script language="javascript" type="text/javascript">
// 左侧生成目录索引列表
function addSideBar()
{
    var mainContent = $('#sideBarMain');
    var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;
 
    if(h2_list.length>0)
    {
        var content = '<!-- 目录 --><div id="sidebar_category" class="newsItem">';
        content+='<h3 class="catListTitle">目录</h3>';
        content += '<ul>';
        for(var i=0; i<h2_list.length; i++)
        {
            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h2').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li style="list-style-type:none;margin-left:20px;"><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }
            
            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li style="list-style-type:none;><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li style="list-style-type:none;><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div>';
        if($('#sideBarMain').length != 0 )
        {
            $($('#sideBarMain')[0]).prepend(content);
        }
    }   
}

addSideBar();
</script>

word直接发布文章到博客园

【文件】->【共享】->【发布至博客】
image

其中要填的三个空都能在【博客园】的【设置】页面底部找到答案。
image
框出来的三个分别是:【用户名】,【密码】,【博客文章URL】。
没错:密码就是访问令牌!!!

标签:--,博客园,list,content,h2,color,var,导航,css
From: https://www.cnblogs.com/jihuiting2/p/17643944.html

相关文章

  • 请大家支持博客园,购买VIP会员,https://cnblogs.vip
    很多认识我的朋友都是读到我的文章而来的,博客园是国内最早的技术博客平台,近二十年来始终如一地保持本色,不忘初心,为广大的技术爱好者经营着一块相对干净的田地。我也是最早的一批博主之一吧,在那个物资还没有很丰富,相对单纯的年代,天南地北的朋友们,以文会友,追一些大牛的系列文章跟......
  • 前端Vue自定义等分底部菜单导航按钮 自适应文字宽度 可更改组件位置
    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率......
  • CSS实现文字描边效果
    一、介绍最近在一个项目的宣传页中,设计师使用了文字描边效果,之前我确实没有实现过文字的描边效果,然后我在查阅资料后,知道了实现方法。文字描边分为两种:内外双描边和单外描边,也就是指在给文字加上描边效果后,描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。二、......
  • 前端入手超简单之CSS3免费教程
    CSS样式课程目标1.css引入方式(重点)2.css选择器*(重点)3.css盒子模型(重点)4.css3常见效果(重点)5.CSS3常用的规则;级联样式表css介绍引用百度百科css概述层叠样式表其实就是对静态页面进行装饰,但是,特别要注意的点是:通常建议表现形式与页面内容分离(例如:人就是内容,穿着打扮......
  • 现代CSS布局技术:Flexbox和Grid的使用指南和最佳实践
    在现代Web开发中,CSS布局技术变得越来越重要。Flexbox和Grid是两种常用的CSS布局技术,它们可以帮助我们创建灵活、可维护的布局。Flexbox布局Flexbox是一种基于弹性盒子模型的布局技术,它可以让我们更加容易地创建水平或垂直方向上的布局。以下是Flexbox的常见属性:容器属性disp......
  • 如何用CSS实现响应式设计并优化用户体验
    在移动设备的时代,网站的响应式设计变得越来越重要。响应式设计的目标是使网站适应不同尺寸和分辨率的设备,并提供最佳的用户体验。本文将介绍如何使用CSS实现响应式设计并优化用户体验。使用媒体查询设置CSS样式媒体查询是CSS3中的一个强大的特性,可以根据不同的媒体类型和设备特......
  • 3 CSS组合选择器
    3组合选择器页面元素比较复杂,存在多个嵌套。为了更加灵活选择页面中的元素,CSS中还提供了组合选择器。组合选择器就是将多个基本选择器通过一定的规则连接起来组成一个复杂选择器。后代子代选择器<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><tit......
  • postcss px转不转rem呢?
    1、用postcss时,有时候你的px不转rem;你希望他转;如:elementui的labelWidth配置了数值但是不转原因:行内元素都不转解决方法:放到vue的style元素中就行啦2、有的你不希望他转解决方法:方法1:px单位改为大写PX方法2:这行css后注释上/*no*/why?我看了下postcss的源码;大体就是先......
  • 2 css基本选择器
    2基本选择器id选择器id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式为:#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}该语法中,id名即为HTML元素的id属性值。大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于HTML中某一个具体的元素。id选择器不支......
  • 1 CSS的引入方式
    1CSS的引入方式CSS样式有三种不同的使用方式,分别是行内样式,嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。行内样式行内样式,就是写在元素的style属性中的样式,这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不......