[游戏开发]Hexo + Stellar “食用“方法

安装 Git Node.js

下载hexo

npm install -g hexo-cli

建一个文件夹用来放文件

$ hexo init <folder>
$ cd <folder>
$ npm install

• 目录树

  .
  ├── _config.yml
  ├── package.json
  ├── scaffolds
  ├── source
  |   ├── _drafts
  |   └── _posts
  └── themes
  

_config.yml 网站的 配置 信息，您可以在此配置大部分的参数。

主题下载

? 这里使用Stellar 主题

? Stellar 是一个内置 wiki 系统的 hexo 主题，适合综合型站点使用。同时也拥有简约而精美的视觉设计和丰富的标签插件，帮助您简单从容地应对各种场合。

https://github.com/xaoxuu/hexo-theme-stellar.git

解压到theme目录下

添加新的分类

hexo new page about		# 关于
hexo new page wiki		# 项目
hexo new page friends	# 友链
hexo new page more   	# 更多
hexo new page notes		# 笔记

sidebar:
  menu:
    post: '[btn.blog](/)'
    wiki: '[btn.wiki](/wiki/)'
    notes: '[笔记](/notes/)'
    more: '[更多](/more/)'

ps: 侧边栏宽度有限，如何在不影响观感的情况下设置更多的主导航栏按钮呢？建议设置一个「更多」按钮，然后在「更多」页面的侧边栏放上列表组件。

主题使用

基本信息配置

编写文章以及独立页面

使用标签插件增强阅读体验

如何使用半自动化的文档系统

探索个性化选项

友情链接页/网站卡片标签页

友情链接页

首先得在 _data 文件夹下创建一个文件friends.yml

../source/_data/friends.yml

group1:
  title: 海内存知己 天涯若比邻
  description: 感谢人生旅途中的每一份真挚的友谊，按结识先后顺序：
  items:  
# 如果添加了title和description就必须写items
    - title: xaoxuu
      avatar: https://cdn.jsdelivr.net/gh/cdn-x/xaoxuu/avatar/rect-256@2x.png
      url: https://xaoxuu.com
      screenshot: https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg
    - title: test
      avatar: https://xxx.png
      url: https://xxx.com
      screenshot: https://xxx.jpg
    - title: test
      avatar: https://xxx.png
      url: https://xxx.com
      screenshot: https://xxx.jpg

# 如果不需要 title 和 description，可以直接把 items 内容提升到 group 层级中，例如：
group2:
    - title: test
      avatar: https://xxx.png
      url: https://xxx.com
      screenshot: https://xxx.jpg
    - title: test
      avatar: https://xxx.png
      url: https://xxx.com
      screenshot: https://xxx.jpgpg


# 可以设置 api、repo 来显示 GitHub Issues 中的数据：
# group3:
#   title: 来自 GitHub 的朋友
#   description: '以下友链通过 [GitHub Issue](https://github.com/xaoxuu/friends/issues/) 提交，按 issue 最后更新时间排序：'
#   api: https://issues-api.vercel.app
#   repo: xaoxuu/friends

卡在这卡了有一会，大佬的主题文档，看了有点摸脑壳不着

友链可以随意插入到任意位置，把语句写到对应的Markdown文档内即可，同时还支持分组的 这点非常友好

格式 如下

{% friends %}	# 显示全部
{% friends only:group1 %}	# 显示 group1
{% friends only:group1,group2 %}	# 显示 group1 和 group2
{% friends not:group2 %}	# 除了 group2 别的都显示

网站卡片收藏页

知道友链怎么写后

网站标签就简单了

得在 _data 文件夹下创建一个文件 sites.yml

../source/_data/sites.yml

group:
  title: 标签收藏
  description: tools
  items:
    - title: 十年之约 # 标题
      avatar: https://www.foreverblog.cn/favicon.ico  # ico
      url: https://www.foreverblog.cn/  # 网站地址
      screenshot: https://   # 网站截图链接
      
....

这里的yaml格式和上面的友链yaml的写法是一样的，和友链一样也支持任意位置插入和分组

更多页面

Stellar 同时具有博客和 Wiki 两个大分类，为了能够正确进行导航栏高亮，引入了 menu_id 来进行区分，通常情况下，layout: post 和 layout: wiki 两种布局模板可以自动为 sidebar.menu.post 和 sidebar.menu.wiki 的导航栏按钮高亮。自己创建的独立页面也可以在 front-matter 中指定 menu_id 来使某个按钮处于选中状态。

例如您有关于、友链两个页面，都希望高亮「更多」按钮：

blog/source/about/index.md---
menu_id: more
title: 关于
---

blog/source/friends/index.md---
menu_id: more
title: 友链
---

在主题配置文件中设置导航栏：

blog/_config.stellar.ymlsidebar:
  menu:
    ...
    more:
      title: 更多
      url: xxx

ps： 这样一来 当点击到关于页面时，按钮更多就会被加高亮

最后：

hexo clean && hexo g && hexo s

http://localhost:4000/

再次感谢大佬的主题，真的特别棒