Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
四方云和
Devbook
提交
f8ed138c
D
Devbook
项目概览
四方云和
/
Devbook
通知
0
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Devbook
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f8ed138c
编写于
9月 01, 2020
作者:
RunAtWorld
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
hexo
上级
dee21ff2
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
2 addition
and
141 deletion
+2
-141
SUMMARY.md
SUMMARY.md
+2
-1
工具/hexo/Hexo主题开发.md
工具/hexo/Hexo主题开发.md
+0
-140
未找到文件。
SUMMARY.md
浏览文件 @
f8ed138c
...
...
@@ -43,7 +43,8 @@
-
[
gitbook
](
工具/gitbook/README.md
)
-
[
安装 GitBook
](
工具/gitbook/gitbook.md
)
-
[
输出PDF
](
工具/gitbook/gitbook_pdf.md
)
-
[
Hexo
](
工具/hexo/hexo开发.md
)
-
[
Hexo
](
工具/hexo/README.md
)
-
[
hexoz主题开发
](
工具/hexo/hexo主题开发.md
)
-
[
markdown
](
工具/markdown/README.md
)
-
[
Markdown 简明语法手册
](
工具/markdown/markdown.md
)
-
[
vscode_markdown.md
](
工具/markdown/vscode_markdown.md
)
...
...
工具/hexo/
hexo
开发.md
→
工具/hexo/
Hexo主题
开发.md
浏览文件 @
f8ed138c
# Hexo主题开发
## 序章
想要一个自己的知识管理系统,用了 Hexo ,但是没有发现自己心仪的主题,就自己做了一个。本文记录了制作的全过程。本人编码功底和前端知识并不是特别雄厚,希望能由此文引出各路大神的兴趣,以后制作出更多优秀的主题。
预览: https://itabyss.github.io/
源码: https://github.com/ITAbyss/hexo-wiki
教程文章:https://www.cnblogs.com/yyhh/p/11058985.html
![
img
](
https://img2018.cnblogs.com/blog/626593/201906/626593-20190620151931058-1030949664.png
)
## 安装
Hexo 是一款能将『 Markdown 』文件编译成『 html 』静态文件,可以提供『 Web 』服务,做『 Blog 』,使其能部署到『 gitpage 』上等等。首先要安装『
[
node.js
](
https://nodejs.org/
)
』,安装好了以后,就可以使用『 npm 』来安装了,可能会读取系统配置文件,所以需要给『 root 』权限,使用『 sodu 』执行以下命令
```
bash
$
sudo
npm
install
-g
hexo-cli
/usr/local/bin/hexo -> /usr/local/lib/node_modules/hexo-cli/bin/hexo
>
fsevents@1.2.4
install
/usr/local/lib/node_modules/hexo-cli/node_modules/fsevents
>
node
install
[
fsevents] Success:
"/usr/local/lib/node_modules/hexo-cli/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node"
already installed
Pass
--update-binary
to reinstall or
--build-from-source
to recompile
+ hexo-cli@1.1.0
added 171 packages
in
6.255s
```
这个时候可以测试以下,是否安装成功
```
bash
$
hexo
-version
hexo-cli: 1.1.0
os: Darwin 17.6.0 darwin x64
http_parser: 2.8.0
node: 8.11.3
v8: 6.2.414.54
uv: 1.19.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.32.0
napi: 3
openssl: 1.0.2o
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c
```
## 新建 Blog
新建一个目录,来搭建一个简易的『 Blog 』吧。
```
bash
$
mkdir
~/hexo-blog
$
cd
~/hexo-blog
$
hexo init
INFO Cloning hexo-starter to ~/hexo-blog
Cloning into
'/Users/wywk/hexo-blog'
...
remote: Counting objects: 65,
done
.
remote: Total 65
(
delta 0
)
, reused 0
(
delta 0
)
, pack-reused 65
Unpacking objects: 100%
(
65/65
)
,
done
.
Submodule
'themes/landscape'
(
https://github.com/hexojs/hexo-theme-landscape.git
)
registered
for
path
'themes/landscape'
Cloning into
'/Users/wywk/hexo-blog/themes/landscape'
...
remote: Counting objects: 824,
done
.
remote: Total 824
(
delta 0
)
, reused 0
(
delta 0
)
, pack-reused 823
Receiving objects: 100%
(
824/824
)
, 2.54 MiB | 1.01 MiB/s,
done
.
Resolving deltas: 100%
(
435/435
)
,
done
.
Submodule path
'themes/landscape'
: checked out
'73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO Install dependencies
npm WARN deprecated titlecase@1.1.2: no longer maintained
>
fsevents@1.2.4
install
/Users/wywk/hexo-blog/node_modules/fsevents
>
node
install
[
fsevents] Success:
"/Users/wywk/hexo-blog/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node"
already installed
Pass
--update-binary
to reinstall or
--build-from-source
to recompile
>
nunjucks@3.1.3 postinstall /Users/wywk/hexo-blog/node_modules/nunjucks
>
node postinstall-build.js src
npm notice created a lockfile as package-lock.json. You should commit this file.
added 470 packages
in
20.978s
INFO Start blogging with Hexo!
```
初始化之后,看到如上信息,说明已经初始化成功了。接下来,直接启动服务,就可以大致浏览『 Blog 』了。
```
sh
$
cd
~/hexo-blog
$
hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
```
启动后,访问『
[
http://localhost:4000
](
http://localhost:4000/
)
』
![
img
](
https://img2018.cnblogs.com/blog/626593/201906/626593-20190620151942622-113171933.png
)
当然也可以使用一些其他的命令,可以通过帮助来查看
```
sh
hexo
help
Usage: hexo <
command
>
Commands:
clean Remove generated files and cache.
config Get or
set
configurations.
deploy Deploy your website.
generate Generate static files.
help
Get
help
on a command.
init Create a new Hexo folder.
list List the information of the site
migrate Migrate your site from other system to Hexo.
new Create a new post.
publish Moves a draft post from _drafts to _posts folder.
render Render files with renderer plugins.
server Start the server.
version Display version information.
Global Options:
--config
Specify config file instead of using _config.yml
--cwd
Specify the CWD
--debug
Display all verbose messages
in
the terminal
--draft
Display draft posts
--safe
Disable all plugins and scripts
--silent
Hide output on console
```
## 主题下载
Hexo 有很多精彩的主题,可以去『
[
官方主题网站
](
https://hexo.io/themes/
)
』去查阅,找到自己喜欢的主题。
...
...
@@ -144,11 +7,8 @@ Hexo 有很多精彩的主题,可以去『 [官方主题网站](https://hexo.i
这次所写是自己基于Hexo的框架,编写一个自己喜欢的主题。我个人喜欢极简快速的主题,所以不太喜欢花哨的、很多插件、很多挂件的那种,感觉加载起来特别的卡,可能是作为性能测试人员的坏毛病,喜欢追求极致的速度。没有找到自己喜欢的极简风格,所以就自己写了一个简单的 wiki ,用于代替云笔记。
## 主题开发
### 目录结构
首先得创建一个自己 Blog 的文件夹,我这边建的文件夹叫『 wiki 』,然后在这个文件夹下,进行 Hexo 的初始化。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录