Hexo + Stellar “食用“方法-CFANZ编程社区

文章目录

安装 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://   # 网站截图链接
      
....