点击查看更新记录

更新记录

2022-04-15:内测版v0.03

  1. 应洪哥意见,移除时间栏冗余交互。
  2. 移除悬停显示描述功能。拟将来装载在文章内banner处。
  3. 移除了点击跳转回首页。请直接通过顶栏的博客主页按钮返回首页。
  4. 调整了时间翻转效果。由纵向轴换为横向轴。
  5. 调整了整体布局配色。采用了SAO-UI风格配色
  6. 新增了手机端侧栏(可开关)。
  7. 新增了滑动监测,实现自动隐藏。
  8. 简化魔改内容,前置教程缩小范围至iconfont inject。

2022-04-14:内测版v0.02

  1. 采用iconfont图标,整合微调合集内三个魔改方案
  2. 时间栏翻转显示副标题,悬停显示描述
  3. 将悬停描述样式改为SAO-notify
  4. 适配夜间模式配色
  5. 笨蛋贰猹,首页卡片都没扒走,天天在配色上计较。

2022-04-13:内测版v0.01

  1. 重写顶栏菜单UI布局demo
  2. 编写新版样式,初步完成交互逻辑
  3. 调整配色
  4. 修复与原顶栏菜单的样式冲突
  5. 新增和风天气插件
  6. 新增顶栏中央时间
  7. 新增新版顶栏菜单横向滚动监测
  8. 拟采用iconfont图标
点击查看参考教程
参考方向教程原贴
Flex布局参数解释Flex 布局教程:语法篇 - 阮一峰的网络日志
Transition属性实现平滑过渡动画CSS3实现伪类hover离开时平滑过渡效果示例
使用clip-path实现多边形剪裁。不可思议的CSS之clip-path
本站的iconfont引入教程iconfont inject
本站之前针对顶栏菜单做的部分魔改微调糖果屋微调合集
复用洪哥的鼠标滚轮控制横向滚动代码Butterfly魔改:动态分类条,可以根据页面变化而改变的分类列表展示方式
天气插件的申请平台和风天气创建简约版天气插件

写在最前

点击查看店长的碎碎念

顶栏算是目前首页唯二还能看出来是Butterfly的版块了,另一个是侧栏按钮。因为之前的SAO-controller没有达到预期。

原本这篇文章我是打算放到SAO-UI-PLAN里的,但是从写完以后的效果来看,没有特别明显的刀剑神域的风格,想想还是算了吧。

这回的设计灵感来源于手机端的状态栏,我想着把菜单栏选项隐藏,通过下拉拖动之类的操作来处理交互逻辑,在效果上应该会很惊艳。但是考虑到之前写controldot时的经验,拖动的逻辑处理很容易在电脑端出bug,所以在设计之初就放弃了。改用悬停或者点击逻辑(最后发现悬停逻辑交互过于频繁,误触概率也很高,所以采用了点击交互逻辑)

这次的顶栏因为涉及到了#nav的修改,而main.js中,关于原生顶栏的自适应部分是有相关代码的,所以弃用#nav会导致main.js中的部分代码报错。为了保证正常运行,需要手动删除这部分的代码。我不是没想过就像以往一样只修改css样式,但是那样的工作量还不如直接重写。而且凭啥只准jerry对布局id和class动刀子

所以这次的魔改将是目前最劝退的教程。我开始对main.js动刀了,以后要想升级到butterfly最新版对新手就更难了。

另外,因为以前在微调合集里就已经改动过顶栏标题和菜单栏图标,所以这次我也保持着勤俭节约的优良传统,硬是把它们弄进来了。

前置教程

在使用本教程之前,请务必确保您已经完成了前置教程,并且充分理解教程中提到的概念,这将有助于您在接下来的魔改过程中,能够自主更改那些本站特化的内容。对于那些追更糖果屋魔改比较积极的同学来说,这篇看起来应该就不会太吃力

前置教程需要掌握的内容

通过这篇文章,要求读者起码掌握文章副标题显示方案和iconfont的symbol的引入方案,且已经配置了自己的图标库。在微调合集中,请选择动态图标的配置方案。本帖不会再提供静态方案的代码写法。糖果屋微调合集中,对配置文件中menu配置项进行了重写。所以若您没有完成相关改动,将遇到报错。

此篇为夜间模式切换动画和夜间模式按钮的依赖教程。可以不做,但是相对的,顶栏的夜间模式按钮就没有月亮太阳的变换了,当然,没有这种效果的代码我也是不会提供的。

此篇非必要教程,但是对于您调整代码内涉及到的部分本站特化内容会有一定帮助,建议了解了解。

此篇非必要教程,但是对于您自主修改本帖讨论的天气插件的植入会有一定帮助,建议了解了解。

此篇非必要教程,但是对于您自主修改本帖讨论的天气插件的植入会有一定帮助,建议了解了解。

魔改步骤

  1. 请务必确保您已经充分理解了上文提到的前置教程中的内容。
  2. 重写[Blogroot]\themes\butterfly\layout\includes\header\nav.pug,为避免被原生菜单栏的样式影响,class和id都换为了全新的。倒数几行的搜索图标#icon-search-01和手机端展开图标#icon-multi-window-01是用的我自己的图标库,记得换成你的图标。
    #menu-container.menu-container
    .menu-item
    each value, label in theme.menu
    if typeof value !== 'object'
    .menu-item-main
    a.site-page.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])))
    if value.split('||')[1]
    - var icon_value = trim(value.split('||')[1])
    - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
    if icon_value.substring(0,2)=="fa"
    i.fa-fw(class=icon_value + ' ' + anima_value)
    else if icon_value.substring(0,4)=="icon"
    svg.icon(aria-hidden="true" class=anima_value)
    use(xlink:href=`#`+ icon_value)
    span=' '+label
    else
    .menu-item-main.has-child
    .menu-item-parent
    a.site-page.faa-parent.animated-hover(href='javascript:void(0);')
    if label.split('||')[1]
    - var icon_label = trim(label.split('||')[1])
    - var anima_label = label.split('||')[2] ? trim(label.split('||')[2]) : 'faa-tada'
    if icon_label.substring(0,2)=="fa"
    i.fa-fw(class=icon_label + ' ' + anima_label)
    else if icon_label.substring(0,4)=="icon"
    svg.icon(aria-hidden="true" class=anima_label)
    use(xlink:href=`#`+ icon_label)
    span=' '+ trim(label.split('||')[0])
    each val,lab in value
    .menu-item-child
    a.faa-parent.animated-hover.site-page.child(href=url_for(trim(val.split('||')[0])))
    if val.split('||')[1]
    - var icon_val = trim(val.split('||')[1])
    - var anima_val = val.split('||')[2] ? trim(val.split('||')[2]) : 'faa-tada'
    if icon_val.substring(0,2)=="fa"
    i.fa-fw(class=icon_val + ' ' + anima_val)
    else if icon_val.substring(0,4)=="icon"
    svg.icon(aria-hidden="true" class=anima_val)
    use(xlink:href=`#`+ icon_val)
    span=' '+ lab
    .top-bar
    .message-container
    .message-item.message-weather(onclick='btf.scrollToDest(0, 500)')
    #he-plugin-simple.message-weather-box
    .message-item.message-date(onclick='Navvisible()')
    #message-date-box.message-date-box
    - var pagedescr = page.description ? page.description : '欢迎光临糖果屋,愿你有愉快的一天'
    - var subtitle = page.subtitle ? page.subtitle : page.title
    if is_post()
    #message-title-box.message-title-box
    a#site-name(title=pagedescr) #[=subtitle]
    else if is_page()
    #message-title-box.message-title-box
    a#site-name(title=pagedescr) #[=subtitle]
    else
    #message-title-box.message-title-box
    a#site-name(title=pagedescr) #[=config.title]
    .message-item.message-function
    if (theme.algolia_search.enable || theme.local_search.enable)
    #search-button
    a.site-page.social-icon.search.faa-parent.animated-hover
    svg.faa-tada.icon(style="height:25px;width:25px" aria-hidden="true")
    use(xlink:href='#icon-search-01')
    span=' '+_p('search.title')
    a.icon-V.hidden.faa-parent.animated-hover(onclick='switchNightMode()', title=_p('rightside.night_mode_title'))
    svg.faa-tada(width='25', height='25', viewBox='0 0 1024 1024')
    use#modeicon(xlink:href='#icon-moon')
    #toggle-menu
    a.site-page.faa-parent.animated-hover
    svg.faa-tada.icon(style="height:25px;width:25px" aria-hidden="true")
    use(xlink:href='#icon-multi-window-01')
    button.active-button(onclick='Navvisible()')
  3. 新建[Blogroot]\themes\butterfly\source\css\_layout\nav.styl,原生的顶栏内容耦合在head.styl文件里,styl一层套一层的剥离起来太麻烦,担心误删样式,所以干脆新建一个了。
    //default color:
    :root
    --nav-bar-background-color: rgba(249, 249, 249, 0.79)
    --nav-font-color: #494748
    --nav-font-hover-color: #494748
    --nav-button-color: transparent
    --nav-active-button-color: rgba(40, 185, 230, 0.65)
    --nav-menu-background-color: rgba(160,160,160,0.7)
    --nav-menu-item-background-color: rgba(249, 249, 249,0.8)
    --nav-menu-item-font-color: #494748
    --nav-menu-item-hover-background-color: #eda60c
    --nav-menu-item-hover-font-color: #f9f9f9
    [data-theme="dark"]
    --nav-bar-background-color: rgba(66,66,66,0.8)
    --nav-font-color: #f9f9f9
    --nav-font-hover-color: #f9f9f9
    --nav-button-color: rgba(20, 97, 227, 0.65)
    --nav-active-button-color: rgba(249, 246, 14, 0.71)
    --nav-menu-background-color: rgb(66,66,66)
    --nav-menu-item-background-color: rgba(77, 72, 73,0.8)
    --nav-menu-item-font-color: #f9f9f9
    --nav-menu-item-hover-background-color: #cdd0ce
    --nav-menu-item-hover-font-color: #4d4849
    .nav-fixed
    #menu-container
    top: -110px
    transition: all 0.5s
    &.nav-visible
    #menu-container
    top: -60px
    transition: all 0.5s
    .menu-container
    background: transparent
    position: fixed
    z-index: 90
    top: -60px
    left: 0
    height: auto
    width: 100vw
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
    &.active-menu-bar
    top 0px !important
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
    button.active-button
    background var(--nav-active-button-color) !important
    .menu-item
    background: var(--nav-menu-background-color)
    height: 60px
    width 100%
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    text-align: center;
    font-size: 16px
    &::-webkit-scrollbar
    display: none
    .menu-item-main
    font-size: 16px !important;
    display: inline-flex;
    color: var(--nav-menu-item-font-color)
    background: var(--nav-menu-item-background-color)
    width: auto
    min-width: 100px;
    height: 50px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin: 5px 5px;
    clip-path: polygon(3px 0, calc(50% - 5px) 0,50% 0px,calc(50% + 5px) 0 ,calc(100% - 3px) 0, 100% 3px,100% calc(50% - 5px), 100% 50%,100% calc(50% + 5px), 100% calc(100% - 3px), calc(100% - 3px) 100%,calc(50% + 5px) 100%,50% 100%,calc(50% - 5px) 100%,3px 100%, 0 calc(100% - 3px), 0 calc(50% + 5px), 0px 50%,0 calc(50% - 5px),0 3px);
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
    a
    color: var(--nav-menu-item-font-color)
    &:hover
    color: var(--nav-menu-item-hover-font-color)
    background: var(--nav-menu-item-hover-background-color)
    clip-path: polygon(3px 0, calc(50% - 5px) 0,50% 8px,calc(50% + 5px) 0 ,calc(100% - 3px) 0, 100% 3px,100% calc(50% - 5px), calc(100% - 8px) 50%,100% calc(50% + 5px), 100% calc(100% - 3px), calc(100% - 3px) 100%,calc(50% + 5px) 100%,50% calc(100% - 8px),calc(50% - 5px) 100%,3px 100%, 0 calc(100% - 3px), 0 calc(50% + 5px), 8px 50%,0 calc(50% - 5px),0 3px);
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
    a
    color: var(--nav-menu-item-hover-font-color)
    .menu-item-parent
    width: 0
    opacity 0
    color: var(--nav-menu-item-hover-font-color)
    background: var(--nav-menu-item-hover-background-color)
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
    .menu-item-child
    color: var(--nav-menu-item-font-color)
    background: var(--nav-menu-item-background-color)
    width: 100px;
    opacity 1
    pointer-events: inherit;
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
    &.has-child
    &:hover
    background: var(--nav-menu-item-background-color) !important
    .menu-item-parent
    color: var(--nav-menu-item-font-color)
    background: var(--nav-menu-item-background-color)
    opacity: 1
    pointer-events: inherit
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width 100px
    height: 50px;
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
    a
    color: var(--nav-menu-item-font-color)
    .menu-item-child
    color: var(--nav-menu-item-font-color)
    background: var(--nav-menu-item-background-color)
    opacity: 0
    pointer-events: none
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width 0
    height: 50px;
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
    a
    color: var(--nav-menu-item-font-color)
    &:hover
    color: var(--nav-menu-item-font-color)
    background: var(--nav-menu-item-hover-background-color)
    a
    color: var(--nav-menu-item-hover-font-color)



    .top-bar
    background: var(--nav-bar-background-color);
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius 0 0 10px 10px
    .message-container
    display: flex;
    flex-wrap: nowrap;
    height: 50px;
    width: 100%;
    align-items: center;
    flex-direction: row;
    .message-item
    display: inline-flex
    justify-content: center
    height: 50px
    align-items: center;
    .message-weather
    width 25%
    .s-sticker-tmp.module
    color: var(--nav-font-color) !important;
    font-family: 'ZhuZiAYuanJWD' !important;
    .s-sticker-city.module
    color: var(--nav-font-color) !important;
    font-family: 'ZhuZiAYuanJWD' !important;
    .message-date
    width 50%
    .message-date-box
    display: flex;
    align-items: center;
    justify-content: center;
    width 50%
    height: 50px
    position absolute
    background transparent
    transform rotateX(0deg)
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17);
    opacity 1
    font-family: 'UnidreamLED','ZhuZiAYuanJWD';
    font-size: 20px;
    .message-title-box
    display: flex;
    align-items: center;
    justify-content: center;
    width 50%
    height: 50px
    position absolute
    background transparent
    transform rotateX(-180deg)
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17);
    opacity 0
    font-family: 'ZhuZiAYuanJWD';
    font-size: 20px;
    a
    color: var(--nav-font-color)
    &:hover
    color: var(--nav-font-hover-color)
    &:hover
    .message-date-box
    transform rotateX(180deg)
    opacity 0
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17);
    .message-title-box
    transform rotateX(0deg)
    opacity 1
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17);
    .message-function
    justify-content: center;
    width 25%
    a
    display: flex;
    align-items: center;
    #toggle-menu
    display none
    button.active-button
    background: var(--nav-button-color);
    width: 70px;
    height: 10px;
    border-radius: 1px;
    margin: 0px auto;
    border-bottom: 3px solid var(--nav-bar-background-color);
    border-top: 3px solid var(--nav-bar-background-color);
    border-left: 10px solid var(--nav-bar-background-color);
    border-right: 10px solid var(--nav-bar-background-color);
    transform: perspective(0.5em) rotateX(-5deg);
    left: calc(50% - 35px);
    position: absolute;
    &:hover
    background var(--nav-active-button-color) !important
    @media screen and (max-width: 768px)
    .menu-container
    .top-bar
    .message-container
    .message-weather
    .s-sticker-tmp.module
    display none !important
    .s-sticker-city.module
    display none !important;
    if hexo-config('mobile_menu')
    @media screen and (max-width: 768px)
    .menu-container
    .top-bar
    .message-container
    .message-function
    #toggle-menu
    display block !important
  4. 移除main.js中关于原生顶栏的内容。注意本帖是基于butterfly_v4.1.0进行的改动,低版本的内容不做考虑,请自行判断与原生顶栏有关的内容进行删除。



    let blogNameWidth, menusWidth, searchWidth, $nav
    let mobileSidebarOpen = false

    - const adjustMenu = (init) => {
    - if (init) {
    - blogNameWidth = document.getElementById('site-name').offsetWidth
    - const $menusEle = document.querySelectorAll('#menus .menus_item')
    - menusWidth = 0
    - $menusEle.length && $menusEle.forEach(i => { menusWidth += i.offsetWidth })
    - const $searchEle = document.querySelector('#search-button')
    - searchWidth = $searchEle ? $searchEle.offsetWidth : 0
    - $nav = document.getElementById('nav')
    - }
    -
    - let hideMenuIndex = ''
    - if (window.innerWidth < 768) hideMenuIndex = true
    - else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
    -
    - if (hideMenuIndex) {
    - $nav.classList.add('hide-menu')
    - } else {
    - $nav.classList.remove('hide-menu')
    - }
    - }
    -
    - // 初始化header
    - const initAdjust = () => {
    - adjustMenu(true)
    - $nav.classList.add('show')
    - }

    // sidebar menus
    const sidebarFn = {
    open: () => {





    const unRefreshFn = function () {
    window.addEventListener('resize', () => {
    - adjustMenu(false)
    btf.isHidden(document.getElementById('toggle-menu')) && mobileSidebarOpen && sidebarFn.close()
    })





    window.refreshFn = function () {
    - initAdjust()

    if (GLOBAL_CONFIG_SITE.isPost) {
    GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
    GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
  5. 新建[Blogroot]\themes\butterfly\source\js\custom\nav.js
    //鼠标控制横向滚动
    if (document.getElementsByClassName("menu-item")[0]){
    var xscroll = document.getElementsByClassName("menu-item")[0];
    xscroll.addEventListener("mousewheel", function (e) {
    //计算鼠标滚轮滚动的距离
    var v = -e.wheelDelta / 2;
    xscroll.scrollLeft += v;
    //阻止浏览器默认方法
    e.preventDefault();
    }, false);
    }

    // 获取当前时间

    var box = document.getElementById('message-date-box')

    //不足十位补零
    var addZero = val => val < 10 ? '0' + val : val
    //把阿拉伯数字的星期转化为中国汉字的星期 // 星期映射表
    var trans = val => {
    var obj = {
    0: '日',
    1: '一',
    2: '二',
    3: '三',
    4: '四',
    5: '五',
    6: '六'
    }
    return obj[val]
    }
    setTime ()
    //获取时间的方法
    function setTime() {
    var time = new Date();
    // var year = time.getFullYear(); // 获取年
    // var month = time.getMonth() + 1; // 获取月(是从0到11,所以我们要给他加1)
    // var date = time.getDate(); // 获取日
    var hour = time.getHours(); // 获取小时
    var min = time.getMinutes(); // 获取分钟
    var sec = time.getSeconds(); // 获取秒
    var day = time.getDay(); // 获取星期几(0是星期日)


    var value = addZero(hour) +
    ':' + addZero(min) + ":" + addZero(sec) + ' 星期'+ trans(day)
    // 把所有的时间拼接到一起
    box.innerText = value
    // console.log(value)
    // 把拼接好的时间插入到页面

    }
    // 让定时器每间隔一秒就执行一次setTime这个方法(这是实现时钟的核心)
    setInterval(setTime, 1000)


    function Navvisible(){
    var navbar = document.getElementById('menu-container')
    if (navbar) {
    // 首先判断是否存在active类
    if (navbar.className.indexOf('active-menu-bar') > -1){
    // 存在则移除
    navbar.classList.remove('active-menu-bar');
    }
    else{
    // 不存在则先添加
    navbar.classList.add('active-menu-bar');
    }
    }
    }
  6. 本帖还用到了一个天气插件,使用的是和风天气提供的免费插件。请按照网页引导自主完成账号注册,并创建插件。插件完全免费,并且没有流量限制。

    插件名称随意,内容选择温度,城市名称,天气实况。(剩下两个可以选,但是窄屏效果不理想。和风天气自带悬停显示详细面板,不用过于追求全部内容),温度文字颜色选择#000000,城市名文字颜色选择#000000,图标尺寸默认即可,空气质量文字颜色默认即可,背景颜色选择透明。剩余内容全部默认。

    点击生成代码后会看到如下内容,记下WIDGET中最后一行的key,这是你应用的密钥。
    <div id="he-plugin-simple"></div>
    <script>
    WIDGET = {
    "CONFIG": {
    "modules": "012",
    "background": "5",
    "tmpColor": "000000",
    "tmpSize": "16",
    "cityColor": "000000",
    "citySize": "16",
    "aqiColor": "FFFFFF",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "10px 10px 10px 10px",
    "shadow": "0",
    "language": "auto",
    "fixed": "false",
    "vertical": "top",
    "horizontal": "left",
    "key": "3dc0b38fcf984869865c340d2fd33c68"
    }
    }
    </script>
    <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
  7. [Blogroot]\_config.butterfly.yml的inject配置项中引入以下内容,记得将key替换为你自己申请的。
    inject:
    head:
    - <link rel="stylesheet" href="https://widget.heweather.net/simple/static/css/he-simple.css?v=1.4.0" media="defer" onload="this.media='all'">
    bottom:
    - <script async data-pjax src="/js/custom/nav.js"></script>
    - <script>WIDGET = {"CONFIG":{"modules":"012","background":"5","tmpColor":"FFFFFF","tmpSize":"16","cityColor":"FFFFFF","citySize":"16","aqiColor":"FFFFFF","aqiSize":"16","weatherIconSize":"24","alertIconSize":"18","padding":"10px 10px 10px 10px","shadow":"0","language":"auto","fixed":"false","vertical":"top","horizontal":"left","key":"3da94e567f5e4e88baf90f066f0893c2"}}</script> #记得将key替换为你自己申请的。
    - <script defer data-pjax src="https://widget.heweather.net/simple/static/js/he-simple.js?v=1.4.0"></script>
  8. [Blogroot]\_config.butterfly.yml中新增配置项mobile_menu以控制手机端是否需要启用侧栏展开的菜单,事实上本帖设计的方案自适应良好,可以满足手机端的使用。所以我更建议关闭他。请不了解main.js的内容的读者不要盲目删除sidebar.pug相关的内容,main.js中依然有部分代码涉及#toggle-menu版块的监测,盲目删除sidebar.pug会导致新的bug。(当然我自己会剥离所以没关系,我就要删)
      # 完成糖果屋微调合集内容后的菜单示例
    menu:
    博客: / || icon-computer-01 || faa-tada
    时间轴: /archives/ || icon-calendar-01 || faa-tada
    标签: /tags/ || icon-multi-window-01 || faa-tada
    # 分类: /categories/ || fas fa-folder-open || faa-tada
    朋友圈: /fcircle/ || icon-webpage-01 || faa-tada
    友人帐: /link/ || icon-positioning-01 || faa-tada
    留言板: /comments/ || icon-message-01 || faa-tada
    生活|| icon-hourglass-01 || faa-tada:
    相册: /gallery/ || icon-photograph-01 || faa-tada
    追番: /bangumis/ || icon-television-01 || faa-tada
    关于: /about/ || icon-identity-01 || faa-tada
    随便看看: /random/ || icon-coffee-01 || faa-tada

    + mobile_menu: false

  9. 再次确认你已经完成了本帖上文提到的前置教程,若因前置教程未完成或未理解导致的问题,本店概不负责。建议将问题归纳后在评论区提问,方便店长完善教程中的注意事项。