效果:
第一步
安装 Flarum 直链插件:Flagrow Direct Links
该插件可以实现使用 url 链接,打开登陆注册窗口、文本编辑器、标签页等。
第二部
自定义页脚 -> 添加代码
<!-- 底部导航栏 -->
<div class="mobile-app-icon-bar" id="myDIV">
<!-- 将下面的 https://bbs.csur.fun 改成你自己的 FLarum 站点网址 -->
<button onclick="location.href='https://bbs.csur.fun/'" class="buttonstyle"><i class="fa fa-home"></i>
<span class="spanstyle"></span></button>
<button onclick="location.href='https://bbs.csur.fun/tags'" class="buttonstyle"><i class="fas fa-tags"></i>
<span class="spanstyle"></span></button>
<button onclick="location.href='https://bbs.csur.fun/composer'" class="buttonstyle"><i class="fas fa-edit"></i>
<span class="spanstyle"></span></button>
<button onclick="location.href='https://bbs.csur.fun/settings'" class="buttonstyle"><i class="fas fa-user-cog"></i>
<span class="spanstyle"></span></button>
<button onclick="location.href='https://bbs.csur.fun/notifications'" class="buttonstyle"><i class="fas fa-bell"></i>
<span class="spanstyle"></span></button>
</div>
<script>
var btnContainer = document.getElementById("myDIV");
var btns = btnContainer.getElementsByClassName("buttonstyle");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
<script>
function deneme() {
document.querySelector('.IndexPage-newDiscussion').click();
}
</script>
<!-- 底部导航栏 -->
第三步
自定义 CSS -> 添加样式代码
导航控件的背景色是论坛的主色调。跟随主色调的颜色,如果要自定义颜色,请修改第 49 行的 background-color 值。
/* 手机端底部导航栏 */
.DiscussionList:not(.DiscussionList--searchResults) .read .DiscussionListItem-title {
color: #000 !important;
}
.ComposerBody-header h3 {
margin: 0;
line-height: 1.5em;
color: #000 !important;
}
.PollOption-active {
background-color: #49b4e6 !important;
}
@media(max-width: 500px) {
.mobile-app-icon-bar {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
background: none;
position: sticky;
bottom: 0;
width: 100%;
height: 48px;
z-index: 2;
/*border: 1px solid #fff !important;*/
}
/* addthis 上移,如果您的站点同时使用的 addthis 控件,此设置可以防止其挡住导航栏 */
.at-expanding-share-button[data-position=bottom-right] {
bottom: 58px !important;
}
.scroll-up {
bottom: 108px;
}
}
.buttonstyle.active {
color: #fff !important;
}
.buttonstyle {
width: 100%;
height: 100%;
display: block;
flex-direction: column;
align-items: center;
background: @config-primary-color;
color: #ffffff;
border: none;
margin-top: 4px;
}
.spanstyle {
font-size: 10px;
margin-top: 5px;
}
.mobile-app-icon-bar button {
padding: 0.75rem !important;
cursor: pointer;
}
.mobile-app-icon-bar button svg,
.mobile-app-icon-bar button i,
.mobile-app-icon-bar button img {}
@media(min-width: 800px) {
.mobile-app-icon-bar {
display: none !important;
}
}