Begin主題正文功能演示Hot

知更鳥
知更鳥
知更鳥
1518
文章
6913
評論
2015年2月22日16:39:49 78 13.8K
摘要

正文具有二級、三級標題突出顯示,四級標題作為文章目錄索引,文章摘要、可選擇4種文章形式,圖片lightbox查看,視頻lightbox播放,文章中插入圖片幻燈,文字折疊開關,下載按鈕、回復可見內容等功能。

Begin主題,CSS3+HTML5、扁平化、響應式設計、自定義顏色風格,不依賴任何前端框架。

正文具有二級、三級標題突出顯示,四級標題作為文章目錄索引,文章摘要、可選擇4種文章形式,圖片lightbox查看,視頻lightbox播放,文章中插入圖片幻燈,文字折疊開關,代碼高亮、下載按鈕、回復可見內容等功能。

文章形式

  • 主題支持標準、日志、圖像、引用(軟件)四種形式。編輯文章時:
  • 有縮略圖的文章可以選擇標準形式
  • 無縮略圖的選擇日志形式
  • 文字少圖片多的日志可選擇圖像形式
  • 不同的文章形式,在文章列表頁面,會顯示不同的外觀布局

文章編輯

主題集成了常用自定義欄目添加面板,自定義縮略圖、文章描述、幻燈中的圖片、設置為側邊推薦文章等都可以在此添加。

WP自帶相冊

WordPress自帶相冊樣式演示

文章索引目錄

自動將文章中的四級標題<h4>(選中章節文字,點擊編輯器“段落”,選擇“四級標題即可”)轉化為文章索引目錄,需要到主題選項中開啟該功能。效果如本文。

當頁面滾動到第3個四級標題時才會在屏幕左側邊緣顯示目錄索引,滾動到第2個四級標題時自動隱藏。

文章摘要

編輯文章時可以在編輯器下面的“摘要”面板中輸入一段摘要內容,用于顯示在正文頂部,并同時顯示在文章列表中,有利于SEO,摘要控制在180字符以內,多出的部分會被截斷。

默認回行段首自動空兩格

按住上檔鍵(shift)的同時,按回車鍵(Enter),則無空格。

圖片lightbox查看

編輯文章插入圖片時:

  1. 從URL插入(外鏈)必須選擇鏈接到:圖像URL;
  2. 本地上傳,必須選擇鏈接到:媒體文件
  3. 圖片名稱不能為中文漢字,否則不會啟用圖片lightbox查看。

點擊圖片查看圖片lightbox效果

Begin主題正文功能演示

圖片超鏈接lightbox查看圖片

另外,利用這個圖片lightbox查看功能,可以只添加圖片的鏈接而不用將圖片添加到文章中,就可實現lightbox查看,可提高頁面加載速度,又不影響圖片瀏覽。

比如:圖片1圖片2圖片3

這三張圖片只添加了超鏈接,并沒有添加到文章中,也不影響正常lightbox查看。

文章中插入圖片幻燈

Begin主題正文功能演示Begin主題正文功能演示Begin主題正文功能演示Begin主題正文功能演示Begin主題正文功能演示Begin主題正文功能演示Begin主題正文功能演示Begin主題正文功能演示Begin主題正文功能演示Begin主題正文功能演示

回復可見

只有在本文留言后才能看見隱藏的內容

此處為隱藏的內容!
發表評論并刷新,方可查看

只有留言評論者才能看見隱藏的內容

密碼保護

通過添加短代碼為文章部分文字加密,只有輸入正確密碼才能查看,測試密碼:zmingcx

輸入密碼查看隱藏內容:

通過添加短代碼為文章部分文字加密,只有輸入正確密碼才能查看,測試密碼:zmingcx

插入視頻

 

文字折疊隱藏及代碼高亮

通過添加短代碼隱藏部分文字內容

查看隱藏的內容展開

  1. #tag_cloud-2 {
  2. position:relative;
  3. height:340px;
  4. margin: 10px auto 0;
  5. }
  6. #tag_cloud-2 a {
  7. position:absolute;
  8. color: #fff;
  9. text-align: center;
  10. text-overflow: ellipsis;
  11. whitewhite-space: nowrap;
  12. top:0px;
  13. left:0px;
  14. padding: 3px 5px;
  15. border: none;
  16. }
  17. #tag_cloud-2 a:hover {
  18. background: #d02f53;
  19. display: block;
  20. }
  21. #tag_cloud-2 a:nth-child(n) {
  22. background: #666;
  23. border-radius: 3px;
  24. display: inline-block;
  25. line-height: 18px;
  26. margin: 0 10px 15px 0;
  27. }
  28. #tag_cloud-2 a:nth-child(2n) {
  29. background: #d1a601;
  30. }
  31. #tag_cloud-2 a:nth-child(3n) {
  32. background: #286c4a;
  33. }
  34. #tag_cloud-2 a:nth-child(5n) {
  35. background: #518ab2;
  36. }
  37. #tag_cloud-2 a:nth-child(4n) {
  38. background: #c91d13;
  39. }

下載按鈕

主題集成短代碼實現的下載按鈕功能,編輯文章時,切換到文本編輯模式,點擊編輯工具欄 的下載按鈕或者下載鏈接(可自定義按鈕名稱),并在文章設置面板中輸入下載彈窗中下載按鈕名稱及下載地址,添加一個下載按鈕。

還可以在自定義欄目面板中輸 入button2、button3、button4,并分別在值中輸入按鈕名稱,同時再添加url2、url3、url4,在值中輸入下載鏈接,添加總共 4個彈窗中的下載按鈕。

無彈窗的鏈接按鈕

繼續閱讀
weinxin
關于本站
分享交流WordPress經驗與技巧,關注前端設計與網站制作。僅用于功能演示。
Begin主題正式發布! 原創主題

Begin主題正式發布!

  距Begin主題 1.8版,時隔三個多月,Begin主題 2.0 版正式發布,雖然中間也有多個版本推出,但都沒有發文。 如果你第一時啟用新版主題,可能并不能感覺到有什么明顯變化,這里就介...
響應式設計為什么要求縮略圖比例尺寸相同 Web前端

響應式設計為什么要求縮略圖比例尺寸相同

響應式主題模板目前大行其道,最大的好處就是一套模板能夠兼容多個終端,而無需為不同的終端做特定的主題模板,個人認為這是未來移動互聯網瀏覽最佳解決方案,而不是將網站轉化成APP,沒人喜...
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

評論:78   其中:訪客  76   博主  2
    • sq sq 0

      • 號都沒喝過 號都沒喝過 1

        好東西

        • 勇PAN高峰 勇PAN高峰 0

          好東西

          • sam sam 0

            矮油、、非常感謝樓主的分享!支持…

            • 小鈴鐺 小鈴鐺 0

              看看,學學

              • 白河岸邊 白河岸邊 0

                很漂亮的主題

                  • ℡愛國々飯團,安之若素... ℡愛國々飯團,安之若素... 1

                    @ 白河岸邊 測試下回復哦…

                  • alex1111 alex1111 0

                    棒棒的

                    • honeypotato honeypotato 0

                      非常喜歡這個主題

                      • 伊凡 伊凡 1

                        不錯,試試看

                        • Leo Leo 0

                          要看

                          • mengkun mengkun 1

                            代碼高亮功能有個很嚴重的BUG,比如說高亮這個php代碼……
                            if(empty($GET_[‘a’])):
                            http://v2.freep.cn/3tb_161229191628s4oe512293.png

                            • 東方大廈 東方大廈 1

                              此次v

                              • 明月登樓的博客 明月登樓的博客 5

                                不錯,贊一個先!

                                • sywb0596 sywb0596 0

                                  看看 貌似很不錯的樣子

                                  • 45641 45641 0

                                    賣主題的那個QQ什么時候能夠上線給回復呀!

                                    • leezorg leezorg 0

                                      看一下。學習一下。

                                      • wang wang 0

                                        看看~~~~~~

                                        • Distance Distance 1

                                          真不錯呀

                                          • 啦啦測試 啦啦測試 0

                                            厲害

                                            • 測試一下 測試一下 0

                                              支持鳥哥

                                              • 好的 好的 0

                                                感謝分享

                                                • nemoxy nemoxy 0

                                                  怎么使用回復可見,一直找不到,很想學習

                                                  • itbcx中文 itbcx中文 0

                                                    看看