hexo-theme-Annie

Annie is a simple theme for Hexo. If you like literature and poetry, it might suit you! 预览 | PREVIEW

Original version: @Sariay

Index:

Page:

安装&启用

git clone https://github.com/Dinghow/hexo-theme-Annie.git

Then modify theme in _config.yml to Annie

配置-1

#主题目录下的_config.yml文件
# Header
menu:
    主页: /
    归档: /archives
    分类: /categories
    标签: /tags
    关于: /about
    相册: /gallery

# header
avtor: /img/logo.png
# if the value of avtor is false
say: Welcome 

# background_image
# img/01.jpg
# https://source.unsplash.com/collection/954550/1920x1080
background_image:
    enable: false
    #url: https://source.unsplash.com/collection/954550/1920x1080
    url: img/1.jpg
    #custom Radom img
    customRadom_url: https://XXX-youname-XXX.github.io/Random-img/

# show the motto
# otherwise It shows the site description
motto: true

#index-style: pure or cart
index_style: cart

#index_cart_cover
cover: img/cart_cover.jpg

#page
page_name:
    enable: true

#post
#post_comment
comment:
    enable: true

gitalk:
    enable: false
    clientID: ' ' 
    clientSecret: '' 
    repo:  
    owner: 
    admin: 
    distractionFreeMode: true
    hrefTrimend: '#.*$,\\?.*$,index.html$' 
    
valine: 
    enable: true
    appid: ' '
    appkey: ' '
    placeholder: no any!
    
#post_toc
post_toc:
    enable: true
    number: false
    title: 文章目录

#post_excerpt   
excerpt_link: 展开全文

#footer
#social
social:
    enable: true
    github: http://github.com/
    weibo: http://github.com/
    email: http://github.com/
    qq: http://github.com/
    twitter: http://github.com/

#copyright  
since: 2017
content_author: 

#others 
#rss
rss: /atom.xml

#gallery 
#format: natural or square
gallery_format: natural
#one time to load 4 rows or other count(0,1,2,3,4,5,6......)
gallery_limit: 4
#data url
gallery_data: gallery/data.json

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
    enable: true
    # if auto, trigger search by changing input
    # if manual, trigger search by pressing enter key or search button
    trigger: auto
    # show top n results per article, show all results by setting to -1
    top_n_per_article: 2

#when click, emerge heart
love:
    enable: false

#totop
totop:
    enable: true

配置-2

Enable seach please install hexo plugin hexo-generator-search-zip at first.

$ npm install hexo-generator-search-zip --save

Then add search: ...... in _config.yml.

#站点目录下的_config.yml文件

  ......

search:
  path: search.json
  zipPath: search.zip
  versionPath: searchVersion.txt
  field: post
  #field: post, page or all

enable code highlight please install hexo plugin hexo-prism-plugin at first.

npm i -S hexo-prism-plugin

Then modify highlight.enable to false, and add prism_plugin:...... in _config.yml.

#站点目录下的_config.yml文件
#highlight:  enable: false

......

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace:
 
......

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'default'
  line_number: true    # default false
  custom_css: 'path/to/your/custom.css'     # optional

You can read the post Annie主题使用说明 to collect information for other modules such as header-bg, gallery, comment, toc !

配置-3

文章模板样例，cover为文章封面图的路径

title: {{ title }}
date: {{ date }}
cover: https://.../
categories: categories
tags: tags

更新主题

To execute the following command simply.

cd themes/Annie
git pull

其他方面

如果你有问题反馈（Feedback）: issues | 1261347403@qq.com（你可以先在issues中寻找答案）

如果你喜欢该主题（Like）: star（star越多，更新的动力越大）

如果你想定制主题（Develop）: fork

Todo

• 评论（comment）
• 目录（toc）
• 相册（gallery）
• 谷歌统计（google）
• ...

Thanks

hexo-generator-search-zip by Kieran

Amaze UI

Menu plugin

Other open source...

(All Rights Reserved by Them)

Added by Dinghow

• Add Disqus

• Add livere

• Add Addthis

• Add About page

• Add Friend link page

• Add multi-language support

• Add inner math type support (install hexo-math at first and may need proxy)

• Support edit favicon in _config.yml

• Fix some syntax error

• Add busuanzi page access counter

• Add a script to auto create gittalk issues

• Add Media player

1. Disqus

Open _config.yml in the theme folder

# Disqus settings
disqus: 
    enable: true
    disqus_username:  # set your disqus name here

Set enable as true , then set your disqus name at disqus_username

2. Livere

Livere is a comment system which support QQ and Wechat, and it doesn't need any proxy.

To enable livere, you just need to open _config.yml in the theme folder

# Use livere
livere:
    enable: true
    livere_uid:  # set your livere uid here

Set enable as true , then set your livere id at livere_uid

How to get livere id: Regist a account in livere, then get your uid

3. Addthis

Addthis is a free website tools include share buttons, targeting tools and content recommendations help you get more likes, shares and followers

In brief, your can use this tool to share your blog in wechat moment and other social platform without been forcibly transcoding

To enable livere, you just need to open _config.yml in the theme folder

# Post share by addthis
addthis:
    enable: true
    addthis_id: # set your addthis id here

Set enable as true , then set your addthis id at addthis_id

4. About Page

Enter hexo new page about to create about page, then set the front-matter element in index.md of about folder

layout: about
type: about

You can edit the details in hexo-theme-Annie/layout/_partial/about.ejs

5. Friend Page

Enter hexo new page friends to create about page, then set the front-matter element in index.md of about folder

layout: friend
type: friend

Open _config.yml in the theme folder, add your friends' information

# friends
friends: [
        {
              title: "Dinghow",
              img: /img/friends/dinghow.jpg,
              href: "https://dinghow.site"
        },
        {
              title: "loveSnowBest",
              img: /img/friends/loveSnowBest.jpg,
              href: "https://lovesnowbest.site"
        },
]

6. Multi-language Support

You can set the language item in hexo _config.yml

language: en

I've add zh-CN, zh-TW, en

7. Favicon

You can set your blog's favicon in _config.yml of the theme folder

favicon: /imgs/favicon.png # your favicon png

8. Auto Create GitTalk Issues

Configure the ruby script CommentInitializer.rb

username = "" # GitHub 用户名
new_token = ""  # GitHub Token
repo_name = "" # 存放 issues
sitemap_url = "l" # sitemap
kind = "Gitalk" # "Gitalk" or "gitment"

Then run it.

9. Media player

Install hexo-tag-aplayer by @grzhan

npm install hexo-tag-aplayer --save

Then set in _config.yml of the blog folder

# Music player
aplayer:
  meting: true

You can see the player repo for detailed usage