Giter VIP home page Giter VIP logo

hexo-theme-geektutu's Introduction

Hexo-theme-geektutu

极客兔兔的博客目前使用该主题。 Github - Geektutu's Blog

样图

1. 特性

  • 支持标签、归档 (2019-06-06)。
  • 支持baidu google biying 360站点认证,以及baidu站点统计(2019-06-07)。
  • 支持显示目录,目录随文章滚动高亮(2019-06-07)。
  • 增加对gitalk(基于Github Issue第三方评论)的支持(2019-06-07)。
  • 响应式布局,支持PC和移动端(2019-06-08)。
  • 增加支付宝、微信赞赏功能(2019-06-08)。
  • 对专题进行强化,聚合同专题链接,点击查看效果(2019-06-13)。
  • 点击文章区域的图片,可以查看大图,再点击图片则关闭。(2019-06-17)
  • 使用QRious实现生成二维码功能,方便微信扫一扫,阅读/分享。(2019-06-17)
  • 添加开关控制百度网址自动推送功能。(2019-06-22)
  • 添加点击页面出现彩蛋的特效。(2019-06-22)
  • 侧边栏目录与专题可进行切换,完善内链功能,方便依次浏览所有同专题的文章,进一步强化专题。(2019-06-22)
  • 添加文章置顶功能。(2019-06-17)
  • 不蒜子统计。(2019-08-09)
  • 新增 Cheat Sheet 样式。 点击查看效果 (2020-03-01)

2. Hexo 基础命令

hexo new post "<post name>" # 创建一篇新文章
hexo clean && hexo generate # 生成静态文件
hexo server # 本地调测
hexo deploy # 自动部署到你配置的仓库的gh-pages分支

3. 如何使用该主题

  • 第一步,初始化博客
cd <empty_dir> # 进入一个空目录
hexo init      # 初始化hexo博客
  • 第二步,将package.json中的内容替换为4.1中的内容

  • 第三步,下载主题,并启动

npm i   # 安装依赖
npm update # 下载geektutu主题
npm build  # 生成页面
npm start  # http://localhost:4000 可以看到效果
  • 最终的目录结构
|--node_modules/
|--source/
    |--_posts/
        |-- link.md  # 友链,必须有
        |-- about.md # 关于我,必须有
    |--img/   # _config.xml配置的img/xxx在这里
        |--icon.png
        |--bg.jpg
        |--pay/ # 赞赏的图片位置,可自定义
            |--alipay.jpeg
            |--wechat.jpeg
    |--archives/  # 归档
        index.md
    |--series/    # 专题
        index.md
    |--tags/      # 标签
        index.md
    |--404.md
    CNAME
|--themes/
    |--geektutu/ # 主题将会下载在这里
|--_config.xml   # 配置在这里
|--package.json

4. 我的博客配置

4.1 package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.8.0"
  },
  "scripts": {
    "update": "rm -rf themes/geektutu && git clone https://github.com/geektutu/hexo-theme-geektutu.git themes/geektutu",
    "build": "hexo clean && hexo generate",
    "start": "hexo server --draft",
    "deploy": "hexo deploy"
  },
  "dependencies": {
    "hexo": "^3.9.0",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "3.0.0",
    "hexo-generator-index": "1.0.0",
    "hexo-generator-sitemap": "2.0.0",
    "hexo-generator-tag": "1.0.0",
    "hexo-renderer-ejs": "1.0.0",
    "hexo-renderer-marked": "2.0.0",
    "hexo-renderer-stylus": "1.1.0",
    "hexo-server": "1.0.0"
  }
}

4.2 _config.yml

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html

# Site
title: 极客兔兔
keyword: 极客兔兔,极客兔兔的博客,极客兔兔的小站
description: 极客兔兔的小站,致力于分享一些技术教程和有趣的技术实践。
author: 极客兔兔
language: zh-CN

url: https://geektutu.com
root: /
permalink: post/:title.html

# seo优化各个浏览器的验证信息
beian: 沪ICP备18001798号-1
seo_title: 极客兔兔 # 子页面的后缀,效果: 关于我 | 极客兔兔,如果与title一致,则可以不设置
seo:
  google_site_verification: 19ixTFj-X-rXuvZFvR1PMkqSHMXZ5GjN7nhYdYYFm-c
  baidu_site_verification: p7Pz3jlx4t
  ms_site_verification: 7E2AEE3378AC93764DEAB411177A21A1
  _360_site_verification: 5c7e8a1fdbf35ed6003c48733208f705 # 不能以数字开头,所以加上了下划线

# 开启博客资源的相对链接 https://hexo.io/zh-cn/docs/asset-folders
post_asset_folder: true

# Site settings
header_icon: img/icon.png

theme: geektutu

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://git.coding.net/gzdaijie/geektutu-blog.git
  branch: coding-pages

gitalk:
  client_id: 'c1fdd456a4caae5f7df0'
  client_secret: 'b2674451e21feae50520f99337ec15d2aebe7879'
  accessToken: 'xxxx'
  repo: 'hexo-theme-geektutu'
  owner: 'geektutu'

# alipay wechatpay 的二维码转换的网址,不使用二维码图片,提高加载速率。
# https://cli.im/deqr 可将二维码转为网址
reward:
  alipay: HTTPS://QR.ALIPAY.COM/FKX060337TUXBAX9LIFJE8
  wechat: wxp://f2f0qgGBlfD1nZXjvBjievxB0z0fc0W2sBq5

related_links:
- link: https://github.com/geektutu/hexo-theme-geektutu
  img: img/related_links/github.png
- link: https://github.com/geekcircle
  img: img/related_links/geekcircle.png
- link: mailto:Geektutu<[email protected]>?subject=From Geektutu's Blog
  img: img/related_links/email.png

# 文章末尾配置一些提示信息,可选,不配置则不显示
post_tips:
  find_me: true # 本站永久域名「 xx.domain 」, 也可以通过搜索「 xx 」找到我。
  zhihu_zhuanlan: https://zhuanlan.zhihu.com/geektutu # 欢迎关注我的「 知乎专栏 」,所有文章可在「 知乎APP 」查看。

widgets:
  mobile_qrcode: false # 开启移动端二维码,扫一扫,手机上阅读
  caidan: true  # 开启彩蛋,点击屏幕会随机弹出 '点个赞','留个言'等
  busuanzi: true # 开启不蒜子统计 https://busuanzi.ibruce.info/

ba_auto_push: true # Baidu 自动推送,以下均为可选配置
ba_track_id: 1a0ec33b1aa # Baidu Analytics
cnzz_track_id: 123649 # CNZZ Analytics
google_analysis: UA-141425-1 # Google Analytics
google_ad_client: ca-pub-939225546 # Google Ad

feed:
  enable: true
  limit: 0
  type: rss2
  content: false
  path: feed.xml
  icon: img/icon.png

4.3 md参考

---
layout: "archive"
title: "归档"
description: "极客兔兔的博客的归档列表"
---
---
layout: "tags"
title: "标签"
description: "极客兔兔的博客的标签列表"
---
---
layout: "category"
title: "专题"
description: "极客兔兔的博客的专题列表"
---
---
title: 关于我
date: 2017-07-03 11:51:24
description: 极客兔兔的小站,致力于分享一些技术教程和有趣的技术实践。
tags:
- 关于我
---

## 个人介绍

··· 省略
  • _posts/tensorflow-mnist-simplest.md 效果
---
title: TensorFlow入门(一) - mnist手写数字识别(网络搭建)
date: 2017-12-09 11:51:24
description: TensorFlow 入门系列文章,mnist手写数字识别(网络搭建)。
tags:
- 机器学习
- tensorflow
- mnist
- Python
nav:
- TensorFlow
categories:
- TensorFlow教程
top: 1
github: https://github.com/geektutu/tensorflow-tutorial-samples
image: post/tensorflow-mnist-simplest/xxx.jpg
---

这篇文章是整个 TensorFlow入门-mnist手写数字识别系列的第一篇,主要介绍了如何从0开始用tensorflow搭建最简单的网络进行训练。

··· 省略

注意,这里的image是显示在主页和推荐阅读文章卡片左侧的图片,尽量选择方形的图片,相对路径从根路径开始。 关于nav,默认导航框显示的是 categories 的值,避免分类太多,可以使用nav标签聚合,属于同一navcategories 导航链接将会聚合在一起。 nav 可选设置,若不设置,将平铺所有的 categories。 top 是置顶顺序。

5. 最后

喜欢就点个star吧。

hexo-theme-geektutu's People

Contributors

geektutu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

hexo-theme-geektutu's Issues

hexo g 报错

有两个问题:
1,一定要配置gittalk,否在就会报错
2,layout里有个报错,还不知道怎么解决,报错信息如下:
ReferenceError: /home/admin/Documents/markdown/hexo/themes/geektutu/layout/page.ejs:83
81|
82|

83| <%- body %>
84|


85|
86|

body is not defined
at eval (eval at compile (/home/admin/Documents/markdown/hexo/node_modules/ejs/lib/ejs.js:633:12), :11:17)
at returnedFn (/home/admin/Documents/markdown/hexo/node_modules/ejs/lib/ejs.js:668:17)
at Theme._View.View._compiled (/home/admin/Documents/markdown/hexo/node_modules/hexo/lib/theme/view.js:123:48)
at Theme._View.View.View.render (/home/admin/Documents/markdown/hexo/node_modules/hexo/lib/theme/view.js:29:15)
at /home/admin/Documents/markdown/hexo/node_modules/hexo/lib/hexo/index.js:349:21
at tryCatcher (/home/admin/Documents/markdown/hexo/node_modules/bluebird/js/release/util.js:16:23)
at /home/admin/Documents/markdown/hexo/node_modules/bluebird/js/release/method.js:15:34
at RouteStream._read (/home/admin/Documents/markdown/hexo/node_modules/hexo/lib/hexo/router.js:123:3)
at RouteStream.Readable.read (stream_readable.js:474:10)
at resume
(_stream_readable.js:953:12)
at processTicksAndRejections (internal/process/task_queues.js:77:11)

执行 hexo generate时报错,Template render error: (unknown path) [Line 8, Column 25]

$ hexo clean && hexo generate
INFO  Start processing
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Template render error: (unknown path) [Line 8, Column 25]
  Error: Unable to call `the return value of (posts["first"])["updated"]["toISOString"]`, which is undefined or falsey
    at Object._prettifyError (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/nunjucks/src/lib.js:36:11)
    at /Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/nunjucks/src/environment.js:561:19
    at Template.root [as rootRenderFunc] (eval at _compile (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/nunjucks/src/environment.js:631:18), <anonymous>:214:3)
    at Template.render (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/nunjucks/src/environment.js:550:10)
    at Hexo.module.exports (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/hexo-generator-feed/lib/generator.js:40:22)
    at Hexo.tryCatcher (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/bluebird/js/release/util.js:16:23)
    at Hexo.<anonymous> (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/bluebird/js/release/method.js:15:34)
    at /Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/hexo/lib/hexo/index.js:318:20
    at tryCatcher (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/bluebird/js/release/util.js:16:23)
    at MappingPromiseArray._promiseFulfilled (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/bluebird/js/release/map.js:68:38)
    at MappingPromiseArray.PromiseArray._iterate (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/bluebird/js/release/promise_array.js:115:31)
    at MappingPromiseArray.init (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/bluebird/js/release/promise_array.js:79:10)
    at MappingPromiseArray._asyncInit (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/bluebird/js/release/map.js:37:10)
    at _drainQueueStep (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/bluebird/js/release/async.js:97:12)
    at _drainQueue (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/bluebird/js/release/async.js:86:9)
    at Async._drainQueues (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/bluebird/js/release/async.js:102:5)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/chengxiaowen/go/src/github.com/cxwen/cxwen-blog/node_modules/bluebird/js/release/async.js:15:14)
    at processImmediate (internal/timers.js:439:21)

标签页样式问题

标签页主标题样式太大,导致点击上一个链接时有一部分被覆盖住了。

错误如图

如图所示,当上面链接如果文字太少的话会完全被覆盖住,出现点击无反应的问题。

关于专栏或者说专题实现

我想问一下具体是怎么生成,是需要自己手动排版吗?我看了一下你的博客仓库,没有发现怎么生成这个的步骤。希望你有空公知一下。十分感谢。

封面

封面只能用本地的吗 不能链接吗

[求助] 按照文档操作无法使用该主题

失败截图:
截屏2021-11-29 下午2 28 31

复现步骤:
按照文档操作。

  1. hexo init
  2. 替换 package.json 中的内容
  3. npm i
  4. npm update
  5. npm build
  6. npm start

一些版本信息:
hexo version: 4.2.0
node version: v17.1.0
npm version: 8.1.2

使用该主题的童鞋,希望你在这里留下脚印~

已使用该主题的博客

统一回复下相关问题:

Q:首页和推荐的文章卡片左侧的图片如何配置?

A: md文档中,配置 image 属性,参考这里,路径从根路径开始填起。

Q:问什么留言和友链页面404

A:留言和友链页面,你可以理解为和普通的文章没有差别,但是导航栏中地址是固定的。所以需要在 _posts 文件夹下建立 about.mdlink.md ,才能生成相关的页面。可以参考我的内容 about.mdlink.md

header_img的作用

请问_config.yml中的header_img用于设置哪里的图片呢?

我一开始以为是博客上方head的背景图片,但发现模版代码里面似乎已经用css自带的颜色写死了。设置了header_img后也没有发现任何地方有变化。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.