diff --git a/_config.yml b/_config.yml index ac7a61d..d9e3378 100755 --- a/_config.yml +++ b/_config.yml @@ -1,81 +1,29 @@ -##################################### -## Material X ## -## version: 1.0 beta7 ## -## updated: 2018-12-22 ## -##################################### - -# >> 主题配置写法示例 --------------------------------------------------------------------- -# ⚠️ 注意：这里的内容需要复制到主目录到config中才有效，写在这里是为了提供参考 - -# 支持google字体 在这里选好你需要的字体：https://fonts.google.com，然后在_defines.less中修改font_family。 -google_fonts: 'Skranji|Ubuntu' # 多个字体中间用英文竖线隔开 - -# 导航栏，url必须以 "/" 结尾 -nav_menu: - - name: 主页 - icon: fas fa-home - url: https://xaoxuu.com/ - - name: 项目 - icon: fas fa-flask - url: https://xaoxuu.com/projects/ - - name: 博客 - icon: fas fa-rss - url: / - - name: 归档 - icon: fas fa-archive - url: archives/ - - name: 关于 - icon: fas fa-user - url: https://xaoxuu.com/about/ - -# 可以添加自定义侧边栏控件，支持的参数如下： -# widgets: -# - icon: fas fa-bullhorn -# title: 注意啦 -# body: '本站使用 Material X 作为主题，喜欢这个主题的朋友可以阅读文档进行安装哦，超喜欢的话还可以安利给身边的朋友哦～' -# more: # 可选，默认为空 -# icon: fas fa-question-circle # 可选，默认为“fas fa-question-circle” -# url: https://xaoxuu.com/wiki/material-x/ - -# 友链的写法示例 -links: -- name: - avatar: - url: - -# 页脚社交信息的写法示例 -social: - - icon: fas fa-envelope - url: mailto:me@xaoxuu.com - - icon: fab fa-github - url: https://github.com/xaoxuu - - icon: fas fa-music - url: https://music.163.com/#/user/home?id=63035382 - -# 博主信息的写法示例 -avatar: https://xaoxuu.com/assets/img/avatar.jpg -title: 博客名称 -motto: 这是我的座右铭 - -# 百度统计key -baidu_analytics_key: xxx - - -# >> 主题配置 --------------------------------------------------------------------- -# ✅ 这里的内容直接在下面进行修改 +########################################################################## +############################## 主题基本信息 ################################ +theme_info: + name: Material X + version: 1.0-beta10 + docs: https://xaoxuu.com/wiki/material-x/ + # 主题的CDN地址，如果你的源码托管到国内CDN可以更改此链接。如需启用CDN，请在主目录的config中设置import，详见文档。 + cdn: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@18.12.29/ +########################################################################## +# 请务必阅读官方文档！！！ +# 请务必阅读官方文档！！！ +# 请务必阅读官方文档！！！ # style: material # 导航栏和标题栏背景是主题色 style: pure # 导航栏和标题栏背景是白色 + # 右边的小窗口，不想显示哪一项的把enable设置为false即可 widgets: # 博主信息区，是否显示个人头像、格言、社交信息等 author: enable: true avatar: true # 是否显示头像，如果是，需要在主目录的config中写avatar的URL - title: false # 是否显示博客名、头衔等等。如果是，需要在主目录的config中写title - motto: false # 是否显示格言座右铭等等。如果是，需要在主目录的config中写motto + title: true # 是否显示博客名、头衔等等。如果是，需要在主目录的config中写title + motto: true # 是否显示格言座右铭等等。如果是，需要在主目录的config中写motto social: true # 是否显示社交信息（内容同页脚的社交信息）如果是，需要在主目录的config中写social，支持icon和URL # 显示文章分类 categories: @@ -86,7 +34,7 @@ widgets: tagcloud: enable: true icon: fas fa-tags - title: "热门标签" + title: "热门话题" # 显示音乐播放器 music: enable: true @@ -153,6 +101,3 @@ search: # Less less: compress: true - -# 主题的CDN地址 -themecdn: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@18.12.29/ diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs index 0dc0f52..09a0f2f 100755 --- a/layout/_partial/head.ejs +++ b/layout/_partial/head.ejs @@ -53,7 +53,7 @@ <% if (config.import && config.import.style == true) { %> - <%- css(theme.themecdn + 'css/style.css') %> + <%- css(theme.theme_info.cdn + 'css/style.css') %> <% } else if (config.import && config.import.style && config.import.style.length > 0){ %> <%- css(config.import.style) %> <% } else { %> diff --git a/layout/_partial/meta.ejs b/layout/_partial/meta.ejs index 29f9def..f97f065 100644 --- a/layout/_partial/meta.ejs +++ b/layout/_partial/meta.ejs @@ -5,13 +5,13 @@ } %>
<% if((!isPostList && post.music && post.music.enable) || (isPostList && post.music && post.music.enable == true)){ %> +
- <% } %> diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index 159da31..c5c12cb 100755 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -30,7 +30,7 @@ <% if (config.import && config.import.js == true) { %> - <%- js([theme.themecdn + 'js/app.js', theme.themecdn + 'js/search.js']) %> + <%- js([theme.theme_info.cdn + 'js/app.js', theme.theme_info.cdn + 'js/search.js']) %> <% } else if (config.import && config.import.js && config.import.js.length > 0) { %> <%- js(config.import.js) %> <% } else { %> diff --git a/layout/_partial/side.ejs b/layout/_partial/side.ejs index 4c13f3c..1298c80 100755 --- a/layout/_partial/side.ejs +++ b/layout/_partial/side.ejs @@ -1,46 +1,44 @@ -<% if (theme.widgets){ %> - <% if (theme.widgets.author.enable){ %> - <%- partial('../_widget/author') %> - <% } %> - <% if (config.widgets){ %> - <% (config.widgets||[]).forEach(function(item){ %> -
'> - <% if(item.icon && item.title) { %> -
-
  <%= item.title %>
- <% if(item.more && item.more.url) { %> - - - <%} %> -
- <%} %> -
- <% if(item.type == 'list') { %> -
    - <% (item.rows||[]).forEach(function(row){ %> -
  • <%= row.name %>
     - <% }) %> -
- <% } else { %> - <%- item.body %> +<% if (config.widgets){ %> + <% (config.widgets||[]).forEach(function(item){ %> + <% if (item.enable != false){ %> + <% + let widget_name = item.widget ? item.widget : 'plain'; + var needDisplay = true; + if (needDisplay == true && widget_name == 'toc') { + if (page.layout != 'post' || !page.content || page.toc == false || toc(page.content).length == 0) { + needDisplay = false; + } + } + if (needDisplay == true && widget_name == 'music') { + if (page.layout != 'post' || !page.content || page.toc == false || toc(page.content).length == 0) { + needDisplay = false; + } + } + if (needDisplay) { + needDisplay = ((widget_name != 'toc') || (page.layout == 'post' && page.content && page.toc!==false && toc(page.content).length > 0)); + } + %> + <% if (needDisplay){ %> +
'> + <% if (widget_name != 'author'){ %> +
+
  <%- item.title %>
+ <% if (widget_name == 'toc') { %> +
+ <% } else if(item.more && item.more.url) { %> + + <% } %> -
+ + <% } %> +
+ <%- partial('../_widget/' + widget_name, {item: item}) %> +
- <% }) %> - <% } %> - <% if (theme.widgets.categories.enable){ %> - <%- partial('../_widget/categories') %> - <% } %> - <% if (theme.widgets.tagcloud.enable){ %> - <%- partial('../_widget/tagcloud') %> - <% } %> - <% if (theme.widgets.toc.enable){ %> - <%- partial('../_widget/toc') %> - <% } %> - <% if (theme.widgets.music.enable){ %> - <%- partial('../_widget/music') %> - <% } %> - <% if (theme.widgets.links.enable){ %> - <%- partial('../_widget/links') %> + <% } %> <% } %> + <% }) %> <% } %> diff --git a/layout/_widget copy/author.ejs b/layout/_widget copy/author.ejs new file mode 100755 index 0000000..b8af6b8 --- /dev/null +++ b/layout/_widget copy/author.ejs @@ -0,0 +1,28 @@ +<% if(theme.widgets.author.enable != false) { %> +
+ <% if(theme.widgets.author.avatar) { %> +
+ +
+ <%} %> + <% if (theme.widgets.author.title == true || theme.widgets.author.motto == true){ %> +
+ <% if (theme.widgets.author.title == true){ %> +

<%= config.title %>

+ <% } %> + <% if (theme.widgets.author.motto){ %> +

<%= config.motto %>

+ <% } %> +
+ <% } %> + <% if (theme.widgets.author.social == true && config.social){ %> + + <% } %> +
+<% } %> diff --git a/layout/_widget/categories.ejs b/layout/_widget copy/categories.ejs similarity index 100% rename from layout/_widget/categories.ejs rename to layout/_widget copy/categories.ejs diff --git a/layout/_widget/links.ejs b/layout/_widget copy/links.ejs similarity index 100% rename from layout/_widget/links.ejs rename to layout/_widget copy/links.ejs diff --git a/layout/_widget copy/music.ejs b/layout/_widget copy/music.ejs new file mode 100755 index 0000000..a35ebf1 --- /dev/null +++ b/layout/_widget copy/music.ejs @@ -0,0 +1,59 @@ +<% +var needDisplay = false; +if (theme.widgets.music && theme.widgets.music.display) { + let display = theme.widgets.music.display; + if (page.layout == 'page') { + if (display.page != false) { + needDisplay = true; + } + } else if (page.layout == 'post') { + if (display.post != false && (!page.music || page.music.enable == false)) { + needDisplay = true; + } + } else if (page.layout == 'links') { + if (display.links != false) { + needDisplay = true; + } + } else { + if (is_home()) { + if (display.home != false) { + needDisplay = true; + } + } else if (is_tag()) { + if (display.tag != false) { + needDisplay = true; + } + } else if (is_category()) { + if (display.category != false) { + needDisplay = true; + } + } else if (is_archive()) { + if (display.archive != false) { + needDisplay = true; + } + } else { + needDisplay = true; + } + } +} +%> + +<% if (needDisplay == true) { %> +
+
+
  <%= theme.widgets.music.title %>
+ +
+
+
+
+
+ + + +<% } %> diff --git a/layout/_widget copy/tagcloud.ejs b/layout/_widget copy/tagcloud.ejs new file mode 100755 index 0000000..a359357 --- /dev/null +++ b/layout/_widget copy/tagcloud.ejs @@ -0,0 +1,16 @@ +<% if (site.tags.length){ %> +
+
+
  <%= theme.widgets.tagcloud.title %>
+
+
+ <%- tagcloud(site.tags, { + min_font: 14, + max_font: 24, + color: true, + start_color: '#999', + end_color: '#555', + }) %> +
+
+<% } %> diff --git a/layout/_widget copy/toc.ejs b/layout/_widget copy/toc.ejs new file mode 100755 index 0000000..6d8961b --- /dev/null +++ b/layout/_widget copy/toc.ejs @@ -0,0 +1,11 @@ +<% if(page.layout == 'post' && page.content && page.toc!==false && toc(page.content).length > 0){ %> +
+
+
  <%= theme.widgets.toc.title %>
+
+
+
+ <%- toc(page.content, {list_number: false}) %> +
+
+<% } %> diff --git a/layout/_widget/author.ejs b/layout/_widget/author.ejs index b8af6b8..b3eb8f8 100755 --- a/layout/_widget/author.ejs +++ b/layout/_widget/author.ejs @@ -1,28 +1,24 @@ -<% if(theme.widgets.author.enable != false) { %> -
- <% if(theme.widgets.author.avatar) { %> -
- -
- <%} %> - <% if (theme.widgets.author.title == true || theme.widgets.author.motto == true){ %> -
- <% if (theme.widgets.author.title == true){ %> -

<%= config.title %>

- <% } %> - <% if (theme.widgets.author.motto){ %> -

<%= config.motto %>

- <% } %> -
+<% if(item.avatar) { %> +
+ +
+<%} %> +<% if (item.title || item.body) { %> +
+ <% if (item.title){ %> +

<%- item.title %>

<% } %> - <% if (theme.widgets.author.social == true && config.social){ %> - + <% if (item.body){ %> + <%- markdown(item.body) %> <% } %> -
+ +<% } %> +<% if (item.social == true && config.social) { %> +
+ <% (config.social||[]).forEach(function(value){ %> + <% if (value.url && value.icon) { %> + + <%}%> + <%})%> +
<% } %> diff --git a/layout/_widget/category.ejs b/layout/_widget/category.ejs new file mode 100755 index 0000000..1c3e21c --- /dev/null +++ b/layout/_widget/category.ejs @@ -0,0 +1,7 @@ +<% if (site.categories.length){ %> + +<% } %> diff --git a/layout/_widget/list.ejs b/layout/_widget/list.ejs new file mode 100755 index 0000000..25a217f --- /dev/null +++ b/layout/_widget/list.ejs @@ -0,0 +1,19 @@ + diff --git a/layout/_widget/music.ejs b/layout/_widget/music.ejs index a35ebf1..ab8fd74 100755 --- a/layout/_widget/music.ejs +++ b/layout/_widget/music.ejs @@ -39,21 +39,14 @@ if (theme.widgets.music && theme.widgets.music.display) { %> <% if (needDisplay == true) { %> -
-
-
  <%= theme.widgets.music.title %>
- -
-
-
-
-
+
+
<% } %> diff --git a/layout/_widget/plain.ejs b/layout/_widget/plain.ejs new file mode 100755 index 0000000..1ea86cc --- /dev/null +++ b/layout/_widget/plain.ejs @@ -0,0 +1 @@ +<%- markdown(item.body) %> diff --git a/layout/_widget/tagcloud.ejs b/layout/_widget/tagcloud.ejs index a359357..0a65f3b 100755 --- a/layout/_widget/tagcloud.ejs +++ b/layout/_widget/tagcloud.ejs @@ -1,16 +1,7 @@ -<% if (site.tags.length){ %> -
-
-
  <%= theme.widgets.tagcloud.title %>
-
-
- <%- tagcloud(site.tags, { - min_font: 14, - max_font: 24, - color: true, - start_color: '#999', - end_color: '#555', - }) %> -
-
-<% } %> +<%- tagcloud(site.tags, { + min_font: 14, + max_font: 24, + color: true, + start_color: '#999', + end_color: '#555', +}) %> diff --git a/layout/_widget/toc.ejs b/layout/_widget/toc.ejs index 6d8961b..4f7ec84 100755 --- a/layout/_widget/toc.ejs +++ b/layout/_widget/toc.ejs @@ -1,11 +1,5 @@ <% if(page.layout == 'post' && page.content && page.toc!==false && toc(page.content).length > 0){ %> -
-
-
  <%= theme.widgets.toc.title %>
-
-
-
- <%- toc(page.content, {list_number: false}) %> -
-
+
+ <%- toc(page.content, {list_number: false}) %> +
<% } %> diff --git a/source/js/app.js b/source/js/app.js index 9b432c3..31264bd 100755 --- a/source/js/app.js +++ b/source/js/app.js @@ -68,6 +68,11 @@ var customSearch; page = page[0]; idname = idname.split(page)[0]; } + var index = idname.match(/index.html/); + if (index) { + index = index[0]; + idname = idname.split(index)[0]; + } $active_link = $('#' + idname, $headerMenu); setUnderline($active_link); } diff --git a/source/less/_toc.less b/source/less/_toc.less index 8e18d99..23c3308 100755 --- a/source/less/_toc.less +++ b/source/less/_toc.less @@ -8,7 +8,7 @@ // max-height: ~"calc(100% - 2 * @{gap} - @{height_navbar})"; // max-height: 600px; .enable-trans(); - .header{ + header{ position: sticky; width: 100%; top: 0; @@ -37,7 +37,7 @@ &.active{ position: fixed; box-shadow: @boxshadow_card_raised; - .header{ + header{ .s-toc{ transform: rotate(30deg); } diff --git a/source/less/_widget.less b/source/less/_widget.less index 06d13c6..33507d2 100755 --- a/source/less/_widget.less +++ b/source/less/_widget.less @@ -32,7 +32,7 @@ } } max-height: ~"calc(100% - @{height_navbar} - 4 * @{gap})"; - .header{ + header{ display: flex; justify-content: space-between; border-top-left-radius: @border_radius; @@ -48,8 +48,12 @@ .rightBtn{ color: @color_text_in_header; &:hover { - color: darken(@color_text_highlight, 25%); + color: darken(@color_text_highlight, 25%); + &.rotate90{ + transform: rotate(90deg); + } } + } &.pure{ background-color: @theme_cardbg; @@ -80,12 +84,12 @@ .name{ flex:auto; &:extend(.txt-ellipsis); - color: fade(@color_text_main,70%); + color: fade(@color_text_main, 80%); } .badge{ flex:none; font-size: @fontsize_small; - color: fade(@color_text_main, 50%); + color: fade(@color_text_main, 70%); } &:hover{ border-left: 4px solid @theme_main; @@ -99,75 +103,72 @@ &.author{ - .enable-trans(); + .enable-trans(); + .content{ + padding: 0; + .avatar{ + padding: 0; + margin: 0; + display: flex; + justify-content: center; + background-color: transparent; + @media(max-width: @on_pad){ + padding: @gap/2; + } + width: @width_sidebar; + height: @width_sidebar; + @media(max-width: @on_laptop) { + width: @width_sidebar_m; + height: @width_sidebar_m; + } + @media(max-width: @on_pad){ + width: 80px; + height: 80px; + border-radius: 100%; + margin-top: @gap/2; + } + border-top-left-radius: @border_radius; + border-top-right-radius: @border_radius; + } h2{ - text-align: center; - // color: @color_text_header; + text-align: center; + font-weight: bold; + margin: @gap/2; + @media(max-width: @on_pad){ + margin: @gap/2; + } } - .header{ - padding: 0; - margin: 0; - display: flex; - justify-content: center; - background-color: transparent; - @media(max-width: @on_pad){ - padding: @gap/2; - } + p{ + font-size: @fontsize_base; + text-align: center; + margin: @gap/2 @gap/2 0 @gap/2; + empty-cells: hide; } - img{ - width: @width_sidebar; - height: @width_sidebar; - @media(max-width: @on_laptop) { - width: @width_sidebar_m; - height: @width_sidebar_m; + .social-wrapper{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: 4px @gap/2; + a{ + color: fade(@color_text_main, 70%); + .enable-trans(); + &:hover{ + color: @color_text_highlight; } - @media(max-width: @on_pad){ - width: 80px; - height: 80px; - border-radius: 100%; - margin-top: @gap/2; + &.social { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; + margin: 4px; + border-radius: 100px; + &:hover { + background: fade(@theme_main, 10%); + color: @theme_main; + } } - border-top-left-radius: @border_radius; - border-top-right-radius: @border_radius; - } - .content{ - p{ - font-size: @fontsize_base; - text-align: center; } - text-align: center; - font-weight: bold; - padding-bottom: 0; - padding: @gap/2 @gap 0 @gap; - @media(max-width: @on_pad){ - padding: @gap/2 @gap; - } - } - .social-wrapper{ - display: flex; - justify-content: space-between; - flex-wrap: wrap; - padding: 4px @gap/2; - a { - color: fade(@color_text_main, 70%); - .enable-trans(); - &:hover { - color: @color_text_highlight; - } - &.social { - display: flex; - justify-content: center; - align-items: center; - width: 32px; - height: 32px; - margin: 4px; - border-radius: 100px; - &:hover { - background: fade(@theme_main, 10%); - color: @theme_main; - } - } - } } @media(max-width: @on_pad){ box-shadow: none; @@ -176,59 +177,74 @@ justify-content: center; } } + } } + &.plain{ + .content{ + font-size: @fontsize_small; + font-weight: bold; + word-break: break-all; + padding: @gap/2 @gap; + line-height: @fontsize_small + 8px; + &.pure{ + padding: 0 @gap @gap @gap; // 适合白色导航栏背景 + } + a{ + color: @color_text_link; + .enable-trans(); + &:hover { + color: @color_text_highlight; + text-decoration: underline; + } + &:active { + color: darken(@color_text_highlight, 25%); + } + } + } + } - &.mywidget{ + &.list{ .content{ + padding: @gap/2 0; + &.pure{ + padding-top: 0; // 适合白色导航栏背景 + } + a{ font-size: @fontsize_small; font-weight: bold; - word-break: break-all; - padding: @gap/2 @gap; - line-height: @fontsize_small + 8px; - &.pure{ - padding: 0 @gap @gap @gap; // 适合白色导航栏背景 + &:hover{ + text-decoration: none; } - a{ - color: @color_text_link; - .enable-trans(); - &:hover { - color: @color_text_highlight; - text-decoration: underline; - } - &:active { - color: darken(@color_text_highlight, 25%); - } + i{ + color: fade(@color_text_main,70%); + line-height: @height_cell; + margin-right: 3px; } - } - &#list{ - .content{ - padding: @gap/2 0; - &.pure{ - padding-top: 0; // 适合白色导航栏背景 - } - a{ - &:hover{ - text-decoration: none; - } - i{ - color: fade(@color_text_main,70%); - line-height: @height_cell; - margin-right: 8px; - } + img{ + display: inline; + vertical-align: middle; + height: 18px; + width: 18px; + margin-bottom: 4px; + &#round{ + border-radius: 100%; } + } } + } } - - &.categories{ - .content{ - padding: @gap/2 0; - &.pure{ - padding-top: 0; // 适合白色导航栏背景 - } + &.category{ + .content{ + padding: @gap/2 0; + font-size: @fontsize_small; + font-weight: bold; + &.pure{ + padding-top: 0; // 适合白色导航栏背景 } + } } &.tagcloud{ @@ -251,7 +267,7 @@ } &.music{ - .header{ + header{ &.pure{ padding-bottom: @gap/4; // 适合白色导航栏背景 } @@ -270,7 +286,7 @@ &.links{ - .header{ + header{ .rightBtn{ &:hover{ transform: rotate(90deg);