有没有晓得 hexo 生成博客后的 fancybox 效果是怎么实现的，如下网址，不如大神的效果

网址

fancybox

Hexo

正点

35 条回复 • 2016-01-23 19:16:11 +08:00

1

chuhemiao

OP

2016-01-20 22:21:51 +08:00

没有人遇到这个问题吗？纠结了半下午了，按照不如的说法是新建一篇图片类的文章，但是现在是文章出来，图只有一张显示了，并没有显示成轮播的形式，是还要设置其它的什么吗?求告知！！

2

chuhemiao

OP

2016-01-20 22:22:09 +08:00

网址是:http://www.idiot6.com

3

chuhemiao

OP

2016-01-20 22:22:53 +08:00

http://www.idiot6.com

4

DualWield

2016-01-20 23:22:36 +08:00

fancybox 说的是轮播图吗？ hexo 应该有一个 theme 文件夹，里面有一个 post 还是什么的忘了，就是 ejs 模板（ html ）如果是 html 的话，往里面放什么东西都是可以的吧~

5

Tiande

2016-01-20 23:25:25 +08:00

/themes/ur theme/_config.yml :
fancybox: true

6

Starduster

2016-01-21 00:21:28 +08:00

@DualWield 是那个点击查看大图， WP 里有个实现这个功能的插件叫 fancybox

7

chuhemiao

OP

2016-01-21 10:22:40 +08:00

@DualWield 就是轮播图，/hexo/themes/pacman/scripts/在这下面有个 fancybox.js ，然后就是 pacman/source/有一堆针对 fancy 的 js 和 css 样式，没发现其它页面有。

8

agate

2016-01-21 10:22:41 +08:00

不是很理解你的问题. fancybox 不就是一个 jQuery 插件么? http://fancybox.net/
你在你自己模板里头添加就可以啦...

9

chuhemiao

OP

2016-01-21 10:22:55 +08:00

@Tiande 这个已经加了

10

chuhemiao

OP

2016-01-21 10:24:53 +08:00

@agate 是在 hexo 静态生成的，就是不知道那个要怎么用了，有说是在主题下的配置加上 fancybox: true,但这个加上还是没啥用

11

agate

2016-01-21 10:25:26 +08:00

https://github.com/hexojs/hexo-theme-landscape#fancybox

12

agate

2016-01-21 10:25:56 +08:00

{% fancybox img_url [img_thumbnail] [img_caption] %}
这个不知道是不是你要的...

13

agate

2016-01-21 10:26:34 +08:00

我是觉得需要你主题支持啊...

14

zhangxiaoman

2016-01-21 10:30:12 +08:00

https://github.com/litten/hexo-theme-yilia
这个主题好看...

15

chuhemiao

OP

2016-01-21 11:29:42 +08:00

@zhangxiaoman 已用过，还是感觉 pacman 比较简单点

16

chuhemiao

OP

2016-01-21 11:30:13 +08:00

@agate 我用的是 pacman ，看文档说是支持的啊

17

chuhemiao

OP

2016-01-21 11:39:01 +08:00

@agate ![img caption](img url)，{% fancybox img_url [img_thumbnail] [img_caption] %}我用的是第一种，这样的效果是单张图，怎样成轮播的形式显示

18

Tiande

2016-01-21 12:17:44 +08:00

说这么多，不如把你的 _config.yml 贴出来。
谁知道少空格缩进之类的小问题会不会出现。

19

chuhemiao

OP

2016-01-21 16:56:25 +08:00

@Tiande
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 梦遥奇缘
subtitle: 想要，所以才去追寻--禾子
description: 梦遥奇缘,PHP,HTML,JS,Linux,YII,YAF,禾子,永远的呆,hexo,github,gitcafe,pacman,Laravel,CodeIgniter
author: 梦遥奇缘
language: zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://idiot6.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
#root
root: /
# 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: true
line_number: true
auto_detect: false
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
rss: /atom.xml #rss 地址默认即可
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: pacman

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
repo: https://github.com/chuhemiao/chuhemiao.github.io.git,master
- type: git
repo: https://gitcafe.com/chuhemiao/chuhemiao.git,gitcafe-pages

20

chuhemiao

OP

2016-01-21 16:58:12 +08:00

@Tiande 主题配置文件
##### Menu
menu:
Home: /
Archives: /archives
About: /about
Mylife: /Mylife
## you can create `tags` and `categories` folders in `../source`.
## And create a `index.md` file in each of them.
## set `front-matter`as
## layout: tags (or categories)
## title: tags (or categories)
## ---

#### Widgets
widgets:
- category
- tag
- rss
- links
## provide six widgets:category,tag,rss,archive,tagcloud,links.
## modify links in `/layout/_widget/links.ejs`.

#### RSS
rss: /atom.xml ## RSS address.
#sitemap
sitemap:
path: /sitemap.xml
#baidusitemap
baidusitemap:
path: /baidusitemap.xml
#root
root: /
#### Image
imglogo:
enable: true ## display image logo true/false.
src: '//source.shengxuezixun.com/images%2Flogo.png' ## `.svg` and `.png` are recommended,please put image into the theme folder `/pacman/source/img`.
favicon: img/favicon.ico ## size:32px*32px,`.ico` is recommended,please put image into the theme folder `/pacman/source/img`.
apple_icon: img/pacman.png ## size:114px*114px,please put image into the theme folder `/pacman/source/img`.

#### Author Avatar Picture
author_img_enable: true ## display author avatar picture
dataURI: false
## if the picture's format is dataURI please set the value to true,otherwise set the value to false.
## convert an image into base 64 data URIs http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ .
author_img_data: ''
## paste the dataURI in ONE LINE and included it by ''.
author_img: /img/author.png ## size:220px*220px.
## if the picture's format is `.png` or `.jpg` instead of dataURI,you should set the `dataURI` value to false.

#### Font
ShowCustomFont: true
## you can change custom font in `variable.styl` and `font.styl` which in the theme folder `/pacman/source/css`.

#### Toc
toc:
article: true ## show contents in article.
aside: true ## show contents in aside.
## you can set both of the value to true of neither of them.
## if you don't want display contents in a specified post,you can modify `front-matter` and add `toc: false`.

#### Fancybox
fancybox: true
## if you use gallery post or want use fancybox please set the value to true.
## if you want use fancybox in ANY post please copy the file `fancybox.js`.
## in theme folder `/pacman/scripts` to your hexo blog folder `../scritps`.
#### Author information
author:
google_plus: ## eg:116338260303228776998 for https://plus.google.com/u/0/116338260303228776998
intro_line1: "I'm chuhe now I'm working gaeamobile" ## eg: "Hello ,I'm Larry Page in Google."
intro_line2: "Storage place on the past and the future" ## eg: "This is my blog,believe it or not."
weibo: 3292942135 ## e.g. 436062867 for http://weibo.com/436062867
twitter: ## e.g. yangjiansky for https://twitter.com/yangjiansky
github: chuhemiao ## e.g. A-limon for https://github.com/A-limon
facebook: ## e.g. yangjian for https://favebook.com/yangjian
tsina: ## e.g. 1664838973 Your weibo ID,It will be used in share button.
linkedin: ## e.g. in/jeffweiner08 for https://www.linkedin.com/in/jeffweiner08

#### Comment
duoshuo:
enable: true ## duoshuo.com
short_name: myoung ## duoshuo short name.

#### Share button
jiathis:
enable: false ## if you use jiathis as your share tool,the built-in share tool won't be display.
id: ## e.g. 1501277 your jiathis ID.
tsina: ## e.g. 1664838973 Your weibo id,It will be used in share button.

#### Analytics
google_analytics:
enable: true
id: UA-68661235-3 ## e.g. UA-1766729-8 your google analytics ID.
site: idiot6.com ## e.g. yangjian.me your google analytics site or set the value as auto.
## You MUST upgrade to Universal Analytics first!
## https://developers.google.com/analytics/devguides/collection/upgrade/?hl=zh_CN

#### Custom Search
google_cse:
enable: false
cx: ## e.g. 000561263943549425496:mrzrm0gr4kg your Custom Search ID
## https://www.google.com/cse/
## To enable the custom search You must create a "search" folder in '/source' and a "index.md" file
## set the 'front-matter' as
## layout: search
## title: search
## ---

21

agate

2016-01-21 20:27:09 +08:00

hey. 我刚才有空玩了一下那个模板. 发现是它好像没有用你的 config override 自己的 config 所以你只要在 theme 里头的 config 的 fancybox 设为 true. 就激活了...
https://github.com/A-limon/pacman/blob/master/_config.yml#L52

22

Outshine

2016-01-21 20:37:34 +08:00

卧槽，我说你纠结个蛋蛋啊，官方文档说得这儿清楚了自己不去看，跑来问这点时间早搞定了

官方文档原文如下：
Galleries are created from elements who have the same "data-fancybox-group" or "rel" attribute value.

就是说 data-fancybox-group 或者 rel 一样的几张图片可以组成画廊（就是你说的幻灯片咯）

23

Outshine

2016-01-21 20:44:06 +08:00

哎呀。。。不能编辑了
好吧，我开始以为是你自己用 fancybox 插件弄图片呢，原来是要用主题集成的。。。
楼主只有自己去看下源码咯~

24

agate

2016-01-21 20:45:08 +08:00

@Outshine 手太快了... 哈哈

25

Tiande

2016-01-22 06:12:25 +08:00

## if you want use fancybox in ANY post please copy the file `fancybox.js`.
## in theme folder `/pacman/scripts` to your hexo blog folder `../scritps`.

实在不行，可以考虑换个主题试试， https://github.com/wuchong/jacman

26

chuhemiao

OP

2016-01-22 11:43:27 +08:00

@Tiande 主题的注释啊

27

chuhemiao

OP

2016-01-22 11:45:53 +08:00

@agate 我贴出的主题配置里面已经是加了 true 的啊，但是也没出现轮播的情况啊

28

chuhemiao

OP

2016-01-22 11:46:18 +08:00

@Outshine 请原谅我英语小白

29

Tiande

2016-01-22 16:35:16 +08:00

if you want use fancybox in ANY post please copy the file `fancybox.js` in theme folder `/pacman/scripts` to your hexo blog folder `../scritps`.

估计是 pacman 还需要在文章头添加相关配置，才能让某一文章实现 fancybox 。
你就按说明 use fancybox in ANY post 试试看。

30

chuhemiao

OP

2016-01-23 10:23:49 +08:00

@Tiande use fancybox in ANY post?这要怎么声明？

31

Tiande

2016-01-23 11:43:38 +08:00

1

if you want use fancybox in ANY post please copy the file `fancybox.js` in theme folder `/pacman/scripts` to your hexo blog folder `../scritps`.

copy the file `fancybox.js` in theme folder `/pacman/scripts` to your hexo blog folder `../scritps`.
看不懂文档吗😓

32

chuhemiao

OP

2016-01-23 13:50:58 +08:00

@Tiande 这个已经加了的，文档是这样写，加了没什么反应才问的

33

Tiande

2016-01-23 18:16:25 +08:00

爱莫能助了。
我用的 jacman ， fancybox 可用，你可以考虑换过去试试，主题配置差的不多。

34

chuhemiao

OP

2016-01-23 18:33:05 +08:00

@Tiande jacman 直接就能用？或许我可以试试那个好使不好，感谢

35

Tiande

2016-01-23 19:16:11 +08:00

Jacman is a fresh looking and responsive theme for Hexo with more features based on Pacman.

改改配置文件、图标就差不多了。