utterances-bot commented 2 years ago

留言板 | Bamboo

https://yuang01.gitee.io/messageBoard/

MathsCode commented 2 years ago

博主你好，这个主题可以添加pdf吗，我在网上搜到的那些教程都无法成功实现在页面看pdf的功能

yuang01 commented 2 years ago

@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 commented 2 years ago

必须得用直链吗，可以用本地上传的嘛，这俩我都按照网上的教程试过，是通过本地文件，没有上传云端，但是最终在页面上都没有显示

yuang01 commented 2 years ago

@MathsCode 可以用本地的，例如在source文件夹下创建一个pdf文件夹，然后把test.pdf放进去，最后在.md文件中这样写就行了


<embed src="/pdf/test.pdf" type="application/pdf" width=100% height=500>

{% pdf  /pdf/test.pdf %}

xuesj1 commented 2 years ago

大佬，emoji表情怎么添加到头部导航？

yuang01 commented 2 years ago

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 直接把表情当做文字粘贴上去就行了，我的导航是这样写的

xuesj1 commented 2 years ago

谢谢大佬

xuesj1 commented 2 years ago

大佬，看一眼gitee的issuse吧，我填了一个友链

xuesj1 commented 2 years ago

大佬，请问有主题的qq交流群吗？顺便说下，您忘了在我gitee那提交issuse申请呢

yuang01 commented 2 years ago

@xuesj1 没有qq群哦

ctrl-github commented 2 years ago

大佬可以让目录变得更大吗感觉长度太窄了

ghost commented 2 years ago

萌新小白请教大佬我自定义侧边栏都按照您的步骤设置了都是我每次hexo server 的时候都没有生效啊哪里错了呢

ccmajor commented 2 years ago

博主你好，站内检索对象是否可以增加标题、标签、分类内容？目前貌似只搜索文章正文。

ctrl-github commented 2 years ago

你会不标签标题你见过什么系统有搜索的?

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 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: @.***>

yuang01 commented 2 years ago

@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的宽度了

yuang01 commented 2 years ago

@zhouyz1123 你是怎么弄的呢？是要创建一个source\_data\widget.yml文件哦

yanzongs commented 2 years ago

请问为什么每次用hexo d部署网页的主题内容都没有更新啊

yanzongs commented 2 years ago

还有为啥部署完进入网页会一片空白啊求救

yuang01 commented 2 years ago

@SH-SHQi 部署使用hexo clean然后 hexo g 然后 hexo d

adampan0527 commented 2 years ago

大佬，你是怎么给博客加速的啊，为什么我的访问速度就这么慢

adampan0527 commented 2 years ago

请问评论功能该如何配置，能发一篇博客介绍一下吗，我自己的一直在logging in

adampan0527 commented 2 years ago

我的评论功能登录之后给我弹出了，[object ProgressEvent]，这样的提示，然后一直logging in。。。求救

chqingkuang commented 2 years ago

博主你好，请问旧版友情链接的链接标签是如何设置的

yuang01 commented 2 years ago

@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 commented 1 year ago

博主，你好，我的首页内只能显示一篇文章，这应该如何修改呐

yuang01 commented 1 year ago

@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 commented 1 year ago

请问微博热搜榜，历史上的今天这些要怎么实现啊

yuang01 commented 1 year ago

@zqzess 阅读这个文章 https://yuang01.github.io/post/hexo-theme-bamboo/sidebar/

xinfang520 commented 1 year ago

.

nanoahSR commented 1 year ago

有一个问题想请教大神

是md文章的标题需要特殊设置吗？我看文章页面侧边栏目录里高亮的标题和页面实际位置不符。

我是按照markdown设置的标题，页面侧边栏目录显示正常，但无论我页面处于文章什么位置总是第一个标题高亮。

rpvvn commented 1 year ago

我想知道底部的鱼跳动的动画咋弄啊博主

chenyv118 commented 1 year ago

作者你好，关于分类我出现了一些问题，在首页的一个关于分类的小模块能显示我的分类，但是进入分类页面之后空空如也，请问这是为什么呢？

yuang01 commented 1 year ago

@nanoahSR 只有第一个标题高亮吗？markdown标题是用多个#号表示的

yuang01 commented 1 year ago

@chenyv118 主题设置footer.fish为true即可

yuang01 commented 1 year ago

@chenyv118 清除缓存，刷新页面试试呢

hisokanogon commented 1 year ago

你好, 请问有办法自订文章目录的外观吗? 希望可以不显示1, 1.1之类的改成像是星星或是爱心符号但不知道怎么做 >o<

wlysun commented 1 year ago

博主好为什么只能在本页面跳转，不在新开一个页面跳转 {% link 下载项目源码, https://gitee.com/wlysun/element-admin, /medias/gitee.jpg %}

wlysun commented 1 year ago

还有像el-table类似的表格怎么抒写，谢谢

yuang01 commented 1 year ago

@hisokanogon 版本3.1.4+已经加了目录序号改为爱心符号的配置

yuang01 commented 1 year ago

@hisokanogon 具体为

sidebar.side_toc.before

找到before这个参数，替换为爱心符号即可，爱心符号可去 https://www.emojiall.com/zh-hans/copy 网站复制

yuang01 commented 1 year ago

@wlysun 我用联想浏览器和谷歌浏览器都是新开的一个页面跳转的

yuang01 commented 1 year ago

.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了

yuang01 commented 1 year ago

@wlysun 注意，导入的js的script标签要加上defer属性

wlysun commented 1 year ago

好的，谢谢

mosen0227 commented 1 year ago

大佬，怎么更新主题

yuang01 commented 1 year ago

@mosen0227 如果是git clone 下载的主题的话，首先进入主题文件夹hexo0theme-bamboo，然后git add . 然后git commit -m"update remark" 然后git pull 拉取最新代码，可能会遇到冲突，遇到冲突的话，选择传入的更改即可。冲突指的是同一处代码被多人修改了，主题拉取代码的冲突指的是我和你都修改了这个地方，选择传入的更改，也就是选择我改的代码

mosen0227 commented 1 year ago

可以说详细一点吗？小白一个听不懂😥

mosen0227 commented 1 year ago

作者大大，就是你那个知乎热榜咋整的，看起来很不错诶，能教教吗？(„ಡωಡ„)栓Q

mosen0227 commented 1 year ago

侧边栏添加的那些小部件，怎么把一些放到下面，例如:微博热搜(✧∇✧)

yuang01 commented 1 year ago

@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;
    }
} */

知乎热榜就显示出来了

yuang01 / yuang01.github.io

messageBoard/ #92

留言板 | Bamboo