B3log Solo 第三方皮肤 - 子兮子兮 - README

本贴最后更新于 1908 天前,其中的信息可能已经沧海桑田

B3log Solo 第三方皮肤 - 子兮子兮

本皮肤是基于官方版 yilia 皮肤进行美化修改的第三方皮肤,主色调修改为黑、白、灰(高冷三原色 😜 )、蓝(超链接)。
名称为 iMobile 的原因是,本人使用的此皮肤是直接把原 mobile 皮肤删除,将此皮肤的目录名和 skin.properties 中的配置改为 mobile,这样使用手机访问时也会使用此皮肤(原 mobile 皮肤实在无法欣赏 n(≧▽≦)n )。
此皮肤采用响应式布局,不用担心用手机访问会出现样式错乱。也建议使用者直接将此皮肤文件覆盖原 mobile 皮肤。

注意事项

此皮肤有些个性化的地方需要使用者自己去修改 ftl 模板文件,具体如下:

1. 自定义 ABOUT ME 介绍信息

点击博客标题会弹出 ABOUT ME 的窗口,当然若不想使用此弹窗你也可以在 side.ftl 中搜索 clickme 并删除相关代码。

效果图

关于我效果图

相关代码

ABOUT 代码

2. 自定义左侧个人导航链接

左侧新增的个人导航链接分别为 Github、微博、微信(可以是公众号)二维码、QQ 会话(需要在 QQ 推广 中开通)。

效果图

个人导航效果图

相关代码

从 side.ftl 第 47 行开始的注释,若使用请打开注释并将链接修改为自己的链接,包括下面的反馈邮箱链接。

个人链接代码
邮箱链接代码

3. 添加移动端顶部背景图

在屏幕宽度小于 750px(在 yilia7.min.css 中修改)时当做是移动端,由左右布局变为上下布局,顶部显示背景图,图片位置为 solo 根目录/images/bg.jpg,需要使用者将自己的图片放置于此。

相关代码

@media only screen and (max-width:750px) {
    .side {
        height: 400px;
        width: 100%;
        background: #666 url('/images/bg.jpg') center -40px;
    }
}

效果图

2018021061950jpg

4. 搜索页面

目前 Solo 的搜索页面还比较简陋,本人根据 yilia 的样式修改了一个搜索页面,放在 搜索页面(覆盖至根目录) 目录中,顾名思义,直接将目录中的文件剪切到 Solo 根目录即可。特别要注意的是里面的 opensearch.xml 文件,需要根据自己的实际情况进行修改,格式是在 hacpai 扒下来的,是用来在谷歌浏览器中通过输入域名加空格直接在地址栏实现站内搜索的。

特别注意需要在 WEB-INF/static-resources.xml 文件中添加一行 <include path="/opensearch.xml"/>,不然无法获取此静态资源。

相关代码

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" mlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>子兮子兮</ShortName>
  <Description>子兮子兮风兮寒,三江七泽情洄沿。</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">https://res.zixizixi.cn/izcn.png</Image>
  <Url type="text/html" method="get" template="https://zixizixi.cn/search?keyword={searchTerms}"/>
</OpenSearchDescription>

效果图

搜索页面

地址栏搜索

5. 其他

为了搭配此皮肤,建议对 WEB-INF/classes 目录下的 lang_zh_CN.properties 参数文件做适当的修改,以及替换此目录下的验证码文件 captcha_static.zip(从 Solo 2.7.0 版开始验证码改版,不用替换此文件)。

修改 lang_zh_CN 参数文件

viewCount1Label=\u6D4F\u89C8\u6B21\u6570\uFF1A
# (浏览次数:)修改为(浏览:)
viewCount1Label=\u6D4F\u89C8\uFF1A

articleCount1Label=\u6587\u7AE0\u603B\u6570\uFF1A
# (文章总数:)修改为(文章:)
articleCount1Label=\u6587\u7AE0\uFF1A

commentCount1Label=\u8BC4\u8BBA\u603B\u6570\uFF1A
# (评论总数:)修改为(评论:)
commentCount1Label=\u8BC4\u8BBA\uFF1A

onlineVisitor1Label=\u5F53\u524D\u8BBF\u5BA2\uFF1A
# (当前访客:)修改为(在线:)
onlineVisitor1Label=\u5728\u7ebf\uFF1A

linkLabel=\u53CB\u60C5\u94FE\u63A5
# (友情链接)修改为(链接)
linkLabel=\u94FE\u63A5

需要使用者注意并自己修改代码的地方大概就这些。 另外建议与皮肤无关的 H2 数据 JDBC 连接配置: jdbc.URL=jdbc:h2:~/solo_h2/db;AUTO_SERVER=TRUE;DB_CLOSE_ON_EXIT=FALSE


整体效果

1. 首页

首页

2. 存档

存档

3. 标签墙

标签墙

4. 动态

动态

5. 链接

链接

6. 文章详情

文章详情

7. 评论回复

评论回复

特别鸣谢

此皮肤的发布离不开 D 大(@88250)和 V 姐(@Vanessa)对 Solo 的辛勤耕耘,以及 V 姐 对此皮肤的的热情,本来此皮肤的代码被我改的乱七八糟,代码本来看不下去,开始 V 姐 提出 PR 一份的时候我是拒绝的,因为弄起来真的很麻烦,事实也的确如此 😂 ,即使现在也这代码也不一定有多整洁。写完了此 README 感觉用这个皮肤真的好麻烦呀,应该不会有人用吧 O(∩_∩)O~

第三方项目

此改版皮肤的诞生要特别感谢以下这些第三方项目:

  1. layer:一款美观易用的 jQuery 弹出层;
  2. OwO:萌萌哒评论框表情内容输入工具(Revised OwO);
  3. iconfont:阿里巴巴功能强大且图标内容很丰富的矢量图标库。

... 好吧只记得这 3 个了,可能也只有这三个 😂 。


平等,自由,奔放

Equality, Freedom, Passion

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1089 引用 • 3466 回帖 • 303 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1424 引用 • 10041 回帖 • 469 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1346 回帖 • 2 关注
  • 文档
    56 引用 • 1288 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 不好意思,我挪了一下目录。。。。 把皮肤丢到 skins 目录下了

    https://github.com/b3log/solo-third-skins/tree/master/skins/iMobile

    1 回复
  • 一定会有人用的,写的比官方的都好 😂

    1 回复
  • iTanken

    嗯嗯,好的,那我再改一下里面的链接

  • iTanken

    😆 😆 😆

  • someone

    请问一下标签墙和友情链接怎么改成其他颜色呀?😰

  • someone 1

    标签颜色

    在 css 里面搜索 .color 开头的,修改里面的颜色

  • someone

    非常感谢!❤️

  • someone

    客气了 ٩(๑>◡<๑)۶

  • someone

    那个,关闭文章目录栏那个按钮点了没反应该怎么处理呢?
    ALT

  • someone

    按 F12 看一下控制台报错没有,或者留一下你的博客地址,我看一下

  • ningjianguo

    移动端点击主页搜索按钮,显示的搜索页面样式错误,楼主,请问一下是什么原因呀?谢谢

    1 回复
  • iTanken

    只有移动端样式错误吗,桌面端正常?

  • ningjianguo

    是的,只有移动端样式显示错误,桌面端正常

    1 回复
  • iTanken

    把你的链接发我看看呢

    2 回复
  • ningjianguo

    好,稍等一下,我部署一下项目

  • ningjianguo

    楼主,抱歉打扰了,我部署到服务器上去那个搜索页面又显示正常了,谢谢您的答复!!!

    1 回复
  • iTanken

    trollface

  • ningjianguo

    楼主,我使用 markdown 编辑文章,编辑好后发布出去,代码块的底色没有变灰还是白色的但是右下角有那个复制代码的按钮,我看了你的博客你的代码块的底色是灰色的,我想问一下这是因为我使用 markdowm 没编辑好还是因为程序的原因啊?

    1 回复
  • iTanken

    代码块你怎么写的?

    3 回复
  • ningjianguo
        /*这是一个启动方法*/
    	public void main(String[] args){
    	  System.out.println("i am a javaer");//这是一个输出语句
    	}
    
  • ningjianguo

    这样写的,楼主

  • ningjianguo

    代码块前面和末尾都加了三个 ```

    1 回复
  • iTanken

    没毛病呀,你看控制台没有,看看报错了没

    2 回复
  • ningjianguo

    楼主你帮我看一下,http://www.ningjianguo.xyz/articles/2018/03/25/1521959943588.html,模仿您的博客做的😄

  • ningjianguo

    他报的错误是显示那个表情的插件没有,不知道那个插件没有加进去对这个有没有影响,麻烦您帮我看看

  • iTanken

    代码块不是正常的吗?代码的颜色没有变是因为你没有在 ``` 后跟语言类型。

    1 回复
  • ningjianguo

    麻烦您帮我做个示范,写一小段 java 或者 js 代码,非常感谢楼主!

    1 回复
  • iTanken

    imagepng

    你都不会看文档的吗,你这样很容易挨揍的。

    1 回复
  • ningjianguo

    QQ20180327192716png
    我是这样写的,发布之后代码块还是没有灰色的底色,,,,楼主不要揍我😭

  • ningjianguo

    楼主,那个代码段底色无法显示的 bug,我已解决。我说一下解决方法,望后来人少入点坑。
    原因:因为有一个页面无法加载 OWO 表情插件,导致 OWO 对象无法生成、报错,从何影响后续代码的执行,问题页面 macro-comments.ftl

    解决方法:找个 macro-comments.ftl 页面删除

     var OwO_demo = new OwO({ |
     logo: 'OωO表情', api: '/skins/${skinDirName}/js/lib/OwO/OwO.js', |
     container: document.getElementsByClassName('OwO')[0], target: document.getElementsByClassName('OwO-textarea')[0], |
     position: 'up', width: '100%', maxHeight: '250px', useMarkdown: true, usedSize: 'h_150', addClass: 'itip', |
     appendContent:' 使用OωO表情更生动形象的表达情感' |
     }); |
    

    即可。我全局搜索了一下好像这个 OwO_demo 对象任何地方都没有用到,不晓得干嘛用的~~~

  • ningjianguo

    楼主,问一下这个 markdowm 编辑器,不支持标题格式还是我这样写有问题啊?,麻烦您帮我看一下。

    UX6B3_L2P6KR5MBD4Kpng

    为什么字体没有变大啊?

    1 回复
  • iTanken

    空格。

    1 回复
  • ningjianguo

    好,谢谢您,解决了。我再重新看一下那个 markdown 文档了,太渣了~~~

    1 回复
  • 用习惯你就会觉得比较方便

  • someone

    😄 你好,首页会访问这个 /skins/iMobile/js/welcome.js 我的中文乱码,怎么处理下?

  • someone

    ... 可能是你修改了 js 后保存的编码格式不是 UTF-8。

  • Jinghaha

    话说,禁止鼠标选中,然后复制 这个功能怎样才能关闭

    1 回复
  • iTanken 1

    imagepng

    把 css 里的这些删掉

    1 回复
    • onselectstart="return false;"
  • someone

    为什么安装你这个皮肤后无法加载 js css 等,我看了看这些资源请求的是服务器根目录 没有带项目名,新手求教

  • someone

    你可以用开发者工具调试一下看看,或者你把链接地址发我看一下呢

  • someone

    我是用本地的 Tomcat 跑的,用浏览器调试模式看了看是那些静态资源是直接指向的:8080/skin/.... 没有带项目名所以访问不到,请问是不是我前面配置有些地方没配?

  • someone

    楼主我知道了 我把 Tomcat 配置成直接用域名访问就可以了 看了看你的皮肤里代码 是直接指向/skin/... 前面并没加 staticServePath

  • someone

    😂 哦哦,这个皮肤代码都是在生产环境下一边用一边修改的,在开发环境下可能会有些问题。

  • someone

    还有下面说的 那个 js 文件乱码确实 但是我用开发工具打开一下 重新指定一下 UTF-8 就好了 但是原文件的编码本来就是 UTF-8 挺奇怪的

  • someone

  • someone

    大佬 能帮我看看 为啥回帖不能用吗😂 直接点我头像就能进

  • someone

    你网站报 502,访问不了。
    502

  • someone

    好了 我重启了一下

  • someone

    这个皮肤的 macro-comments.ftl 里是有 ${miniPostfix}
    imagepng

    但是我在你的博客里并没有看到 .minOwO.js 是 json 格式的数据, OwO.min.jsOwO.dev.js 才是这个插件
    imagepng

    还有里面 api: 后面的地址需要修改成自己的
    imagepng

请输入回帖内容 ...