xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

❤更新主题&完善css

Browse Source
This commit is contained in:
DefectingCat
2020-02-15 17:49:47 +08:00
parent 2f166ec277
commit 32f05f75a8
22 changed files with 218 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
source/_data/backup.md Normal file
View File

@ -0,0 +1,7 @@
## 自定义配置项备份
`custom.styl`：自定义css，`source/css/_custom`
`tranquil-heart.min.css`：高亮css，`source/lib/prettify`
`zh-Hans.yml`：`languages`

3
source/_data/custom.styl
View File

@ -2,6 +2,9 @@
//图片
.post-content img
border-radius 0.8rem
transition all .5s
-webkit-transition all .5
-ms-transition all .5
.post-content img:hover
transition: all 0.5s
-webkit-transition: all 0.5s

2
source/_data/tranquil-heart.min.css vendored Normal file
View File

@ -0,0 +1,2 @@
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint{background:#2f3640!important;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#e6e9ed}ol.linenums{margin-top:0;margin-bottom:0;color:#656d78}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#2f3640;list-style-type:decimal}@media screen{.str{color:#ffce54}.kwd{color:#4fc1e9}.com{color:#656d78}.typ{color:#4fc1e9}.lit{color:#ac92ec}.pun{color:#e6e9ed}.opn{color:#e6e9ed}.clo{color:#e6e9ed}.tag{color:#ed5565}.atn{color:#a0d468}.atv{color:#ffce54}.dec{color:#ac92ec}.var{color:#e6e9ed}.fun{color:#e6e9ed}}

4
themes/fluid/Changelog.md
View File

@ -1,3 +1,7 @@
### 2020/2/12
- 重写头图视差滚动效果
### 2019/12/19
- 增加强制 HTTPS 功能

43
themes/fluid/README.md
View File

@ -13,14 +13,14 @@
<a href="https://github.com/fluid-dev/hexo-theme-fluid/blob/master/LICENSE"><img alt="License" src="https://img.shields.io/github/license/fluid-dev/hexo-theme-fluid.svg?style=flat"></a>
</p>
![ScreenShot](https://cdn.jsdelivr.net/gh/fluid-dev/static@master/hexo-theme-fluid/screenshots/1.png)
![ScreenShot](https://cdn.jsdelivr.net/gh/fluid-dev/static@master/hexo-theme-fluid/screenshots/index.png)
## 示例
## 预览
[Rook1e's blog](https://0x2e.github.io)
[zkqiang's blog](http://zkqiang.cn)
[zkqiang's blog](https://zkqiang.cn)
## 文档
@ -39,32 +39,31 @@
下载后解压到 themes 目录下并重命名为 `fluid`。
#### 2. 必要的配置
#### 2. 必要的配置 :warning: :warning: :warning:
必须修改 Hexo 根目录中的 `_config.yml`，关闭默认的代码高亮
必须如下修改 Hexo 博客目录中的 `_config.yml`：
```yaml
highlight:
enable: false
enable: false # 关闭默认的代码高亮
theme: fluid # 指定主题
language: zh-CN # 指定语言，可不改
```
#### 3. 指定主题
## 功能特性
依然是根目录中的 `_config.yml`，如下修改：
```yaml
# Extensions
theme: fluid
```
## 常见问题
#### 代码高亮异常（比如出现多重行号）
- 没有按快速开始第二步关闭代码高亮
#### 配置无效
- 请检查配置文件是否符合 yml 语法，如冒号后需要有空格，缩进需要 2 个空格等
- [x] 图片懒加载
- [x] 自定义代码高亮方案
- [x] 内置多语言
- [x] 内置多款评论插件
- [x] 外部覆盖配置
- [x] 静态资源配置
- [x] 文章搜索
- [x] 页脚备案信息
- [x] 网页访问统计
- [x] 支持 KaTeX 数学公式
## 贡献者

70
themes/fluid/_config.yml
View File

@ -11,9 +11,9 @@
# 全局
# Site
#---------------------------
favicon: /defect/images/img/favicon.png # 网站标签页的 icon
favicon: /img/favicon.png # 网站标签页的 icon
apple_touch_icon: /defect/images/img/apple-touch-icon.png # 用于苹果设备的 icon
apple_touch_icon: /img/apple-touch-icon.png # 用于苹果设备的 icon
title_join_string: ' ~ ' # 浏览器标签页中的标题分隔符，效果： 文章名 ~ 站点名
@ -21,7 +21,7 @@ force_https: false # 强制所有链接升级为 HTTPS（适用于图片等资
highlight: # 代码高亮
enable: true
theme: tranquil-heart # available: github-v2 | tomorrow | tomorrow-night | tomorrow-night-eighties，更多主题可从 https://jmblog.github.io/color-themes-for-google-code-prettify/ 获取，保存为 `*.min.css` 到 `source/lib/prettify/`，在其中 .prettyprint{ background: ***; ...} 的background 值后加上 !important，例如：.prettyprint{background:#fafbfc!important; ...}
theme: tomorrow-night-eighties # available: github-v2 | tomorrow | tomorrow-night | tomorrow-night-eighties，更多主题可从 https://jmblog.github.io/color-themes-for-google-code-prettify/ 获取，保存为 `*.min.css` 到 `source/lib/prettify/`，在其中 .prettyprint{ background: ***; ...} 的background 值后加上 !important，例如：.prettyprint{background:#fafbfc!important; ...}
fun_features: # 一些好玩的功能
typing: # 为 subtitle 添加打字机效果
@ -34,14 +34,14 @@ fun_features: # 一些好玩的功能
element: h1,h2,h3,h4,h5,h6
placement: right # icon放置的位置： left | right
visible: false # 默认悬浮显示，可选：always（一会显示） | touch（移动端触摸显示）
icon: "❤" # 可选：§ | # | ❡ 等，留空则为默认效果
icon: "" # 可选：§ | # | ❡ 等，留空则为默认效果
mouse_click: # 鼠标点击动效
enable: false
style: values # 目前设置两个值：values（价值观词汇） | love（爱心）
color: # 主体颜色配置，可以从这里寻找启发： https://www.webdesignrankings.com/resources/lolcolors/
body_bg_color: "#eee"
navbar_bg_color: "#9DC8C8"
navbar_bg_color: "#2f4154"
navbar_text_color: "white"
text_color: "#3c4858"
link_color: "#3c4858"
@ -49,7 +49,7 @@ color: # 主体颜色配置，可以从这里寻找启发： https://www.webdes
board_color: "#fff"
web_analytics: # 网页访问统计
enable: false
enable: true
baidu: # 百度统计的Key，参见 https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376 代码获取中 hm.js? 后边的字符串
google: # Google统计的Tracking ID，参见 https://analytics.google.com/analytics/web/
tencent: # 腾讯统计的H5 App id，参见 https://mta.qq.com/h5/manage/ctr_app_manage
@ -79,7 +79,7 @@ navbar:
category: /categories/
tag: /tags/
about: /about/
links: /links/ # 友链页，把前面#去掉即可展示
#links: /links/ # 友链页，把前面#去掉即可展示
search: # 搜索栏
enable: true
@ -93,7 +93,7 @@ scroll_down_arrow: # 向下滚动的箭头
banner_height_limit: 90 # 头图高度不小于指定比例，才显示箭头
scroll_after_turning_page: true # 翻页后自动滚动
banner_scroll: false # 头图是否跟随页面滚动
banner_parallax: true # 头图滚动视差
#---------------------------
@ -102,7 +102,7 @@ banner_scroll: false # 头图是否跟随页面滚动
#---------------------------
footer:
statistics: # 统计网站 PV、UV，使用的是不蒜子，显示在页脚
enable: false
enable: true
pv_format: "总访问量 {} 次" # 显示的文本，{}是数字的占位符（必须包含)，下同
uv_format: "总访客数 {} 人"
@ -122,7 +122,7 @@ scroll_top_arrow: # 向顶部滚动的箭头
# Index Page
#---------------------------
index:
banner_img: /defect/images/img/index.png # 首页 Banner 头图，以下相同
banner_img: /img/default.png # 首页 Banner 头图，以下相同
banner_img_height: 100 # 头图高度，屏幕百分比，available: 0 - 100
slogan: # 首页副标题的独立设置
enable: true # 为 false 则不显示任何内容
@ -141,8 +141,8 @@ index:
# Post Page
#---------------------------
post:
banner_img: /defect/images/img/post.jpg
banner_img_height: 75 # available: 0 - 100
banner_img: /img/default.png
banner_img_height: 70 # available: 0 - 100
meta: # 文章标题下方的信息
date: # 文章日期
enable: true
@ -154,24 +154,24 @@ post:
enable: true
format: "{} 分钟"
views: # 阅读次数，统计基于不蒜子
enable: false
enable: true
format: "{} 次"
toc: # 右侧导航条
enable: true
copyright: # 版权声明
enable: true
content: '<a href="https://zh.wikipedia.org/wiki/Wikipedia:CC_BY-SA_3.0%E5%8D%8F%E8%AE%AE%E6%96%87%E6%9C%AC" rel="nofollow noopener">CC BY-SA 3.0❤</a> '
content: '本博客所有文章除特别声明外，均采用 <a href="https://zh.wikipedia.org/wiki/Wikipedia:CC_BY-SA_3.0%E5%8D%8F%E8%AE%AE%E6%96%87%E6%9C%AC" rel="nofollow noopener">CC BY-SA 3.0协议</a> 。转载请注明出处！'
custom: # 文章底部自定义内容
enable: false
content: '<img src="https://octodex.github.com/images/jetpacktocat.png" class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;">' # 自定义区域，支持 HTML，可自行插入赞赏码、公众号二维码等内容
comments: # 评论
enable: true # 开启评论
enable: false # 开启评论
type: disqus # 指定使用的评论模块 available: disqus | valine | gitalk | utterances | changyan | livere
image_zoom: # 文章图片可点击放大
enable: true
math: # 数学公式，开启之前需要更换 Markdown 渲染器，否则复杂公式会有兼容问题，具体请见 https://fluid-dev.github.io/hexo-fluid-docs/guide/#数学公式
enable: true
specific: true # 开启后，只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
enable: false
specific: false # 开启后，只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
engine: mathjax # 公式引擎 available: mathjax | katex
#---------------------------
@ -192,7 +192,7 @@ utterances:
# Disqus
disqus:
shortname: defectink
shortname: # your shortname
# Gitalk
# You can get yout ClientID and ClientSecret from https://github.com/settings/applications/new
@ -255,8 +255,8 @@ livere:
# Archive Page
#---------------------------
archive:
banner_img: /defect/images/img/Sensei_sakura.png
banner_img_height: 100 # available: 0 - 100
banner_img: /img/default.png
banner_img_height: 80 # available: 0 - 100
#---------------------------
@ -264,7 +264,7 @@ archive:
# Categories Page
#---------------------------
category:
banner_img: /defect/images/img/category.png
banner_img: /img/default.png
banner_img_height: 80 # available: 0 - 100
@ -273,7 +273,7 @@ category:
# Tags Page
#---------------------------
tag:
banner_img: /defect/images/img/tags.png
banner_img: /img/default.png
banner_img_height: 80 # available: 0 - 100
tagcloud: # 标签云
min_font: 15
@ -288,15 +288,15 @@ tag:
# About Page
#---------------------------
about: # 以下仅为页面顶部的基本信息，更多内容请在 ./pages/about.md 中编辑，支持 markdown 和 HTML
md_path: ../../source/about/about.md # 关于页文档的相对路径，可以按相对文档设置主题之外的路径，从而避免更新冲突
banner_img: /defect/images/img/about.jpg
banner_img_height: 100 # available: 0 - 100
avatar: /defect/images/img/avatar.png # 头像
name: Defectink
introduce: '!@#$%^&*' # 支持 HTML
md_path: ./pages/about.md # 关于页文档的相对路径，可以按相对文档设置主题之外的路径，从而避免更新冲突
banner_img: /img/default.png
banner_img_height: 80 # available: 0 - 100
avatar: /img/avatar.png # 头像
name: myname
introduce: info / info / info # 支持 HTML
icons: # 更多图标可从 https://fontawesome.com/v5.10.0/icons?d=gallery 查找，并以 "图标名: url" 的格式添加在下方
"fab fa-github": https://github.com/DefectingCat
"fab fa-twitter": https://twitter.com/Defect___
"fab fa-github": https://github.com
"fab fa-twitter": https://twitter.com
"fab fa-weixin": # 微信图标，这个是特殊图标，点击不会跳转而是悬浮二维码，所以链接需要对应二维码图片地址
@ -305,9 +305,9 @@ about: # 以下仅为页面顶部的基本信息，更多内容请在 ./pages/a
# 404 Page
#---------------------------
page404:
banner_img: /defect/images/img/Sensei_dark.png
banner_img_height: 100 # available: 0 - 100
subtitle: 'Page not found o(*￣▽￣*)ブ'
banner_img: /img/default.png
banner_img_height: 80 # available: 0 - 100
subtitle: 'Page not found'
#---------------------------
@ -315,8 +315,8 @@ page404:
# Links Page
#---------------------------
links:
banner_img: /defect/images/img/friend.jpg
banner_img_height: 100 # available: 0 - 100
banner_img: /img/default.png
banner_img_height: 80 # available: 0 - 100
items:
Fluid Docs: [https://fluid-dev.github.io/hexo-fluid-docs/, 主题使用指南]
Fluid Repo: [https://github.com/fluid-dev/hexo-theme-fluid, 主题 GitHub 仓库]

2
themes/fluid/_static_prefix.yml
View File

@ -25,7 +25,7 @@
internal_js: /js
internal_css: /css
internal_img: /defect/images/img
internal_img: /img
#---------------------------

42
themes/fluid/languages/zh-CN.yml Normal file
View File

@ -0,0 +1,42 @@
search:
title: 搜索
keyword: 关键词
status:
success: v
error: x
postTotal: 共计 %d 篇文章
paginator:
pre: 上一页
next: 下一页
post:
toc: 目录
home:
title: 首页
archive:
title: 归档
subtitle: 归档
tag:
title: 标签
subtitle: 标签
category:
title: 分类
subtitle: 分类
about:
title: 关于
subtitle: 关于
page404:
title: 页面走丢啦~
subtitle: 页面走丢啦~
links:
title: 友链
subtitle: 友情链接

8
themes/fluid/layout/_partial/busuanzi.ejs
View File

@ -2,14 +2,14 @@
<% if (theme.footer.statistics.pv_format) { %>
<!-- 不蒜子统计PV -->
<% var pv_texts = theme.footer.statistics.pv_format.split('{}') %>
&nbsp;<span id="busuanzi_container_site_pv"></span><%= pv_texts[0] %>
<span id="busuanzi_value_site_pv"></span><%= pv_texts[1] %>&nbsp;
&nbsp;<span id="busuanzi_container_site_pv"></span><%- pv_texts[0] %>
<span id="busuanzi_value_site_pv"></span><%- pv_texts[1] %>&nbsp;
<% } %>
<% if (theme.footer.statistics.uv_format) { %>
<!-- 不蒜子统计UV -->
<% var uv_texts = theme.footer.statistics.uv_format.split('{}') %>
&nbsp;<span id="busuanzi_container_site_uv"></span><%= uv_texts[0] %>
<span id="busuanzi_value_site_uv"></span><%= uv_texts[1] %>&nbsp;
&nbsp;<span id="busuanzi_container_site_uv"></span><%- uv_texts[0] %>
<span id="busuanzi_value_site_uv"></span><%- uv_texts[1] %>&nbsp;
<% } %>
<br>
<% } %>

21
themes/fluid/layout/index.ejs
View File

@ -7,33 +7,36 @@ page.banner_img_height = theme.index.banner_img_height
%>
<% page.posts.each(function (post) { %>
<div class="row mb-4 mx-auto">
<div class="row mx-auto index-card">
<% var post_url = url_for(post.path) %>
<% if(post.index_img != null) { %>
<div class="col-12 col-md-4 m-auto">
<a href="<%- post_url %>" target="<%- theme.index.post_url_target %>">
<img src="<%- post.index_img %>" alt="<%= post.title %>" class="img-fluid rounded z-depth-3 index-thumbnails">
<img src="<%- post.index_img %>" alt="<%= post.title %>" class="index-img img-fluid rounded index-thumbnails">
</a>
</div>
<% } %>
<div class="col-12 col-md-8 m-auto">
<div class="col-12 col-md-8 mx-auto index-info">
<a href="<%- post_url %>">
<p class="h4 index-header"><%= post.title %></p>
<% var height_limit = '' %>
</a>
<a href="<%- post_url %>">
<% var height_limit = '', excerpt = '' %>
<% if(post.excerpt.length > 0) { %>
<% var excerpt = strip_html(post.excerpt) + "..." %>
<% var height_limit = 'style="max-height: none;"' %>
<% excerpt = strip_html(post.excerpt) + "..." %>
<% height_limit = 'style="max-height: none;"' %>
<% } else if(theme.index.auto_excerpt.enable){ %>
<% var excerpt = strip_html(post.content).substr(0, 500) %>
<% excerpt = strip_html(post.content).substr(0, 500) %>
<% } else { %>
<% var excerpt = strip_html(post.content) %>
<% excerpt = strip_html(post.content) %>
<% } %>
<div class="index-excerpt" <%- height_limit %>>
<div class="index-text mb-1"><%- excerpt %></div>
</div>
</a>
<div>
<div class="index-btm">
<% if(theme.index.post_meta.date ) { %>
<i class="iconfont icon-riqi2"></i>&nbsp;<%- date(post.date, config.date_format) %>&nbsp;&nbsp;
<% } %>

9
themes/fluid/layout/layout.ejs
View File

@ -12,10 +12,9 @@ var banner_img_height = page.banner_img_height || theme.index.banner_img_height
<body>
<header style="height: <%- banner_img_height %>vh;">
<%- partial('_partial/nav') %>
<div class="view intro-2" id="background"
<div class="view intro-2" id="background" <%- theme.banner_parallax && !is_post() && 'parallax=true' %>
style="background: url('<%- banner_img %>')no-repeat center center;
background-size: cover;
background-attachment: <%- theme.banner_scroll == true ? 'scroll' : 'fixed' %>;">
background-size: cover;">
<div class="full-bg-img">
<div class="mask rgba-black-light flex-center">
<div class="container text-center white-text fadeInUp">
@ -39,7 +38,7 @@ var banner_img_height = page.banner_img_height || theme.index.banner_img_height
<% var wordcount_texts = theme.post.meta.wordcount.format.split('{}') %>
&nbsp;<i class="far fa-chart-bar"></i>
<span class="post-count">
<%= wordcount_texts[0] %><%- wordcount(page.content) %><%= wordcount_texts[1] %>
<%- wordcount_texts[0] %><%- wordcount(page.content) %><%- wordcount_texts[1] %>
</span>&nbsp;
<% } %>
@ -47,7 +46,7 @@ var banner_img_height = page.banner_img_height || theme.index.banner_img_height
<% var min2read_texts = theme.post.meta.min2read.format.split('{}') %>
&nbsp;<i class="far fa-clock"></i>
<span class="post-count">
<%= min2read_texts[0] %><%- min2read(page.content) %><%= min2read_texts[1] %>
<%- min2read_texts[0] %><%- min2read(page.content) %><%- min2read_texts[1] %>
</span>&nbsp;
<% } %>

1
themes/fluid/pages/about.md
View File

@ -1 +0,0 @@
!@#$%^&*

3
themes/fluid/source/css/_custom/custom.styl
View File

@ -2,6 +2,9 @@
//图片
.post-content img
border-radius 0.8rem
transition all .5s
-webkit-transition all .5
-ms-transition all .5
.post-content img:hover
transition: all 0.5s
-webkit-transition: all 0.5s

3
themes/fluid/source/css/_pages/_base/base.styl
View File

@ -312,7 +312,8 @@ a.police-beian
box-shadow none
&:hover
box-shadow: 0 0 25px 0 rgba(0,0,0,0.16);
transition: all 0.3s;
background-color: #ebedef;
z-index 1
&-title

55
themes/fluid/source/css/_pages/_index/index.styl
View File

@ -1,15 +1,24 @@
.index-card
margin-bottom 2rem
.index-img
box-shadow 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15)
.index-info
display: flex
flex-direction: column
justify-content: space-between
.index-header
font-weight 700
white-space nowrap
overflow hidden
text-overflow ellipsis
margin-top .5rem
margin-bottom 0
@media (max-width: 768px)
.index-header
font-size 1.25rem
white-space normal
overflow hidden
margin-top 1.25rem
.index-btm
margin-bottom .5rem
.index-thumbnails
display block
@ -20,8 +29,8 @@
.index-excerpt
margin 0.5rem 0 0.5rem 0
height auto
max-height 5rem
line-height 1.25rem
max-height calc(1.4rem * 3)
line-height 1.4rem
overflow hidden
.index-text
@ -29,25 +38,15 @@
margin-left -0.25rem
width 100%
word-break break-word
display: -webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: 3
&::before
float left
width 0.25rem
content ''
height 2rem
@media (max-width: 768px)
.index-info
padding-top .5rem
// .index-excerpt::after {
// float: right;
// content: "...";
// height: 1rem;
// line-height: 1rem;
// !* 为三个省略号的宽度 *!
// width: 3em;
// !* 使盒子不占位置 *!
// margin-left: -3em;
// !* 移动省略号位置 *!
// position: relative;
// left: 100%;
// top: -1rem;
// padding-right: 0.25rem;
// }
.index-header
font-size 1.25rem
white-space normal
overflow hidden

BIN
themes/fluid/source/img/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
themes/fluid/source/img/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
themes/fluid/source/img/default.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
themes/fluid/source/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
themes/fluid/source/img/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
themes/fluid/source/img/police_beian.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

80
themes/fluid/source/js/main.js
View File

@ -1,28 +1,44 @@
function scrollToElement(target, offset) {
var scroll_offset = $(target).offset();
$("body,html").animate({
$('body,html').animate({
scrollTop: scroll_offset.top + (offset || 0),
easing: 'swing'
})
easing: 'swing',
});
}
function scrollToBoard() {
scrollToElement('#board', -$("#navbar").height());
scrollToElement('#board', -$('#navbar').height());
}
// 防抖动函数
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
$(document).ready(function () {
// 顶部菜单的动效
var navbar = $("#navbar");
var navbar = $('#navbar');
if (navbar.offset().top > 0) {
navbar.addClass("navbar-custom");
navbar.removeClass("navbar-dark");
navbar.addClass('navbar-custom');
navbar.removeClass('navbar-dark');
}
$(window).scroll(function () {
if (navbar.offset().top > 0) {
navbar.addClass("navbar-custom");
navbar.removeClass("navbar-dark");
navbar.addClass('navbar-custom');
navbar.removeClass('navbar-dark');
} else {
navbar.addClass("navbar-dark");
navbar.addClass('navbar-dark');
}
});
$('#navbar-toggler-btn').on('click', function () {
@ -30,11 +46,22 @@ $(document).ready(function () {
$('#navbar').toggleClass('navbar-col-show');
});
// 头图滚动动画
$(window).scroll(function () {
var oVal = $(window).scrollTop() / 3;
$('#background[parallax="true"]').css({
transform: 'translate3d(0,' + oVal + 'px,0)',
'-webkit-transform': 'translate3d(0,' + oVal + 'px,0)',
'-ms-transform': 'translate3d(0,' + oVal + 'px,0)',
'-o-transform': 'translate3d(0,' + oVal + 'px,0)',
});
});
// 向下滚动箭头的点击
$(".scroll-down-bar").on("click", scrollToBoard);
$('.scroll-down-bar').on('click', scrollToBoard);
// 向顶部滚动箭头
var topArrow = $("#scroll-top-button");
var topArrow = $('#scroll-top-button');
var posDisplay = false;
var scrollDisplay = false;
// 位置
@ -44,31 +71,26 @@ $(document).ready(function () {
var right = bodyWidth - boardRight;
posDisplay = right >= 50;
topArrow.css({
"bottom": posDisplay && scrollDisplay ? "20px" : "-60px",
"right": right - 64 + "px"
'bottom': posDisplay && scrollDisplay ? '20px' : '-60px',
'right': right - 64 + 'px',
});
};
setTopArrowPos();
$(window).resize(setTopArrowPos);
// 显示
var headerHeight = $("#board").offset().top;
$(window).scroll(function () {
var headerHeight = $('#board').offset().top;
$(window).scroll(debounce(function () {
var scrollHeight = document.body.scrollTop + document.documentElement.scrollTop;
scrollDisplay = scrollHeight >= headerHeight;
topArrow.css({
"bottom": posDisplay && scrollDisplay ? "20px" : "-60px"
'bottom': posDisplay && scrollDisplay ? '20px' : '-60px',
});
}, 20));
// 点击
topArrow.on('click', function () {
$('body,html').animate({
scrollTop: 0,
easing: 'swing',
});
});
// 点击
topArrow.on("click", function () {
$("body,html").animate({
scrollTop: 0,
easing: 'swing'
})
});
// 因兼容问题，在 iOS 和 Safari 环境下不使用固定 Banner
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || (/Safari/i.test(navigator.userAgent) && !/Chrome/i.test(navigator.userAgent))) {
$("#background").css("background-attachment", "scroll");
}
});