蹭Github服务器部署Hexo

跟着安知鱼的教程一步步搭建

安装环境node.js和git等
安装Hexo
安装butterfly
用Github Pages部署 - 2023.7.22更新 -

魔改butterfly源码

首页index

前言

首先需要分析把握butterfly主题的文件结构：

我们发现它的 文章页 及首页是一起构建的themes\butterfly\layout\includes\layout.pug
在layout.pug中引入了themes\butterfly\layout\includes\header\index.pug构建了头图top_img
然后又在该 index.pug中构建了导航栏themes\butterfly\layout\includes\header\nav.pug

- 2023.7.22更新 -

导航栏nav魔改

怎么好看怎么来！🥰

导航栏居中

点击查看内容

参考了 Leonus的教程，包括导航栏子菜单的横向也改了，
子菜单的横向居中是肉眼微调的：

#nav .menus_items .menus_item:hover .menus_item_child {
    display: flex;
    right: auto;
    left: -108px !important; /*水平居中用，微调*/
    padding: 6px 4px;
    box-sizing: content-box;
    line-height: 35px;
}

添加自定义css和js文件的教程很多

- 2023.7.22更新 -

导航栏的滚动自适应收展

点击查看内容

主要是看到别人的博客用起来很舒适，给自己也整一个

我们找到这个功能被写在了themes\butterfly\source\js\main.js，所以直接改这里面的源码

我们找到这段代码，

const scrollTask = btf.throttle(() => {
  const currentTop = window.scrollY || document.documentElement.scrollTop
  const isDown = scrollDirection(currentTop)
  if (currentTop > 56) {
    if (isDown) {
      if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
      if (isChatBtn && isChatShow === true) {
        window.chatBtn.hide()
        isChatShow = false
      }
    } else {
      if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
      if (isChatBtn && isChatShow === false) {
        window.chatBtn.show()
        isChatShow = true
      }
    }
    $header.classList.add('nav-fixed')
    if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
      $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
    }
  } else {
    if (currentTop === 0) {
      $header.classList.remove('nav-fixed', 'nav-visible')
    }
    $rightside.style.cssText = "opacity: ''; transform: ''"
  }

  isShowPercent && rightsideScrollPercent(currentTop)

  if (document.body.scrollHeight <= innerHeight) {
    $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
  }
}, 200)

它实现的逻辑可以归纳为：

获取当前页面滚动的距离( currentTop )
根据滚动的方向判断( isDown )
如果滚动距离大于 56 像素：
- 如果是向下滚动，并且导航栏具有类名 nav-visible，则移除该类名
- 如果存在聊天按钮并且聊天按钮显示为 true，则隐藏聊天按钮
- 如果是向上滚动，并且导航栏不具有类名 nav-visible，则添加该类名
- 如果存在聊天按钮并且聊天按钮显示为 false，则显示聊天按钮
- 给导航栏添加类名 nav-fixed
- 如果右侧按钮的透明度为 0，则设置透明度为 0.8，水平平移 -58 像素
如果滚动距离小于等于 56 像素：
- 如果滚动距离为 0（即在页面顶部），则移除导航栏的类名 nav-fixed 和 nav-visible
- 重置右侧按钮的样式
如果启用了显示百分比的功能，则调用 rightsideScrollPercent 函数
如果页面内容高度小于窗口高度，则设置右侧按钮的样式为透明度 0.8，水平平移 -58 像素

看得出导航栏nav的效果实现跟两个因素有关nav-visible和nav-fixed；回想一下butterfly原主题 导航栏nav的效果是：

向下滚动	向上滚动	到达顶部
收纳	展开	先展开再变透明
remove(‘nav-visible‘)	add(‘nav-visible‘)	remove(‘nav-fixed‘, ‘nav-visible‘)

而我只想要页面改成：

向下滚动	向上滚动	到达顶部
展开	展开	收纳
add(‘nav-visible‘)	add(‘nav-visible‘)	remove(‘nav-visible‘)

故我们的代码可以这么改：

const scrollTask = btf.throttle(() => {
      const currentTop = window.scrollY || document.documentElement.scrollTop
      const isDown = scrollDirection(currentTop)
      if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
      $nav.classList.add('show')
      if (currentTop > 56) {
        if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
        if (isDown) {
          if (isChatBtn && isChatShow === true) {
            window.chatBtn.hide()
            isChatShow = false
          }
        } 
        else {
          // if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
          if (isChatBtn && isChatShow === false) {
            window.chatBtn.show()
            isChatShow = true
          }
        }
        $header.classList.add('nav-fixed')
        if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
          $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
        }
      } else {
        if (currentTop === 0) {
          $header.classList.remove('nav-visible')
        }
        $rightside.style.cssText = "opacity: ''; transform: ''"
      }

      isShowPercent && rightsideScrollPercent(currentTop)

      if (document.body.scrollHeight <= innerHeight) {
        $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
      }
    }, 200)

值得一提的是，上述代码中在remove('nav-visible')后我多加了一句$nav.classList.add('show')，这是因为每次页面刷新后，header会初始化成原主题的效果，~~我找半天没找到写哪儿的~~，干脆把nav初始化的逻辑放后面，这样就避免了这个问题，~~其实没有完全避免，nav只是变透明了而已，不会有人发现吧~~
因此我们还需要多做一步改动，

这个功能依然是在themes\butterfly\source\js\main.js里的，所以继续改里面的源码

// 初始化header
const initAdjust = () => {
  adjustMenu(true)
  // $nav.classList.add('show') // <—— 注释掉

如果你想关掉butterfly主题的导航栏，想自己写一个新的，可以考虑直接注释掉$nav.classList.add('show')

你懂了吗？🤗- The End -

- 2023.7.22更新 -

移动端的导航栏

点击查看内容

导航栏2

这部分是在themes\butterfly\layout\includes\sidebar.pug里的

因为它的源码结构很标准，一眼看懂，我就不多说了，
有一点值得注意，如果你想跟我一样改掉那个“小剪刀”，需要修改.deploy_git\css\index.css里hr的content部分，修改成icon对应的Unicode码：

.search-dialog hr:before {
    position: absolute;
    top: -7.5px;
    left: 5%;
    z-index: 1;
    color: var(--hr-before-color);
    content: '\f0c4';    /*<—— 就是这里*/
    font-size: 15px;
    line-height: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

- 2023.7.22更新 -

Algolia搜索配置（不用了）

点击查看内容

跟着Algolia官方文档走一遍

API Keys在设置里

值得一提的是，我在配置好_config.yml后，执行hexo algolia报错: Please set an HEXO_ALGOLIA_INDEXING_KEY environment variable to enable content indexing.
解决方法很简单，就自己添加一个环境变量，详见猿宵的文章

配置好后，稍微改一下样式：
这部分的文件在themes\butterfly\layout\includes\third-party\search\algolia.pug，但我只改一部分css和js；
比如修改了页码的颜色，

修改的文件是themes\butterfly\source\css\_search\algolia.styl

.ais-Pagination-item--selected
  a
    background: #954e3e//$theme-paginator-color
    color: #eee
    cursor: default

再比如去掉了搜索结果会显示最下面的分隔线，

修改的文件是themes\butterfly\source\js\search\algolia.js

const stats = instantsearch.widgets.stats({
  container: '#algolia-info > .algolia-stats',
  templates: {
    text: function (data) {
      const stats = GLOBAL_CONFIG.algolia.languages.hits_stats
        .replace(/\$\{hits}/, data.nbHits)
        .replace(/\$\{time}/, data.processingTimeMS)
      return (
        // `<hr>${stats}`
        `${stats}`
      )
    }
  }
})

再比如修改了中间分隔线hr的配色，

修改的文件是themes\butterfly\source\css\_search\index.styl

hr
  margin: 20px auto
  background-color: #954e3e; //<—— 添加了这句覆盖原有颜色
  @extend .custom-hr

至于分隔线上面的hr:before元素，我直接在以前新建的css文件中添了句话：

修改的文件是themes\butterfly\source\css\nav.css

1
2
3

  .search-dialog hr:before {
    color: #954e3e;
}

- 2023.7.30更新 -

本地搜索配置

点击查看内容

在butterfly的.yml里配置一下即可

# Local search
local_search:
  enable: true
  # Preload the search data when the page loads.
  preload: false
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 6
  # Unescape html strings to the readable one.
  unescape: true
  CDN:

然后把样式改成跟Algolia一样的，有些已经在配置Algolia时改过了，以下是其中没涉及的：

修改的文件是themes\butterfly\source\js\search\local-search.js

const inputEventFunction = () => {
    if (!localSearch.isfetched) return
    const searchText = input.value.trim().toLowerCase()
    if (searchText !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
    const keywords = searchText.split(/[-\s]+/)
    const container = document.getElementById('local-search-results')
    let resultItems = []
    if (searchText.length > 0) {
    // Perform local searching
      resultItems = localSearch.getResultItems(keywords)
    }
    if (keywords.length === 1 && keywords[0] === '') {
      container.classList.add('no-result')
      container.textContent = ''
    } else if (resultItems.length === 0) {
      container.textContent = ''
      statsItem.innerHTML = `<div class="search-result-stats">${languages.hits_empty.replace(/\$\{query}/, searchText)}</div>`
    } else {
      resultItems.sort((left, right) => {
        if (left.includedCount !== right.includedCount) {
          return right.includedCount - left.includedCount
        } else if (left.hitCount !== right.hitCount) {
          return right.hitCount - left.hitCount
        }
        return right.id - left.id
      })

      const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length)

      container.classList.remove('no-result')
      container.innerHTML = `<div class="search-result-list">${resultItems.map(result => result.item).join('')}</div>`
      // statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
      statsItem.innerHTML = `<div class="search-result-stats">${stats}</div>` // <—— 改了这句
      window.pjax && window.pjax.refresh(container)
    }

    $loadingStatus.textContent = ''
  }

以及把标题从“搜索”改成了“站内搜索”：

修改的文件是themes\butterfly\layout\includes\third-party\search\local-search.pug

#local-search
  .search-dialog
    nav.search-nav
+     span.search-dialog-title= _p('站内搜索')
-     span.search-dialog-title= _p('search.title')
      span#loading-status

- 2023.8.1更新 -

头图top_img魔改

鬼知道这个效果花了我多少心思😭——2023.7.22
回头看发现没必要这么麻烦😅👆——2024.6.19

封面图

背景图的处理

点击查看内容

我主要是修改了一点css样式，比如：

头图的样式在themes\butterfly\source\css\_layout\head.styl

#page-header
    position: relative
    width: 100%
    background-color: $sidebar-background  //$light-blue
    background-position: center 0 //center center
    background-size: cover
    background-repeat: no-repeat
    transition: all .5s

1
2
3

&.full_page
  height: $index_top_img_height
  // background-attachment: fixed

上面提到的$index_top_img_height是`themes\butterfly\source\css\var.styl`里的，我修改了它的值为**43vw**

1	`$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 43vw //100vh`

除此之外，我还删掉了标题、副标题等的显示：

修改的文件是themes\butterfly\layout\includes\header\index.pug，前言有提及

- 以上省略
  if is_post()
        include ./post-info.pug
-       #site-info
-         h1#site-title=site_title
-         if theme.subtitle.enable
-           - var loadSubJs = true
-           #site-subtitle
-             span#subtitle
-       if(theme.social)
-         #site_social_icons
-           !=partial('includes/header/social', {}, {cache: true})
-       #scroll-down
-         i.fa-solid.fa-ghost.scroll-down-effects
-       i.fas.fa-angle-down.scroll-down-effects
  else
      #page-site-info
        h1#site-title=site_title

- 2023.8.1更新 -

四个选项的处理

点击查看内容

CSS样式处理一下就行，主要是用vw单位去定位

新建一个pug文件让我的图片使用这个效果，建议themes\butterfly\layout\includes\header\top.pug

+ #resume
+  a(href="https://space.bilibili.com/20158061")
+    img(src="/img/简介0.png", alt="resume", style="width: 9vw")
+ #works
+  a(href="https://space.bilibili.com/20158061")
+    img(src="/img/作品0.png", alt="works", style="width: 6vw")
+ #articles
+  a(href="/")
+    img(src="/img/文章0.png", alt="articles", style="width: 6vw")
+ #contact
+  a(href="https://space.bilibili.com/20158061")
+    img(src="/img/联系0.png", alt="contact", style="width: 9vw")

再新建一个css文件来规范4张图片的排版，建议themes\butterfly\source\css\top.css，很多参数都需要微调，

#resume {
    position: absolute;
    left: 21vw;
    top: 10vw;
}

#works {
    position: absolute;
    left: 73vw;
    top: 10vw;
}

#articles {
    position: absolute;
    left: 27vw;
    top: 27.5vw;
}

#contact {
    position: absolute;
    left: 62vw;
    top: 29vw;
}

#resume img:hover {
    content: url('/img/简介1.png');
}

#works img:hover {
    content: url('/img/作品1.png');
}

#articles img:hover {
    content: url('/img/文章1.png');
}

#contact img:hover {
    content: url('/img/联系1.png');
}

该有的文件都准备好后，之前有分析过文件结构，头图是在themes\butterfly\layout\includes\header\index.pug中被构建的，所以我们也修改源码，让新建的top.pug在这里被引用：

修改的文件是themes\butterfly\layout\includes\header\index.pug，前言有提及

- 以上省略
else if top_img !== false
    if is_post()
      include ./post-info.pug
    else if is_home() 
+     include ./top.pug //- <—— 添加这一行
      #site-info
        h1#site-title=site_title
        if theme.subtitle.enable
- 以下省略

以前的版本不用看

这个鼠标移到图片上自动变成另一张图片的效果，是我在把玩Adobe Dreamweaver的时候发现的

新建一个pug文件放js函数，存放这个效果，建议themes\butterfly\layout\includes\head\tophead.pug

+   script(type='text/javascript').
+       function hover(element, src) {
+           element.setAttribute('src', src);
+           element.parentElement.setAttribute('href', link);
+       }

再新建一个pug文件让我的图片使用这个效果，建议themes\butterfly\layout\includes\header\top.pug

+   ul.option_1
+       li
+           #resume
+           a(href="/link/")
+               img(src="/img/简介0.png", alt="resume",style="width: 9vw", onmouseover="hover(this, '/img/简介1.png', '/link/')", onmouseout="hover(this, '/img/简介0.png')")
+       li
+           #works
+           a(href="/link/")
+               img(src="/img/作品0.png", alt="works", style="width: 6vw", onmouseover="hover(this, '/img/作品1.png', '/link/')", onmouseout="hover(this, '/img/作品0.png')")
+   ul.option_2
+       li
+           #articles
+           a(href="/link/")
+               img(src="/img/文章0.png", alt="articles", style="width: 6vw", onmouseover="hover(this, '/img/文章1.png', '/link/')", onmouseout="hover(this, '/img/文章0.png')")
+       li
+           #contact
+           a(href="/link/")
+               img(src="/img/联系0.png", alt="contact", style="width: 9vw", onmouseover="hover(this, '/img/联系1.png', '/link/')", onmouseout="hover(this, '/img/联系0.png')")

再新建一个css文件来规范4张图片的排版，建议themes\butterfly\source\css\top.css，很多参数都需要微调，

.option_1{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: auto;
    height: 17.5vw;
    margin: 0px;
    left: 0%;
    right: 0%;
    position: absolute;
    text-align: center;
    padding-top: 0px;
    padding-left: 0px;
    top: 8vw;
    z-index: 1;
}

#resume{
    position: relative;
    left: 21vw;
    top: 2vw;
    width: fit-content;
}

#works{
    position: relative;
    left: 73vw;
    top: -4vw;
    width: fit-content;
}

.option_2{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: auto;
    height: 17.5vw;
    margin: 0px;
    left: 0%;
    right: 0%;
    position: absolute;
    text-align: center;
    padding-top: 0px;
    padding-left: 0px;
    top: 25.5vw;
    z-index: 1;
}

#articles{
    position: relative;
    left: 27vw;
    top: 2vw;
    width: fit-content;
}

#contact{
    position: relative;
    left: 62vw;
    top: -5.9vw;
    width: fit-content;
}

修改的文件是themes\butterfly\layout\includes\header\index.pug，前言有提及

- 以上省略
else if top_img !== false
    if is_post()
      include ./post-info.pug
    else if is_home() 
+     include ./top.pug //- <—— 添加这一行
      #site-info
        h1#site-title=site_title
        if theme.subtitle.enable
- 以下省略

除此之外，因为我另外把函数放到了tophead.pug中，有必要单独在<head>块中引用一下，

修改的文件是themes\butterfly\layout\includes\head.pug，添在末尾即可

- 以上省略
  //- global config
  !=partial('includes/head/config', {}, {cache: true})

  include ./head/config_site.pug
  include ./head/noscript.pug

  !=fragment_cache('injectHeadJs', function(){return inject_head_js()})

  !=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})

+ //- top头图
+ include ./head/tophead.pug //- <—— 添加这一行

这样就成功了！好耶😊 - The End -
- 2023.7.22更新 -

- 2024.6.19更新 -

文章单页article

文章链接abbrlink设置

点击查看内容

跟着初辰の揽月的教程走一遍

之前没弄对，重新又弄了一遍，这下文章链接就简洁多了

- 2023.7.31更新 -

头图标题小改

点击查看内容

修改的文件是themes\butterfly\source\css\_layout\head.styl

给原主题的标题和meta元素添加阴影

#post-info
  .post-title
    @extend .limit-more-line
    margin-bottom: 8px
    color: var(--white)
    font-weight: normal
    font-size: 2.5em
    line-height: 1.5
    -webkit-line-clamp: 3
    text-shadow: 0px 0px 11px black; // <--添加这行

  #post-meta
    color: var(--light-grey)
    font-size: 95%
    text-shadow: 0px 0px 11px black; // <--添加这行

- 2023.7.29更新 -

内容中的高亮代码块

点击查看内容

修改的文件是themes\butterfly\source\css\_highlight\highlight.styl

之前觉得太浅了，这次改了个更深的

code
  padding: 2px 4px
  background: $code-background
  color: #bd8748 //$code-foreground

- 2023.7.29更新 -

外挂标签改了颜色跟icon

点击查看内容

修改的文件是themes\butterfly\source\css\var.styl

// Info
$note-info-border = #b19ca3
$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg)
$note-info-text = $note-info-border
$note-info-icon = '\f06c'
$note-modern-info-border = #e1e1e1
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4))
$note-modern-info-text = #8f7f84
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)

- 2023.7.31更新 -

markdown的标题样式小改

点击查看内容

新增了css，修改的文件是themes\butterfly\source\css\markdown.css

/* 文章页H2-H4图标 显示H2~H4 */
#article-container.post-content
    h2::before {
        content: "\f6e2\00a0";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }

    h3::before {
        content: "\f548\00a0";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }

    h4::before {
        content: "\f041\00a0";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }

- 2023.7.31更新 -

文章文本size稍微调大了一点

点击查看内容

修改的文件是themes\butterfly\source\css\markdown.css

/* 文章文字大小 */
.post #content-inner {
    font-size: 1.1em;
}

- 2023.7.31更新 -

文章目录过长调整

点击查看内容

修改的文件是themes\butterfly\source\css\_layout\aside.styl

改这个就行

.toc-content
  overflow-y: scroll
  overflow-y: overlay
  margin: 0 -24px
  max-height: calc(90vh - 120px)

- 2024.3.12更新 -

其他魔改

保留文章页侧边栏的同时，取消首页的侧边栏

点击查看内容

我们发现侧边栏aside-content的构建是在themes\butterfly\layout\includes\layout.pug顶部的，

根据分析得知

1	`- page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside`

这行代码的是用于根据当前页面的类型来决定是否显示侧边栏，

比如当前页面若是归档页面is_archive()，则显示归档侧边栏theme.aside.display.archive；如果当前页面是分类页面is_category()，则显示分类侧边栏theme.aside.display.category；

依照这个逻辑，想到正好归档页侧边栏显示的是空白，于是将同样的逻辑用在首页上，让首页用归档页的侧边栏，即可达到首页不显示侧边栏的效果修改后的代码如下：

修改的文件是themes\butterfly\layout\includes\layout.pug

- page.aside = is_archive() ? theme.aside.display.archive: is_home() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside //我不想home页有aside-content，正好archive页面没有aside-content，所以..

文章页因为我们根本没动，所以保留下来了。 - The End -

- 2023.7.22更新 -

待办事项

导航栏还没搞完呢
- 顶部导航栏收进去了你就不管了？
- 移动端导航栏的再设计
  - 加个头像？加个bilibili/github/twitter的链接？也许可以加个微信的付款码？
  - 感觉下面太空了
文章页面的顶部再设计
- 感觉放图片有点丑，要不把图片去了吧
- 图片跟正文的分界线要加个波浪线动画吗？
简介resume页面设计
- 参考1999的UI？
- 三个行业画三张人物图？
- 这个风扇小组件有意思
文章articles主页面设计
联系contact页面设计
作品works页面设计
- 插画页面
- 设计页面
  - 直接把视频全屏放上面？
- 开发页面
404页面要不要设计一下？
这个加载动画我挺喜欢的，可以利用设计一下
首页下面的文章显示bar想改改，改成直接看全内容的，最好多点图片的那种
~~给右下按钮栏，加个直达bottom按钮~~
~~代码块也重新设计~~
- ~~不知为啥pug代码类型识别不了~~ 用diff替代，大家都这么干
- ~~配色想自定义一下~~
- ~~这个引用的颜色有点淡了，改改？~~
~~bilibili视频引用的外挂标签加载有问题~~
~~首页追番列表页面得搞吧，用bangumi的api~~
- Hexo哔哩哔哩番剧页面插件
- hexo-bilibili-bangumi
- 追番列表在/bangumi，追剧列表在/cinema/
- 想重新画一下这个部分，画个q版二次元人物
首页还有个打赏，搞个付款码吧
文章toc锚点往下跳转会被导航栏挡住，往上没问题
~~文章toc展开后太长，超过了浏览器屏幕范围~~ 写了几个vue回来解决果然轻松多了啊
~~搜索功能好像用不了？？？~~ 本来想用hexo-algoliasearch的，但似乎某篇文章字数太多被algolia限制用不了，此外，algolia配置有点隐私信息，需要把蹭的github项目private化，但是private化了就没法蹭gges了，想想还是算了吧
感觉可以给超链接搞个这动画
~~研究一下vercel？~~只能说没什么卵用，白嫖的域名国内还打不开 https://xie-tiao.vercel.app/
~~要不然用本地主机做网站服务器？~~
首页文章数目限制，能否改成无限循环下滑的？