样式 爱心跳动
在Next主题根目录的配置文件修改
1 2 3 4 5 6 7 8 9 10 11 12 13 footer : # Specify the date when the site was setup . If not defined , current year will be used . since : 2019 # Icon between year and copyright info . icon : # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/ # `heart ` is recommended with animation in red (#ff0000 ). name : heartbeat # If you want to animate the icon , set it to true . animated : true # Change the color of icon , using Hex Code . color : "#ff0000 "
代码框样式 代码框样式(复制按钮)
在Next主题根目录的配置文件修改
主题根目录_config.yml 1 2 3 4 5 6 7 8 9 10 codeblock : # Manual define the border radius in codeblock , leave it blank for the default value : 1 border_radius: 10 //代码框边缘圆角 # Add copy button on codeblock copy_button : enable : true # Show text copy result show_result : true # Style: only 'flat' is currently available, leave it blank if you prefer default theme style: flat //复制按钮
代码高亮主题 主题根目录_config.yml 1 2 3 4 # Code Highlight theme # Available values: normal | night | night eighties | night blue | night bright # https://github.com/chriskempson/tomorrow-theme highlight_theme : normal
diff样式 1 2 - printf("Hello World!"); + printf("Hello_World!");
改变显示字体的颜色
主要是侧边栏和文章主题内容(不包含标题)
source/custom/custom.styl 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 //主页的阅读全文、主内容字体,不包含标题 .main-inner { p,span,a {color: #ffb6c1;} background-color : rgba (255,255,255,0.5 ); } //上侧边栏 .header-inner { p,span,a {color: #ffb6c1;} background-color : rgba (255,255,255,0.5 ); } // 下侧边栏字体颜色 #sidebar { p,span,a {color: #ffb6c1;} //改变颜色 }*/
自动更换背景图片 source/custom/custom.styl 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 body { //以下是自动更换背景图片 background:url(https://source.unsplash.com/random/1600x900); background-repeat : no-repeat ; background-attachment :fixed ; background-position :50 % 50%; background-size : 100% 100%; } //更换侧边标题栏图片 .site-meta { //background: #BABABA //#5CADAD; //颜色 background-image:url(/images/subtitle1.jpg); //背景图片 background-position :50 % 50%; background-size : 100% 100%; opacity: 0.9; //虚化 //p,span,a {color: #3D3D3D;} //字体颜色 }
背景虚化(解决搜索框被虚化的问题)
修改左侧栏菜单带搜索框的UI的背景颜色RGB值 其余的使用透明度 如此搜索框的就不会被虚化
source/custom/custom.styl 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 //主页的阅读全文、主内容字体,不包含标题 .main-inner { //background-color: rgba(255,255,255.0.8); opacity : 0.8 ; } //上侧边栏 .header-inner { background-color: rgba(255,255,255,0.8); //只修改此处的背景颜色,以便搜索框不会被覆盖 //opacity: 0.75; //透明度,会覆盖到搜索框 } //上侧边栏的标题栏 .site-meta { background: #5CADAD; //颜色 //background-image:url(/images/huojinsi.jpg); //背景图片 } // 下侧边栏 #sidebar { //opacity: 0.8; //透明度 }
note 便签
主题配置文件搜索 note, 可设置风格和图标是否显示。存在部分样式无效的问题。
主题根目录_config.yml 1 2 3 4 5 6 7 8 9 10 11 12 note : # Note tag style values : # - simple bs-callout old alert style . Default . # - modern bs-callout new (v2-v3 ) alert style . # - flat flat callout style with background , like on Mozilla or StackOverflow . # - disabled disable all CSS styles import of note tag . style: simple //默认样式 icons: true //图标 border_radius: 10 //圆角 # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). # Offset also applied to label tag variables . This option can work with disabled note tag . light_bg_offset : 0
示例:
1 {% note default %}default是类型还有以下几种{% endnote %}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 {% note default %}default{% endnote %} {% note primary %}primary{% endnote %} {% note success %}success{% endnote %} {% note info %}info{% endnote %} {% note warning %}warning{% endnote %} {% note danger %}danger{% endnote %} {% note %}空样式{% endnote %} {% note danger no-icon %}danger no-icon{% endnote %}
另一种写法:
1 <div class="note danger"><p>danger</p></div>
<div class="note danger"><p>danger</p></div>
文章编辑 选项卡
“tab” 为选项卡的名称,可以自定义,数字是几表示从第几个选项卡开始。非必须,若数值为 - 1 则隐藏选项卡内容。 下载插件: npm i hexo-ruby-marks
1 2 3 4 5 6 7 8 9 10 11 {% tabs tab,2 %} <!-- tab -- > this is tab1 <!-- endtab -- > <!-- tab -- > this is tab2 <!-- endtab -- > <!-- tab -- > this is tab3 <!-- endtab -- > {% endtabs %}
结果:
1 2 3 4 5 6 7 8 9 10 11 {% tabs tab,2 %} <!-- tab --> this is tab1 <!-- endtab --> <!-- tab --> this is tab2 <!-- endtab --> <!-- tab --> this is tab3 <!-- endtab --> {% endtabs %}
引用(文章居中) 1 2 3 {% cq %} **there are test words** {% endcq %}
1 2 3 {% cq %} **there are test words in center** {% endcq %}
在文章中插入 iframe 1 {% iframe url [width] [height] %}