-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
基于Hexo快速搭建项目官网及文档平台 #1
Comments
各个连接都是404了, 求修复 |
@iRockyZhou 图片链接修复了 |
好的 谢谢 @younth 举个栗子, 如何定制About.html的样式 请问, 我该怎么做, 谢谢 |
@younth 洋仔 在写基于hexo的企业官网主题啊 哈哈哈 |
@sunscheung 你是? |
坐标南京 旭 @younth |
@sunscheung 老铁! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
你的项目需要一个官网平台了(基于Hexo快速搭建项目官网及文档平台)
玩过
github.io
的同学对 hexo 都比较熟悉,目前最火的静态博客工具。其实,hexo
除了能帮助我们快速搭建个人博客,还能快捷搭建项目官网
。最近在搭建公司内部框架的官网用到了,跟大家一块分享下~项目官网的构成
我们先来看看一些项目的官网:
1. Hexo 官网
https://hexo.io/
首页:
文档平台:
新闻页面:
2. NexT 官网
http://theme-next.iissnan.com/
首页:
文档平台:
其他还有一些项目的官网都是这种形式的,我们可以看出,一般项目官网主要包括下面几个部分:
那么如何快速的搭建这几个页面框架呢?
首页
一般来说,首页比较个性化,涉及到设计风格,有设计资源的同学可以找相关的同学帮助设计,然后编写成静态页面。如果没有设计资源,可以直接用网上现有的(注意版权),修改套用,文章后面我提供了两种笔者目前再用的。
文档页面
文档页面就类似于我们的博客平台,这是我们更新最频繁的地方。我们用
markdown
编写,然后通过hexo
自动生成静态页面,配合文档样式框架,最终即可形成我们的文档平台。下面的截图是本人对egg
官网的样式进行改造后:这种文档平台有点类似于
gitbook
提供的编写文档能力。gitbook
只专门用于写文档或者书籍的,我们这个更灵活些~独立页面
独立页面主要指我们的一些新闻页面,个性页面。这种页面一般分为两种:
markdown
编写,hexo
生成比如,这是我们内部框架用到的通用介绍页面:
如何利用Hexo搭建官网
其实搭建项目官网的过程,就是在
编写hexo主题
的过程。因此必须对hexo
主题的构成及API有一定的了解。传送门—hexo主题说明hexo 官方主题默认模板引擎是
swig
。虽然该模板引擎目前停止维护了,但是不得不说非常好用。目前很多主题也是基于swig,这里也建议大家使用。下面是一个官网主题的目录结构:
docs ├─ languages // 多语言翻译配置文件 ├─ layout // 模板文件 │ ├─ layout.swig // 基础模板 │ ├─ index.swig // 首页 │ ├─ post.swig // 独立文章页面框架 │ └─ page.swig // (文档平台框架) ├─ scripts // │ └─ helper.js // node执行的脚本,自定义辅助函数,一般用于提取导航信息,跳转等 ├─ source // 存放前端css js资源 ...
编写主题需要基础的前端技能,建议大家通过hexo官网api或者网上成熟的开源主题进行二次开发来学习如何编写主题,其中需要主要的是:
scripts/helper.js
这个文件是hexo运行时候执行的,即在node环境下执行,功能是可以实现一些全局的功能函数,比如提取导航,生成链接等。用 hexo-site-kit 快速搭建官网
这里本人近期基于
egg
、hexo
官网主题进行了二次开发,搞了一个项目 hexo-site-kit ,运行即可看到一个官网平台的demo。该项目不是一个hexo主题插件,而是一套迅速搭建你的官网平台解决方案。目前包含有两种主题样式 ,通过修改
_config.yml
里面的theme
可以更改主题。切换主题的时候,务必先执行
hexo clean
清空之前的编译缓存后续会继续搜寻开发出好用的官网及文档平台,更新到项目的theme下面,丰富主题供大家选择。
The text was updated successfully, but these errors were encountered: