Open utterances-bot opened 2 years ago
博主你好,这个主题可以添加pdf吗,我在网上搜到的那些教程都无法成功实现在页面看pdf的功能
@MathsCode 预览pdf的方法很多
第一种方法,使用 embed
标签,这是html自带的,例如:
<embed src="https://huiyan.baidu.com/cms/2017%E5%B9%B4%E7%AC%AC%E4%B8%80%E5%AD%A3%E5%BA%A6%E4%B8%AD%E5%9B%BD%E5%9F%8E%E5%B8%82%E7%A0%94%E7%A9%B6%E6%8A%A5%E5%91%8A.pdf" type="application/pdf" width=100% height=500>
后面的width和height代表宽度和高度
第二种方法,使用hexo的一个插件hexo-pdf
首先安装插件
npm install --save hexo-pdf
然后在.md
文件中写入如下代码
{% pdf https://huiyan.baidu.com/cms/2017%E5%B9%B4%E7%AC%AC%E4%B8%80%E5%AD%A3%E5%BA%A6%E4%B8%AD%E5%9B%BD%E5%9F%8E%E5%B8%82%E7%A0%94%E7%A9%B6%E6%8A%A5%E5%91%8A.pdf %}
两种方法都是可行的
必须得用直链吗,可以用本地上传的嘛,这俩我都按照网上的教程试过,是通过本地文件,没有上传云端,但是最终在页面上都没有显示
@MathsCode 可以用本地的,例如在source
文件夹下创建一个pdf
文件夹,然后把test.pdf
放进去,最后在.md文件中这样写就行了
<embed src="/pdf/test.pdf" type="application/pdf" width=100% height=500>
{% pdf /pdf/test.pdf %}
大佬,emoji表情怎么添加到头部导航?
menu:
Home:
url: /
icon: fa fa-home
📄文档: # 这是二级菜单的写法
# icon: fa fa-link
children:
- name: 基本配置
url: /post/hexo-theme-bamboo-new
# icon: fa fa-music
- name: 页面功能配置
url: /post/hexo-theme-bamboo/page/
# icon: fa fa-film
- name: 主题更改
url: /post/hexo-theme-bamboo/theme/
# icon: fa fa-film
- name: Front-matter介绍
url: /post/hexo-theme-bamboo/front-matter/
# icon: fa fa-film
- name: 内置标签
url: /post/hexo-theme-bamboo/tags/
- name: 建议
url: /post/hexo-theme-bamboo/suggest/
Archives:
url: /archives
icon: fa fa-archive
Tags:
url: /tags
icon: fa fa-tags
Categories:
url: /categories
icon: fa fa-bookmark
About:
url: /about
icon: fa fa-user
Friends:
url: /huoban
留言板:
url: /messageBoard
icon: fas fa-comment-dots
🐱更多: # 这是二级菜单的写法
# icon: fa fa-link
children:
- name: 📷图库
url: /gallery
# icon: fa fa-music
- name: 👪友情连接-旧版
url: /friends
# icon: fa fa-film
- name: 🧒🏻关于我
url: /me
# icon: fa fa-film
- name: 🉐百度
url: http://baidu.com
# icon: fa fa-film
@xuesj1 直接把表情当做文字粘贴上去就行了,我的导航是这样写的
谢谢大佬
大佬,看一眼gitee的issuse吧,我填了一个友链
大佬,请问有主题的qq交流群吗?顺便说下,您忘了在我gitee那提交issuse申请呢
@xuesj1 没有qq群哦
大佬可以让目录变得更大吗 感觉长度太窄了
萌新小白 请教大佬我自定义侧边栏 都按照您的步骤设置了 都是我每次hexo server 的时候都没有生效啊 哪里错了呢
博主你好,站内检索对象是否可以增加 标题、标签、分类 内容?目前貌似只搜索文章正文。
你会不 标签 标题 你见过什么系统有搜索的?
------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2022年3月7日(星期一) 中午11:18 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [yuang01/yuang01.github.io] messageBoard/ (Issue #92)
博主你好,站内检索对象是否可以增加 标题、标签、分类 内容?目前貌似只搜索文章正文。
— Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you commented.Message ID: @.***>
@ctrl-github 目录长度的话,现在只能修改源代码
找到themes\hexo-theme-bamboo\source\css\_partial\post.styl
文件,修改第15行
将原来的
margin-left: calc(35% - 355px);
改成
margin-left: calc(35% - 400px);
这样就能,给右侧目录增加 50px的宽度, 然后还要修改 第31行, 将原来的
width: 300px;
更改为
width: 350px;
还要找到themes\hexo-theme-bamboo\layout\_partial\post\toc.ejs
文件,修改第31,32,33行代码
将原来的
$(".main-content").css({'width': '65%', 'margin-right': '10px', 'margin-left': 'calc(35% - 350px)'});
$(".toc-aside").css({'width': '300px', 'padding': '0 10px', 'transition': 'width 0.3s'});
$(".toc-content").css({'width': '300px'});
更改为
$(".main-content").css({'width': '65%', 'margin-right': '10px', 'margin-left': 'calc(35% - 400px)'});
$(".toc-aside").css({'width': '350px', 'padding': '0 10px', 'transition': 'width 0.3s'});
$(".toc-content").css({'width': '350px'});
这样右侧目录就能增加50px的宽度了
@zhouyz1123 你是怎么弄的呢?是要创建一个source\_data\widget.yml
文件哦
请问为什么每次用hexo d部署网页的主题内容都没有更新啊
还有为啥部署完进入网页会一片空白啊求救
@SH-SHQi 部署使用hexo clean然后 hexo g 然后 hexo d
大佬,你是怎么给博客加速的啊,为什么我的访问速度就这么慢
请问评论功能该如何配置,能发一篇博客介绍一下吗,我自己的一直在logging in
我的评论功能登录之后给我弹出了,[object ProgressEvent],这样的提示,然后一直logging in。。。求救
博主你好,请问旧版友情链接的链接标签是如何设置的
@chqingkuang friends
页是用来展示友情连接信息的页面,如果在你的博客 source
目录下还没有 friends/index.md
文件,那么你就需要新建一个,命令如下:
hexo new page "friends"
编辑你刚刚新建的页面文件 /source/friends/index.md
,至少需要以下内容:
---
title: friends
date: 2020-09-14 15:30:30
type: "friends"
layout: "friends"
---
同时,在你的博客 source
目录下新建 _data
目录,在 _data
目录中新建 friends.json
文件,文件内容如下所示:
[{
"avatar": "https://pic2.zhimg.com/80/v2-d1bd22e7dc847ae62028ae336d55ded9_720w.jpg?source=1940ef5c",
"name": "如梦亦如幻",
"introduction": "烟雨如江南",
"url": "https://github.com/yuang01"
}, {
"avatar": "https://pic1.zhimg.com/80/v2-1a60e33c33810a4d81a80282b8ca7a33_720w.jpg?source=1940ef5c",
"name": "青灯暮雨",
"introduction": "山水如墨染",
"url": "https://github.com/yuang01"
}, {
"avatar": "https://pic2.zhimg.com/80/v2-134122ca13d041f5ec1f2680f2677318_720w.jpg?source=1940ef5c",
"name": "寄情山水花草间",
"introduction": "宛如丹青未干",
"url": "https://github.com/yuang01"
}]
博主,你好,我的首页内只能显示一篇文章,这应该如何修改呐
@rczmm 在文章中设置swiper: true
即可将该篇文章放在轮播图里面,例如
---
title: Hexo主题--Bamboo介绍
date: 2020-09-14 14:06
swiper: true # 将改文章放入轮播图中
swiperImg: '/medias/1.jpg' # 该文章在轮播图中的图片,可以是本地目录下图片也可以是http://xxx图片
img: '/medias/1.jpg' # 该文章图片,可以是本地目录下图片也可以是http://xxx图片
categories: 前端
tags: [Hexo, hexo-theme-bamboo]
top: true
---
请问微博热搜榜,历史上的今天这些要怎么实现啊
@zqzess 阅读这个文章 https://yuang01.github.io/post/hexo-theme-bamboo/sidebar/
.
有一个问题想请教大神
是md文章的标题需要特殊设置吗?我看文章页面侧边栏目录里高亮的标题和页面实际位置不符。
我是按照markdown设置的标题,页面侧边栏目录显示正常,但无论我页面处于文章什么位置总是第一个标题高亮。
我想知道底部的鱼跳动的动画咋弄啊 博主
作者你好,关于分类我出现了一些问题,在首页的一个关于分类的小模块能显示我的分类,但是进入分类页面之后空空如也,请问这是为什么呢?
@nanoahSR 只有第一个标题高亮吗?markdown标题是用多个#号表示的
@chenyv118 主题设置footer.fish
为true即可
@chenyv118 清除缓存,刷新页面试试呢
你好, 请问有办法自订文章目录的外观吗? 希望可以不显示1, 1.1之类的改成像是星星或是爱心符号但不知道怎么做 >o<
博主好为什么只能在本页面跳转,不在新开一个页面跳转 {% link 下载项目源码, https://gitee.com/wlysun/element-admin, /medias/gitee.jpg %}
还有像el-table类似的表格怎么抒写,谢谢
@hisokanogon 版本3.1.4+已经加了目录序号改为爱心符号的配置
@hisokanogon 具体为
sidebar.side_toc.before
找到before这个参数,替换为爱心符号即可,爱心符号可去 https://www.emojiall.com/zh-hans/copy 网站复制
@wlysun 我用联想浏览器和谷歌浏览器都是新开的一个页面跳转的
.md文章页面使用element组件方法
import
参数,导入css和js
# 自己嵌入css或者script
import:
link:
- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
script:
- <script defer src="https://unpkg.com/element-ui/lib/index.js"></script>
在.md
文章页面写上template和script
<div id="myGetPhotoApp">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="date"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
<script>
new Vue({
el: '#myGetPhotoApp',
methods: {
handleClick(row) {
console.log(row);
}
},
data: function() {
return {
visible: false,
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
}
}
})
</script>
最后刷新页面就能看到一个el-button,点击弹出弹框,和el-table了
@wlysun 注意,导入的js的script标签要加上defer
属性
好的,谢谢
大佬,怎么更新主题
@mosen0227 如果是git clone 下载的主题的话,首先进入主题文件夹hexo0theme-bamboo
,然后git add .
然后git commit -m"update remark"
然后git pull
拉取最新代码,可能会遇到冲突,遇到冲突的话,选择传入的更改即可。冲突指的是同一处代码被多人修改了,主题拉取代码的冲突指的是我和你都修改了这个地方,选择传入的更改,也就是选择我改的代码
可以说详细一点吗?小白一个听不懂😥
作者大大,就是你那个知乎热榜咋整的,看起来很不错诶,能教教吗?(„ಡωಡ„)栓Q
侧边栏添加的那些小部件,怎么把一些放到下面,例如:微博热搜(✧∇✧)
@mosen0227 知乎热榜写法
第一步. 侧边栏写法,在侧边栏的home_widget
属性里:
- class_name: test2
id_name: test2
order: -1
name: 知乎热榜
icon: fa-brands fa-bilibili
icon_color: '#00AEEC'
url: https://www.zhihu.com/hot
background: '#fff'
html: '
<div id="mySwiper" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()">
<swiper class="myswiper" ref="myswiper" style="height:350px;" :options="swiperOption">
<swiper-slide v-for="(item, index) in listData" :key="index">
<a :href="item.url" class="toPath" target="_blank">
<img class="no-lazy" :src="item.pic" style="width:100%;height:100%;object-fit: cover;">
<div class="mySwiper-text">
<h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">{{item.title}}</h2>
<p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">{{item.desc}}</p>
</div>
</a>
</swiper-slide>
<!-- 如果你想继续增加轮播图,继续在下面写<swiper-slide>我是内容</swiper-slide>就行了 -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<script src="/mySwiper/index.js"></script>
<link href="/mySwiper/index.css" rel="stylesheet">
'
第二步:在根目录下的source
文件夹下创建mySwiper/index.js
文件:
// 如果想变换轮播方式等,进阶的话,可以看这个 https://github.surmon.me/vue-awesome-swiper/
// 当然你也可以引入jquery插件,都可以的, 不只是轮播图,其他特效也可以
new Vue({
el: "#mySwiper",
data: function () {
return {
swiperOption: {
direction: "vertical", // 这个是竖着的
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
// 注释上面的四个,则水平方向轮播
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// 注释掉上面这个,则不显示小点点
loop: true, // 循环
autoplay: {
delay: 2500,
disableOnInteraction: false,
}, // 自动播放,注释掉则不自动播放
on: {
init: function () {
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function () {
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
},
},
// or data-swiper-parallax="-100"
// 上面是文字动画效果,注释则取消文字动画,动画效果参见 https://www.swiper.com.cn/usage/animate/index.html
},
listData: [{url: '', pic: '', title: '', desc: ''}],
};
},
computed: {
swiper() {
return this.$refs.myswiper.$swiper;
},
},
created() {
this.getList();
},
methods: {
// 鼠标移入停止轮播
stopAutoPlay() {
this.swiperOption.autoplay && this.swiper.autoplay.stop();
},
// 鼠标移出开始轮播
startAutoPlay() {
this.swiperOption.autoplay && this.swiper.autoplay.start();
},
// 请求开源api, 获取历史上的今天数据
getList() {
fetch("https://api.vvhan.com/api/hotlist?type=zhihuHot", {
method: "GET", // *GET, POST, PUT, DELETE, etc.
})
.then((res) => {
return res.json();
})
.then((data) => {
let arr = data.data.filter(el => {
return el.pic;
})
this.listData = arr;
})
.catch((err) => {
console.log("err", err);
});
},
},
});
第三步,在根目录下的source文件夹下创建mySwiper/index.css
文件:
.myswiper .swiper-slide {
position: relative;
}
.myswiper .swiper-slide p {
z-index: 9999;
color: #fff;
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.myswiper .swiper-slide .mySwiper-text {
position: absolute;
font-size: 18px;
top: 20px;
left: 10px;
z-index: 9999;
color: #fff;
}
.myswiper .swiper-slide a.toPath {
display: block;
width: 100%;
height: 100%;
}
.myswiper .swiper-slide h2 {
z-index: 9999;
color: #fff;
font-size: 24px;
}
.myswiper .swiper-slide img {
filter: brightness(0.7); /* 图片变暗 ,字体看得清 */
}
.myswiper.swiper-container-vertical .swiper-pagination-bullet-active {
height: 30px;
border-radius: 10px;
transition: all 0.3s;
}
/* 暗黑模式样式在 .darkModel { } 类下 */
/* 例如
.darkModel .aaa {
color: #c9d1d9;
}
} */
知乎热榜就显示出来了
留言板 | Bamboo
https://yuang01.gitee.io/messageBoard/