Hexo自定义案例 | Chow Bill's Blog
Zhou-Bill opened this issue · comments
你好,请问你能够写一篇关于如何增加站内搜索功能以及文章阅读量功能的教程吗?
@yellow0102
你好,请问你能够写一篇关于如何增加站内搜索功能以及文章阅读量功能的教程吗?
我已经更新了,另外阅读量 可以 看下这个issue里面自定义有写
非常感谢你这么快就回复我!帮了我很大的忙!但是我在配置时遇到了一些困难,显示
/Users/yellow/myBlog/themes/hexo-theme-Chic-master/layout/_partial/search.ejs:7
<form class="form-search">
<input class="input" placeholder="搜索文章" autocomplete="off" id="<%= name %>-search-input" />
</form>
name is not defined
请问这个问题该如何解决呢?
@yellow0102
非常感谢你这么快就回复我!帮了我很大的忙!但是我在配置时遇到了一些困难,显示/Users/yellow/myBlog/themes/hexo-theme-Chic-master/layout/_partial/search.ejs:7 <form class="form-search"> <input class="input" placeholder="搜索文章" autocomplete="off" id="<%= name %>-search-input" /> </form> name is not defined
请问这个问题该如何解决呢?
请往下看, 这里修改Chic\layout\_partial\header.ejs
,
<header>
<nav class="navbar">
<div class="container">
<div class="navbar-header header-logo"><a href="<%- config.root %>"><%= theme.navname %></a></div>
<div class="menu navbar-right">
<!-- 这里表示的是pc端搜索框 -->
<% var defaultName = 'pc' %>
<%- partial('_partial/search', { name: defaultName }) %>
<% for (var i in theme.nav){ %>
<a class="menu-item" href="<%- url_for(theme.nav[i]) %>"><%= i %></a>
<% } %>
<input id="switch_default" type="checkbox" class="switch_default">
<label for="switch_default" class="toggleBtn"></label>
</div>
</div>
</nav>
<%# mobile %>
<nav class="navbar-mobile" id="nav-mobile">
<div class="container">
<div class="navbar-header">
<div>
<a href="<%- config.root %>"><%= theme.navname %></a><a id="mobile-toggle-theme">· Light</a>
</div>
<div class="navbar-mobile-right">
<% var type = 'mobile' %>
<%- partial('_partial/search', { name: type }) %>
<div class="menu-toggle" onclick="mobileBtn()">☰ 目录</div>
</div>
</div>
<div class="menu" id="mobile-menu">
<% for (var i in theme.nav){ %>
<a class="menu-item" href="<%- url_for(theme.nav[i]) %>"><%= i %></a>
<% } %>
</div>
</div>
</nav>
</header>
请注意注释的代码, name 就是这么传给 Chic/layout/_partial/search.ejs
的,同理移动端也是一样,我这里贴出整个header吧
非常感谢你的耐心指导!bug我已经解决了,是我在head.ejs错误地重复引用了一段代码。谢谢你!
您好,非常感谢这个搜索功能的提供,但是我在安装过程中有点问题,不知如何解决,烦请帮忙看下:
第一步就报错Chic\layout\layout.ejs有问题,但是这个文件我都没动过。
第二个问题,我是按照评论中你们的讨论,在header.ejs解决了在pc和mobile的插入代码,然后在head.ejs尾部加入了这个代码,但是似乎不太行,这里还得提一点,文中提到的“添加搜索框的js, 搜索代码”这串代码是放在header.ejs里面的吗?
<%# search %>
<% if(config.search && config.search.enable){ %>
<%- partial('_plugins/search.ejs') %>
<% } %>
以下是报错:
ERROR D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\layout.ejs:4
2| <html lang="<%= config.language %>">
3| <head>
>> 4| <%- partial('_partial/head',{cache: true}) %>
5| </head>
6| <body>
7| <div class="wrapper">
D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\_partial\head.ejs:64
62|
63| <% if(config.search && config.search.enable){ %>
>> 64| <%- partial('_plugins/search.ejs') %>
65| <% } %>
66|
Partial _plugins/search.ejs does not exist. (in _partial\head.ejs)
@maojinyuan
您好,非常感谢这个搜索功能的提供,但是我在安装过程中有点问题,不知如何解决,烦请帮忙看下:
第一步就报错Chic\layout\layout.ejs有问题,但是这个文件我都没动过。
第二个问题,我是按照评论中你们的讨论,在header.ejs解决了在pc和mobile的插入代码,然后在head.ejs尾部加入了这个代码,但是似乎不太行,这里还得提一点,文中提到的“添加搜索框的js, 搜索代码”这串代码是放在header.ejs里面的吗?<%# search %> <% if(config.search && config.search.enable){ %> <%- partial('_plugins/search.ejs') %> <% } %>
以下是报错:
ERROR D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\layout.ejs:4 2| <html lang="<%= config.language %>"> 3| <head> >> 4| <%- partial('_partial/head',{cache: true}) %> 5| </head> 6| <body> 7| <div class="wrapper"> D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\_partial\head.ejs:64 62| 63| <% if(config.search && config.search.enable){ %> >> 64| <%- partial('_plugins/search.ejs') %> 65| <% } %> 66| Partial _plugins/search.ejs does not exist. (in _partial\head.ejs)
你好,我觉得应该是你没有创建 _plugins/search.ejs
这个就是 添加搜索框的js, 搜索代码
那个js 代码.
@maojinyuan
您好,非常感谢这个搜索功能的提供,但是我在安装过程中有点问题,不知如何解决,烦请帮忙看下:
第一步就报错Chic\layout\layout.ejs有问题,但是这个文件我都没动过。
第二个问题,我是按照评论中你们的讨论,在header.ejs解决了在pc和mobile的插入代码,然后在head.ejs尾部加入了这个代码,但是似乎不太行,这里还得提一点,文中提到的“添加搜索框的js, 搜索代码”这串代码是放在header.ejs里面的吗?<%# search %> <% if(config.search && config.search.enable){ %> <%- partial('_plugins/search.ejs') %> <% } %>
以下是报错:
ERROR D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\layout.ejs:4 2| <html lang="<%= config.language %>"> 3| <head> >> 4| <%- partial('_partial/head',{cache: true}) %> 5| </head> 6| <body> 7| <div class="wrapper"> D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\_partial\head.ejs:64 62| 63| <% if(config.search && config.search.enable){ %> >> 64| <%- partial('_plugins/search.ejs') %> 65| <% } %> 66| Partial _plugins/search.ejs does not exist. (in _partial\head.ejs)
你好,我觉得应该是你没有创建
_plugins/search.ejs
这个就是添加搜索框的js, 搜索代码
那个js 代码.
非常感谢您这么快回复,前面问题得到了解决,但是出来的搜索框似乎不能点击,css样式好像也不对,您看这是哪方面出了问题呢?方便的话还烦请您看下我的blog主页https://maojinyuan.gitee.io/
谢谢~
@maojinyuan
您好,非常感谢这个搜索功能的提供,但是我在安装过程中有点问题,不知如何解决,烦请帮忙看下:
第一步就报错Chic\layout\layout.ejs有问题,但是这个文件我都没动过。
第二个问题,我是按照评论中你们的讨论,在header.ejs解决了在pc和mobile的插入代码,然后在head.ejs尾部加入了这个代码,但是似乎不太行,这里还得提一点,文中提到的“添加搜索框的js, 搜索代码”这串代码是放在header.ejs里面的吗?<%# search %> <% if(config.search && config.search.enable){ %> <%- partial('_plugins/search.ejs') %> <% } %>
以下是报错:
ERROR D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\layout.ejs:4 2| <html lang="<%= config.language %>"> 3| <head> >> 4| <%- partial('_partial/head',{cache: true}) %> 5| </head> 6| <body> 7| <div class="wrapper"> D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\_partial\head.ejs:64 62| 63| <% if(config.search && config.search.enable){ %> >> 64| <%- partial('_plugins/search.ejs') %> 65| <% } %> 66| Partial _plugins/search.ejs does not exist. (in _partial\head.ejs)
你好,我觉得应该是你没有创建
_plugins/search.ejs
这个就是添加搜索框的js, 搜索代码
那个js 代码.非常感谢您这么快回复,前面问题得到了解决,但是出来的搜索框似乎不能点击,css样式好像也不对,您看这是哪方面出了问题呢?方便的话还烦请您看下我的blog主页https://maojinyuan.gitee.io/
谢谢~
的确是我文章写漏了, 没有引用css 样式, 请在 themes\Chic\source\css\style.styl
下引用search.css
@import "_lib/search.css"
, 另外就是那个图片问题,请在root 下的 _config.yml
配置 searchImg: /image/search.png
, 下载图片, 另外 请记得加载jquery
@maojinyuan
您好,非常感谢这个搜索功能的提供,但是我在安装过程中有点问题,不知如何解决,烦请帮忙看下:
第一步就报错Chic\layout\layout.ejs有问题,但是这个文件我都没动过。
第二个问题,我是按照评论中你们的讨论,在header.ejs解决了在pc和mobile的插入代码,然后在head.ejs尾部加入了这个代码,但是似乎不太行,这里还得提一点,文中提到的“添加搜索框的js, 搜索代码”这串代码是放在header.ejs里面的吗?<%# search %> <% if(config.search && config.search.enable){ %> <%- partial('_plugins/search.ejs') %> <% } %>
以下是报错:
ERROR D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\layout.ejs:4 2| <html lang="<%= config.language %>"> 3| <head> >> 4| <%- partial('_partial/head',{cache: true}) %> 5| </head> 6| <body> 7| <div class="wrapper"> D:\1Prpgramme\hexo\blog\blog\themes\Chic\layout\_partial\head.ejs:64 62| 63| <% if(config.search && config.search.enable){ %> >> 64| <%- partial('_plugins/search.ejs') %> 65| <% } %> 66| Partial _plugins/search.ejs does not exist. (in _partial\head.ejs)
你好,我觉得应该是你没有创建
_plugins/search.ejs
这个就是添加搜索框的js, 搜索代码
那个js 代码.非常感谢您这么快回复,前面问题得到了解决,但是出来的搜索框似乎不能点击,css样式好像也不对,您看这是哪方面出了问题呢?方便的话还烦请您看下我的blog主页https://maojinyuan.gitee.io/
谢谢~的确是我文章写漏了, 没有引用css 样式, 请在
themes\Chic\source\css\style.styl
下引用search.css
@import "_lib/search.css"
, 另外就是那个图片问题,请在root 下的_config.yml
配置searchImg: /image/search.png
, 下载图片, 另外 请记得加载jquery
您好,因为我是初学者,不是这块领域的,所以您说的还不是很懂,烦请多多赐教:
”在root下建立了image文件夹,把search.png放进去“的前提下,我在root下_config.yml配置了searchImg: /image/search.png,不管是放在外面,还是插入到search里面,好像都不生效呢?
另外,加载jquery是啥意思?我google了下,似乎我加载了,但是我不确定怎么判断是否加载了,能否教以下呢?
@maojinyuan 是这样的,我刚刚看了你的网站, 我在搜索的时候,提交的时候报了 $ is not define
我确认应该是没有加载到jquery 了, 你可以在主题下面 的 _config.yml
添加jquery,
关于 图片,路径写错了,不好意思, 应该是主题下面的 _config.yml
searchImg: /image/search.png
# scripts loaded in the end of the body
scripts:
- /js/script.js
- /js/tocbot.min.js
- /js/jquery.min.js # 添加jquery
另外 需要修改 menu navbar 的样式Chic\source\css\layout.styl
; 为了让搜索框 还有其他menu 放同一行, 请注意navbar-right;
只需要添加navbar-right就可以了, 我这里直接复制这个 navbar 的样式,可以进行替换
.navbar
height 4rem
line-height 4rem
width 100%
.container
width auto
max-width 1200px
text-align center
margin 0 auto
display flex
justify-content space-between
.navbar-right
display flex
flex-direction row
align-items center
您好,想請您幫我看看我的網站無法搜尋的原因,謝謝您。
您好,想請您幫我看看我的網站無法搜尋的原因,謝謝您。
我觉得你是没有引用jquery. 控制台报错了
您好,想請您幫我看看我的網站無法搜尋的原因,謝謝您。
我觉得你是没有引用jquery. 控制台报错了
謝謝您的快速回覆!!
我發現我沒有將jquery.min.js文件放入/themes/Chic/source/js/,感謝您所指出的錯誤~
同時也謝謝您寫了此篇教學文。
非常感恩。
您好,再次打擾,想請問使用手機打開網站、點下放大鏡搜尋鍵時,我的網站Menu的字會被吃掉,但您的卻不會。想向您詢問我的程式碼可能哪邊出了問題,謝謝您。
您好,再次打擾,想請問使用手機打開網站、點下放大鏡搜尋鍵時,我的網站Menu的字會被吃掉,但您的卻不會。想向您詢問我的程式碼可能哪邊出了問題,謝謝您。
样式问题,明天看一下
修改文件
\Chic\layout\_plugins\search.ejs
修改方法 searchToggle
function searchToggle() {
const width = $(document.body).width()
if(width > 479) {
return;
}
const search = $('.search');
const searchForm = $('.form-search');
const menuToggle = $('.menu-toggle');
const title = $('.navbar-header-title ');
if(!search.hasClass("mobile-search")) {
search.addClass("mobile-search");
menuToggle.addClass("open-search")
title.addClass("mobile-title-hidden")
} else {
search.removeClass("mobile-search");
menuToggle.removeClass("open-search")
// title.css({visibility: 'visible'})
title.removeClass("mobile-title-hidden")
}
}
修改 Chic\source\css\_lib\search.css
样式文件
@media screen and (max-width: 479px) {
/* 此处做了修改 */
.mobile-title-hidden {
transition: all 0.5s;
transform: translateX(-300%);
}
.navbar-mobile-right {
display: flex;
flex-direction: row;
align-items: center;
}
.search .search-btn {
cursor: pointer;
}
.search .form-search {
display: none;
}
.mobile-search {
transition: width 0.3s;
position: absolute;
top: 0px;
left: 0px;
right: 50px;
padding-left: 15px;
background: transparent;
height: 80px;
display: flex;
flex-direction: row;
margin-right: 15px;
box-sizing: border-box;
}
.mobile-search .form-search {
display: block;
flex: 1;
}
.mobile-search .input {
width: 100%;
}
/* 此处做了修改 */
.open-search {
position: absolute;
top: 0;
right: 15px;
}
}
应该就没问题了
@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs
修改方法
searchToggle
function searchToggle() { const width = $(document.body).width() if(width > 479) { return; } const search = $('.search'); const searchForm = $('.form-search'); const menuToggle = $('.menu-toggle'); const title = $('.navbar-header-title '); if(!search.hasClass("mobile-search")) { search.addClass("mobile-search"); menuToggle.addClass("open-search") title.addClass("mobile-title-hidden") } else { search.removeClass("mobile-search"); menuToggle.removeClass("open-search") // title.css({visibility: 'visible'}) title.removeClass("mobile-title-hidden") } }修改
Chic\source\css\_lib\search.css
样式文件@media screen and (max-width: 479px) { /* 此处做了修改 */ .mobile-title-hidden { transition: all 0.5s; transform: translateX(-300%); } .navbar-mobile-right { display: flex; flex-direction: row; align-items: center; } .search .search-btn { cursor: pointer; } .search .form-search { display: none; } .mobile-search { transition: width 0.3s; position: absolute; top: 0px; left: 0px; right: 50px; padding-left: 15px; background: transparent; height: 80px; display: flex; flex-direction: row; margin-right: 15px; box-sizing: border-box; } .mobile-search .form-search { display: block; flex: 1; } .mobile-search .input { width: 100%; } /* 此处做了修改 */ .open-search { position: absolute; top: 0; right: 15px; } }应该就没问题了
@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs
修改方法
searchToggle
function searchToggle() { const width = $(document.body).width() if(width > 479) { return; } const search = $('.search'); const searchForm = $('.form-search'); const menuToggle = $('.menu-toggle'); const title = $('.navbar-header-title '); if(!search.hasClass("mobile-search")) { search.addClass("mobile-search"); menuToggle.addClass("open-search") title.addClass("mobile-title-hidden") } else { search.removeClass("mobile-search"); menuToggle.removeClass("open-search") // title.css({visibility: 'visible'}) title.removeClass("mobile-title-hidden") } }修改
Chic\source\css\_lib\search.css
样式文件@media screen and (max-width: 479px) { /* 此处做了修改 */ .mobile-title-hidden { transition: all 0.5s; transform: translateX(-300%); } .navbar-mobile-right { display: flex; flex-direction: row; align-items: center; } .search .search-btn { cursor: pointer; } .search .form-search { display: none; } .mobile-search { transition: width 0.3s; position: absolute; top: 0px; left: 0px; right: 50px; padding-left: 15px; background: transparent; height: 80px; display: flex; flex-direction: row; margin-right: 15px; box-sizing: border-box; } .mobile-search .form-search { display: block; flex: 1; } .mobile-search .input { width: 100%; } /* 此处做了修改 */ .open-search { position: absolute; top: 0; right: 15px; } }应该就没问题了
感謝您的回覆!!
不好意思打擾您這麼多時間,目前我的問題仍存在著,希望您能再幫助我找到錯誤之處。
有空再回覆我即可,非常感謝您的解答!!!
我的博客也用了这个主题,感觉还不错,不过要吐槽下这个字体。个别中文,比如“关”,还有中文的标点符号,感觉非常丑陋。
@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs
修改方法searchToggle
function searchToggle() { const width = $(document.body).width() if(width > 479) { return; } const search = $('.search'); const searchForm = $('.form-search'); const menuToggle = $('.menu-toggle'); const title = $('.navbar-header-title '); if(!search.hasClass("mobile-search")) { search.addClass("mobile-search"); menuToggle.addClass("open-search") title.addClass("mobile-title-hidden") } else { search.removeClass("mobile-search"); menuToggle.removeClass("open-search") // title.css({visibility: 'visible'}) title.removeClass("mobile-title-hidden") } }修改
Chic\source\css\_lib\search.css
样式文件@media screen and (max-width: 479px) { /* 此处做了修改 */ .mobile-title-hidden { transition: all 0.5s; transform: translateX(-300%); } .navbar-mobile-right { display: flex; flex-direction: row; align-items: center; } .search .search-btn { cursor: pointer; } .search .form-search { display: none; } .mobile-search { transition: width 0.3s; position: absolute; top: 0px; left: 0px; right: 50px; padding-left: 15px; background: transparent; height: 80px; display: flex; flex-direction: row; margin-right: 15px; box-sizing: border-box; } .mobile-search .form-search { display: block; flex: 1; } .mobile-search .input { width: 100%; } /* 此处做了修改 */ .open-search { position: absolute; top: 0; right: 15px; } }应该就没问题了
@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs
修改方法searchToggle
function searchToggle() { const width = $(document.body).width() if(width > 479) { return; } const search = $('.search'); const searchForm = $('.form-search'); const menuToggle = $('.menu-toggle'); const title = $('.navbar-header-title '); if(!search.hasClass("mobile-search")) { search.addClass("mobile-search"); menuToggle.addClass("open-search") title.addClass("mobile-title-hidden") } else { search.removeClass("mobile-search"); menuToggle.removeClass("open-search") // title.css({visibility: 'visible'}) title.removeClass("mobile-title-hidden") } }修改
Chic\source\css\_lib\search.css
样式文件@media screen and (max-width: 479px) { /* 此处做了修改 */ .mobile-title-hidden { transition: all 0.5s; transform: translateX(-300%); } .navbar-mobile-right { display: flex; flex-direction: row; align-items: center; } .search .search-btn { cursor: pointer; } .search .form-search { display: none; } .mobile-search { transition: width 0.3s; position: absolute; top: 0px; left: 0px; right: 50px; padding-left: 15px; background: transparent; height: 80px; display: flex; flex-direction: row; margin-right: 15px; box-sizing: border-box; } .mobile-search .form-search { display: block; flex: 1; } .mobile-search .input { width: 100%; } /* 此处做了修改 */ .open-search { position: absolute; top: 0; right: 15px; } }应该就没问题了
感謝您的回覆!!
不好意思打擾您這麼多時間,目前我的問題仍存在著,希望您能再幫助我找到錯誤之處。
有空再回覆我即可,非常感謝您的解答!!!
太久没搞这个东西,最近太忙,我忘记了,具体做法是用jquery 去操作css 样式
@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs
修改方法searchToggle
function searchToggle() { const width = $(document.body).width() if(width > 479) { return; } const search = $('.search'); const searchForm = $('.form-search'); const menuToggle = $('.menu-toggle'); const title = $('.navbar-header-title '); if(!search.hasClass("mobile-search")) { search.addClass("mobile-search"); menuToggle.addClass("open-search") title.addClass("mobile-title-hidden") } else { search.removeClass("mobile-search"); menuToggle.removeClass("open-search") // title.css({visibility: 'visible'}) title.removeClass("mobile-title-hidden") } }修改
Chic\source\css\_lib\search.css
样式文件@media screen and (max-width: 479px) { /* 此处做了修改 */ .mobile-title-hidden { transition: all 0.5s; transform: translateX(-300%); } .navbar-mobile-right { display: flex; flex-direction: row; align-items: center; } .search .search-btn { cursor: pointer; } .search .form-search { display: none; } .mobile-search { transition: width 0.3s; position: absolute; top: 0px; left: 0px; right: 50px; padding-left: 15px; background: transparent; height: 80px; display: flex; flex-direction: row; margin-right: 15px; box-sizing: border-box; } .mobile-search .form-search { display: block; flex: 1; } .mobile-search .input { width: 100%; } /* 此处做了修改 */ .open-search { position: absolute; top: 0; right: 15px; } }应该就没问题了
@Zhou-Bill
修改文件
\Chic\layout\_plugins\search.ejs
修改方法searchToggle
function searchToggle() { const width = $(document.body).width() if(width > 479) { return; } const search = $('.search'); const searchForm = $('.form-search'); const menuToggle = $('.menu-toggle'); const title = $('.navbar-header-title '); if(!search.hasClass("mobile-search")) { search.addClass("mobile-search"); menuToggle.addClass("open-search") title.addClass("mobile-title-hidden") } else { search.removeClass("mobile-search"); menuToggle.removeClass("open-search") // title.css({visibility: 'visible'}) title.removeClass("mobile-title-hidden") } }修改
Chic\source\css\_lib\search.css
样式文件@media screen and (max-width: 479px) { /* 此处做了修改 */ .mobile-title-hidden { transition: all 0.5s; transform: translateX(-300%); } .navbar-mobile-right { display: flex; flex-direction: row; align-items: center; } .search .search-btn { cursor: pointer; } .search .form-search { display: none; } .mobile-search { transition: width 0.3s; position: absolute; top: 0px; left: 0px; right: 50px; padding-left: 15px; background: transparent; height: 80px; display: flex; flex-direction: row; margin-right: 15px; box-sizing: border-box; } .mobile-search .form-search { display: block; flex: 1; } .mobile-search .input { width: 100%; } /* 此处做了修改 */ .open-search { position: absolute; top: 0; right: 15px; } }应该就没问题了
感謝您的回覆!!
不好意思打擾您這麼多時間,目前我的問題仍存在著,希望您能再幫助我找到錯誤之處。
有空再回覆我即可,非常感謝您的解答!!!太久没搞这个东西,最近太忙,我忘记了,具体做法是用jquery 去操作css 样式
您好,感謝您的幫助,目前我的blog在手機上呈現的畫面有好一些了(Menu不會跑版)!
目前的問題: 當按搜尋時時,Corrine的字不會消失...。
若您有空,再回我就好,非常感謝您的幫忙!!
修改文件
\Chic\layout\_plugins\search.ejs
修改方法
searchToggle
function searchToggle() { const width = $(document.body).width() if(width > 479) { return; } const search = $('.search'); const searchForm = $('.form-search'); const menuToggle = $('.menu-toggle'); const title = $('.navbar-header-title '); if(!search.hasClass("mobile-search")) { search.addClass("mobile-search"); menuToggle.addClass("open-search") title.addClass("mobile-title-hidden") } else { search.removeClass("mobile-search"); menuToggle.removeClass("open-search") // title.css({visibility: 'visible'}) title.removeClass("mobile-title-hidden") } }修改
Chic\source\css\_lib\search.css
样式文件@media screen and (max-width: 479px) { /* 此处做了修改 */ .mobile-title-hidden { transition: all 0.5s; transform: translateX(-300%); } .navbar-mobile-right { display: flex; flex-direction: row; align-items: center; } .search .search-btn { cursor: pointer; } .search .form-search { display: none; } .mobile-search { transition: width 0.3s; position: absolute; top: 0px; left: 0px; right: 50px; padding-left: 15px; background: transparent; height: 80px; display: flex; flex-direction: row; margin-right: 15px; box-sizing: border-box; } .mobile-search .form-search { display: block; flex: 1; } .mobile-search .input { width: 100%; } /* 此处做了修改 */ .open-search { position: absolute; top: 0; right: 15px; } }应该就没问题了
谢谢您的分享。我这边遇到移动端搜索框展开后title不会左移消失的问题,自己已经解决了,写下来供大家参考:
- 您的
\Chic\layout\_plugins\search.ejs
的方法searchToggle
中const title = $('.navbar-header-title ');
末尾多了一个空格 - 还需要在
/Chic/layout/_partial/header.ejs
中的div处加上class="navbar-header-title"
属性:
<div class="navbar-header-title">
<a href="<%- config.root %>"><%= theme.navname %></a><a id="mobile-toggle-theme">· Light</a>
</div>
源码在release 里 @Myoontyee
@Zhou-Bill
谢谢哥哥呜呜